/* --- Pay Settings: responsive overrides (top of file) --- */
/* Main styles are in the consolidated block further down (~line 66688+).
   Only put mobile overrides here that cannot live there. */
:root {
    --lh-bg: #f6f6f6;
    --lh-text: #19202a;
    --lh-muted: #5d6879;
    --lh-line: #d8dde3;
    --lh-dark: #3b414f;
    --lh-dark-2: #2d313c;
    --lh-cyan: #2563eb;
    --lh-cyan-2: #1d4ed8;
    --lh-soft: #eef3f7;
    --lh-shadow: 0 14px 30px rgba(21, 28, 38, 0.16);
    --lh-topline-h: 48px;
    --lh-nav-h: 58px;
    --lh-topline-start: rgba(37, 99, 235, 0.48);
    --lh-topline-end: rgba(29, 78, 216, 0.4);
    --lh-header-start: rgba(30, 64, 175, 0.58);
    --lh-header-end: rgba(23, 37, 84, 0.46);
    --lh-header-scrolled-start: rgba(30, 58, 138, 0.72);
    --lh-header-scrolled-end: rgba(23, 37, 84, 0.64);
    --lh-nav-active-start: #2563eb;
    --lh-nav-active-end: #3b82f6;
}

.admin-page-appointments-calendar {
    --appointments-hour-height: 108px;
    --appointments-sticky-top: 68px;
    --appointments-toolbar-sticky-height: 74px;
}

.admin-page-appointments-calendar .appointments-page-shell {
    height: calc(100vh - var(--appointments-sticky-top));
    display: flex;
    flex-direction: column;
}

.admin-page-appointments-calendar .appointments-toolbar-panel {
    flex: 0 0 auto;
}

.admin-page-appointments-calendar .appointments-calendar-panel {
    flex: 1 1 auto;
    height: calc(100vh - var(--appointments-sticky-top) - var(--appointments-toolbar-sticky-height) - 16px);
    min-height: 0;
    overflow: hidden;
}

.admin-page-appointments-calendar .appointments-calendar-board {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.admin-page-appointments-calendar .appointments-calendar-grid-wrap {
    overflow-y: visible;
}

.admin-page-appointments-calendar .appointments-calendar-time-rail {
    top: 0;
}

@media (max-width: 900px) {
    .admin-page-appointments-calendar {
        --appointments-hour-height: 80px;
    }
    .appointments-calendar-panel {
        height: calc(100vh - var(--appointments-sticky-top) - var(--appointments-toolbar-sticky-height) - 16px);
        min-height: 0;
    }
    .appointments-calendar-board {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    .appointments-calendar-grid-wrap {
        overflow-y: visible;
    }
    .appointments-calendar-time-rail {
        top: 0;
    }
}

.admin-body.admin-page-appointments-calendar .admin-content {
    padding: 0;
}

/* Responsive admin content for appointments calendar */
@media (max-width: 768px) {
    .admin-body.admin-page-appointments-calendar .admin-content {
        padding: 0 0.25rem;
    }
}

@media (max-width: 480px) {
    .admin-body.admin-page-appointments-calendar .admin-content {
        padding: 0;
    }
}

.admin-body.admin-page-appointments-calendar .admin-topbar {
    margin: 0;
}

.appointments-page-shell {
    display: grid;
    gap: 0;
}

/* Responsive page shell */
@media (max-width: 768px) {
    .appointments-page-shell {
        padding: 0 0.25rem;
    }
}

@media (max-width: 480px) {
    .appointments-page-shell {
        padding: 0;
    }
}

.admin-body.admin-page-appointments-sales .admin-content {
    background: #f7f7f8;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-appointments-sales .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-appointments-sales .clients-pro-header {
    /* Aumentar espacio superior para que el encabezado quede un poco más abajo */
    margin: 1.15rem 0 1rem;
}

.admin-body.admin-page-appointments-sales .clients-pro-main {
    padding: 0 1rem 1.2rem;
}

.admin-body.admin-page-appointments-sales .clients-pro-layout {
    margin-top: 0;
}

.admin-body.admin-page-appointments-sales .clients-pro-side {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.admin-body.admin-page-appointments-sales .clients-pro-side-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch;
    align-content: flex-start;
    flex: 1 1 auto !important;
    gap: 0.22rem;
    min-height: calc(100vh - 68px - 60px);
    min-height: calc(100dvh - 68px - 60px);
}

@media (min-width: 981px) {
    .admin-body.admin-page-appointments-sales .clients-pro-layout {
        display: block;
        min-height: calc(100vh - 68px);
    }

    .admin-body.admin-page-appointments-sales .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        min-height: 0;
        max-height: none;
        border-top: 0;
        border-right: 1px solid #dedfe4;
        border-bottom: 0;
        border-left: 0;
        overflow-y: auto;
        z-index: 14;
    }

    .admin-body.admin-page-appointments-sales .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-appointments-sales .clients-pro-main {
        margin-left: 210px;
        padding: 0 1rem 1.2rem;
    }
}

@media (max-width: 980px) {
    .admin-body.admin-page-appointments-sales .clients-pro-side {
        position: sticky !important;
        top: 0;
        left: auto;
        bottom: auto;
        width: auto;
        height: calc(100dvh - 68px);
        min-height: calc(100dvh - 68px);
        max-height: calc(100dvh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
    }
}

.appointments-sales-header {
    align-items: flex-start;
}

.appointments-sales-export {
    flex-shrink: 0;
}

.appointments-sales-panel {
    margin-bottom: 1rem;
}

.admin-body.admin-page-appointments-sales .clients-pro-side-nav {
    align-content: start;
    grid-auto-rows: max-content;
}

.admin-body.admin-page-appointments-sales .clients-pro-side-nav a {
    justify-content: flex-start;
}

.appointments-sales-toolbar,
.clients-pro-toolbar.appointments-sales-toolbar {
    display: block;
    padding: 0.72rem 0.9rem;
    border-radius: 16px;
    background: #f3f4f6;
    border: 1px solid #eceff4;
}

.appointments-sales-toolbar-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.appointments-sales-toolbar-nav-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.appointments-sales-toolbar-main,
.appointments-sales-toolbar-search-row,
.appointments-sales-toolbar-filters-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
}

.appointments-sales-toolbar-filters-row--appointments {
    flex-wrap: nowrap;
}

.appointments-sales-toolbar-filters-row--appointments .appointments-sales-search {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: none;
}

.appointments-sales-toolbar-panel {
    margin-bottom: 0.75rem;
}

.appointments-sales-results-panel {
    margin-bottom: 1rem;
}

.appointments-sales-results-panel .inventory-table-footer.appointments-sales-table-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 0.95rem;
    padding-top: 0.95rem;
    border-top: 1px solid #e3e9f2;
}

.appointments-sales-results-panel .inventory-table-results {
    margin: 0;
    text-align: center;
    color: #6f7f95;
    font-size: 0.82rem;
    font-weight: 600;
}

.appointments-sales-results-panel .inventory-table-pagination.appointments-sales-table-pagination {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    flex-wrap: nowrap;
}

.appointments-sales-results-panel .inventory-table-pagination.appointments-sales-table-pagination .inventory-table-page-link,
.appointments-sales-results-panel .inventory-table-pagination.appointments-sales-table-pagination .inventory-table-page-nav {
    flex: 0 0 auto;
    width: auto;
    min-width: 36px;
}

.appointments-sales-toolbar-end {
    margin-left: auto;
    flex-shrink: 0;
}

.appointments-sales-search .material-symbols-outlined,
.appointments-sales-chip .material-symbols-outlined,
.appointments-sales-filter-btn .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.appointments-sales-search {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: none;
    min-height: 48px;
}

.appointments-sales-search input {
    flex: 1 1 auto;
    min-width: 0;
}

.appointments-sales-search-clear {
    width: 32px;
    height: 32px;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #8a99ad !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: none !important;
    cursor: pointer;
}

.appointments-sales-search-clear:hover,
.appointments-sales-search-clear:focus-visible {
    background: #f3f4f6 !important;
    color: #152137 !important;
}

.appointments-sales-search-clear[hidden] {
    display: none !important;
}

.appointments-sales-search-clear .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.appointments-sales-chip {
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid #d7dce6;
    background: #ffffff;
    color: #152137;
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.appointments-sales-chip:hover {
    background: #f5f7fb;
    border-color: #d0d7e3;
}

.appointments-sales-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 48px;
    padding-inline: 1rem;
    border-radius: 999px;
    background: #ffffff;
    color: #152137;
    border: 1px solid #d7dce6;
    box-shadow: none;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline,
.admin-body.admin-page-appointments-sales button.appointments-sales-filter-btn {
    background: #ffffff !important;
    color: #152137 !important;
    border-color: #d7dce6 !important;
}

.appointments-sales-filter-btn:hover,
.appointments-sales-filter-btn:focus-visible {
    background: #f8fafc;
    border-color: #cfd6e2;
    color: #152137;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn:hover,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn:focus-visible,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline:hover,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline:focus-visible,
.admin-body.admin-page-appointments-sales button.appointments-sales-filter-btn:hover,
.admin-body.admin-page-appointments-sales button.appointments-sales-filter-btn:focus-visible {
    background: #f8fafc !important;
    color: #152137 !important;
    border-color: #cfd6e2 !important;
}

.appointments-sales-date-btn {
    appearance: none;
    border: 1px solid #d7dce6;
    cursor: pointer;
}

.appointments-sales-filter-btn.is-active {
    background: #eef0ff;
    border-color: #d8dcff;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.is-active,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.is-active,
.admin-body.admin-page-appointments-sales .appointments-sales-filter-btn.btn.btn-outline.is-active {
    background: #ffffff !important;
    color: #152137 !important;
    border-color: #d7dce6 !important;
}

.appointments-sales-sort {
    min-width: 360px;
    margin-left: auto;
}

.appointments-sales-toolbar-filters-row .appointments-sales-sort--toolbar {
    margin-left: auto;
    min-width: 0;
    flex: 0 1 280px;
    max-width: 320px;
}

.appointments-sales-toolbar-filters-row--appointments .appointments-sales-sort--toolbar {
    flex: 0 0 auto;
    min-width: min(100%, 24rem);
    max-width: none;
    width: auto;
}

.appointments-sales-toolbar-filters-row--appointments .appointments-sales-chip,
.appointments-sales-toolbar-filters-row--appointments .appointments-sales-filter-btn {
    flex-shrink: 0;
}

.appointments-sales-sort--toolbar select {
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid #d7dce6;
    background: #ffffff;
    color: #152137;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.55rem 2.4rem 0.55rem 1rem;
    width: 100%;
    max-width: 100%;
}

.appointments-sales-toolbar-filters-row--appointments .appointments-sales-sort--toolbar select {
    min-width: 24rem;
}

.appointments-sales-table-wrap--appointments,
.appointments-sales-table-wrap--memberships {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.appointments-sales-table--memberships {
    min-width: 980px;
}

.appointments-sales-table--memberships .appointments-sales-membership-link,
.appointments-sales-table--memberships .appointments-sales-client-link {
    font-weight: 700;
}

.appointments-membership-sold-detail {
    display: grid;
    gap: 1rem;
    width: min(100%, 920px);
    max-width: 920px;
    margin: 0 auto;
    padding: 0 0 1.75rem;
}

.appointments-membership-sold-detail.panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 1.75rem;
}

.admin-body.admin-page-appointments-sales.admin-page-membership-sold-detail .clients-pro-main {
    padding-top: 1.15rem;
}

.appointments-membership-sold-head-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.appointments-membership-sold-head-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

.appointments-membership-sold-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0;
    border-radius: 999px;
    color: #111827;
    text-decoration: none;
    flex-shrink: 0;
}

.appointments-membership-sold-back:hover,
.appointments-membership-sold-back:focus-visible {
    background: #f3f4f6;
}

.appointments-membership-sold-back .material-symbols-outlined {
    font-size: 1.35rem;
}

.appointments-membership-sold-title-wrap {
    min-width: 0;
}

.appointments-membership-sold-title-wrap p {
    margin: 0.35rem 0 0;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.4;
}

.appointments-membership-sold-title-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.62rem;
}

.appointments-membership-sold-title-row h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #111827;
}

.appointments-membership-sold-options {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
}

.appointments-membership-sold-options summary {
    list-style: none;
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-membership-sold-options .clients-pro-options-menu {
    z-index: 12;
}

.appointments-membership-sold-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 1.4rem 1.5rem 1.3rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.appointments-membership-sold-card h2 {
    margin: 0 0 1.15rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}

.appointments-membership-sold-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 3.5rem;
    margin: 0;
}

.appointments-membership-sold-grid > div {
    display: grid;
    gap: 0.22rem;
    align-content: start;
    padding: 0;
    border: 0;
}

.appointments-membership-sold-grid dt {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: #111827;
}

.appointments-membership-sold-grid dd {
    margin: 0;
    color: #4b5563;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.45;
}

.appointments-membership-sold-grid-span {
    grid-column: 1;
}

.appointments-membership-sold-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b5bff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.appointments-membership-sold-link:hover,
.appointments-membership-sold-link:focus-visible {
    text-decoration: underline;
}

.appointments-membership-sold-muted {
    color: #64748b;
}

.appointments-sales-status-pill.is-membership-paused {
    background: #fff1df;
    color: #c56a00;
}

.appointments-membership-sold-activity-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
}

.appointments-membership-sold-filter {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    border-radius: 999px;
    padding: 0.42rem 0.82rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.appointments-membership-sold-filter:hover,
.appointments-membership-sold-filter:focus-visible {
    background: #f9fafb;
    border-color: #d1d5db;
}

.appointments-membership-sold-filter.is-active {
    background: #6b5bff;
    border-color: #6b5bff;
    color: #ffffff;
}

.appointments-membership-sold-activity-list {
    display: grid;
    gap: 1.15rem;
    padding: 0;
}

.appointments-membership-sold-activity-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    position: relative;
    padding: 0;
    margin: 0;
    border-left: 0;
}

.appointments-membership-sold-activity-item.is-clickable {
    cursor: pointer;
    border-radius: 0.65rem;
    padding: 0.35rem 0.45rem;
    margin: -0.35rem -0.45rem;
    transition: background-color 0.15s ease;
}

.appointments-membership-sold-activity-item.is-clickable:hover,
.appointments-membership-sold-activity-item.is-clickable:focus-visible {
    background: #f8fafc;
    outline: none;
}

.appointments-membership-sold-receipt-link {
    pointer-events: none;
}

.appointments-membership-sold-activity-subtitle {
    color: #6b7280;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .appointments-membership-sold-detail {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-bottom: 1.5rem;
    }

    .admin-body.admin-page-appointments-sales.admin-page-membership-sold-detail .clients-pro-main {
        padding-top: 1rem;
    }

    .appointments-membership-sold-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.1rem;
    }

    .appointments-membership-sold-grid-span {
        grid-column: auto;
    }
}

.appointments-membership-sold-activity-item[hidden] {
    display: none;
}

.appointments-membership-sold-activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #6b5bff;
    color: #ffffff;
    flex-shrink: 0;
}

.appointments-membership-sold-activity-icon .material-symbols-outlined {
    font-size: 1.25rem;
}

.appointments-membership-sold-activity-body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    padding-top: 0.05rem;
}

.appointments-membership-sold-activity-body time {
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 500;
}

.appointments-membership-sold-activity-body strong {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointments-membership-sold-empty {
    margin: 0;
    color: #64748b;
}

.appointments-membership-sold-terms-modal[hidden] {
    display: none;
}

.appointments-membership-sold-terms-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.appointments-membership-sold-terms-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.appointments-membership-sold-terms-dialog {
    position: relative;
    width: min(420px, calc(100% - 2rem));
    max-height: min(80vh, 720px);
    overflow: auto;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.appointments-membership-sold-terms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.appointments-membership-sold-terms-header h3 {
    margin: 0;
}

.appointments-membership-sold-terms-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #64748b;
}

.appointments-membership-sold-terms-body {
    color: #334155;
    line-height: 1.55;
}

.appointments-membership-sold-services-modal[hidden] {
    display: none;
}

.appointments-membership-sold-services-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.appointments-membership-sold-services-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.appointments-membership-sold-services-dialog {
    position: relative;
    width: min(420px, calc(100% - 2rem));
    max-height: min(80vh, 720px);
    overflow: auto;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.35rem 1.35rem 1.1rem;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.appointments-membership-sold-services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.appointments-membership-sold-services-header h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.appointments-membership-sold-services-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #64748b;
}

.appointments-membership-sold-services-group + .appointments-membership-sold-services-group {
    margin-top: 1.25rem;
}

.appointments-membership-sold-services-group h4 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: #0f172a;
}

.appointments-membership-sold-services-list {
    display: grid;
    gap: 0.85rem;
}

.appointments-membership-sold-service-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-membership-sold-service-main {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.appointments-membership-sold-service-main strong {
    color: #0f172a;
    font-weight: 600;
}

.appointments-membership-sold-service-main span {
    color: #64748b;
    font-size: 0.92rem;
}

.appointments-membership-sold-service-price {
    color: #0f172a;
    white-space: nowrap;
    font-weight: 500;
}

body.appointments-membership-services-open {
    overflow: hidden;
}

body.appointments-membership-pause-open {
    overflow: hidden;
}

.appointments-membership-sold-pause-modal[hidden] {
    display: none;
}

.appointments-membership-sold-pause-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.appointments-membership-sold-pause-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.appointments-membership-sold-pause-dialog {
    position: relative;
    width: min(560px, calc(100% - 2rem));
    max-height: min(85vh, 760px);
    overflow: auto;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.5rem 1.65rem 1.25rem;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.appointments-membership-sold-pause-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.appointments-membership-sold-pause-header h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.appointments-membership-sold-pause-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #64748b;
}

.appointments-membership-sold-pause-intro {
    margin: 0 0 1rem;
    color: #334155;
    line-height: 1.55;
}

.appointments-membership-sold-pause-field {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

.appointments-membership-sold-pause-field span {
    font-weight: 700;
    color: #0f172a;
}

.appointments-membership-sold-pause-field textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #dbeafe;
    border-radius: 0.75rem;
    font: inherit;
    resize: vertical;
}

.appointments-membership-sold-pause-hint {
    margin: 0 0 1.25rem;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.appointments-membership-sold-pause-actions {
    display: flex;
    justify-content: flex-end;
}

.appointments-membership-sold-pause-submit {
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    padding: 0.7rem 1.35rem;
    cursor: pointer;
}

.appointments-membership-sold-pause-submit:hover,
.appointments-membership-sold-pause-submit:focus-visible {
    background: #0f172a;
}

.appointments-sales-table--appointments {
    min-width: 1180px;
}

.appointments-sales-table--appointments th,
.appointments-sales-table--appointments td {
    white-space: nowrap;
}

.appointments-sales-table--appointments td:nth-child(2),
.appointments-sales-table--appointments td:nth-child(3) {
    white-space: normal;
    min-width: 140px;
}

.appointments-sales-table--appointments .appointments-sales-status-cell {
    white-space: nowrap;
}

.appointments-sales-table--appointments .appointments-sales-status-cell .appointments-sales-payment-pill {
    display: inline-flex;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.appointments-sales-sort select {
    min-height: 48px;
    background: #ffffff;
}

.appointments-sales-filters-modal[hidden] {
    display: none;
}

.appointments-sales-filters-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.appointments-sales-filters-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(2px);
}

.appointments-sales-filters-dialog {
    position: relative;
    width: min(720px, 100%);
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #e7eaf1;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
    padding: 2rem;
}

.appointments-sales-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.admin-body.admin-page-appointments-sales .appointments-sales-filters-header h2 {
    margin: 0;
    font-size: 1.35rem !important;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
}

.appointments-sales-filters-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-filters-close:hover,
.appointments-sales-filters-close:focus-visible {
    background: #f3f4f6;
}

.appointments-sales-filters-form {
    display: grid;
    gap: 1.5rem;
}

.appointments-sales-filters-field {
    display: grid;
    gap: 0.6rem;
}

.appointments-sales-filters-field > span {
    font-size: 1.02rem;
    font-weight: 800;
    color: #111827;
}

.appointments-sales-filters-field select {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid #d6dce8;
    background: #ffffff;
    color: #152137;
    padding: 0 1rem;
    font-size: 1.04rem;
}

.appointments-sales-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.appointments-sales-filters-reset,
.appointments-sales-filters-apply {
    min-height: 52px;
    padding: 0 1.35rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-filters-reset {
    background: #ffffff;
    border: 1px solid #d7dce6;
    color: #111827;
}

.appointments-sales-filters-apply {
    background: #111111;
    border: 1px solid #111111;
    color: #ffffff;
}

.appointments-sales-date-modal[hidden] {
    display: none;
}

.appointments-sales-date-modal {
    position: fixed;
    inset: 0;
    z-index: 3001;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.appointments-sales-date-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(2px);
}

.appointments-sales-date-dialog {
    position: relative;
    width: min(760px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #e7eaf1;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
    padding: clamp(0.85rem, 2vw, 1.6rem);
}

.appointments-sales-date-form {
    display: grid;
    gap: clamp(0.65rem, 1.6vw, 1.35rem);
}

.appointments-sales-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-body.admin-page-appointments-sales .appointments-sales-date-header h2 {
    margin: 0;
    color: #101828;
    font-size: 1.35rem !important;
    line-height: 1.2;
    font-weight: 800;
}

.appointments-sales-date-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-date-close:hover,
.appointments-sales-date-close:focus-visible {
    background: #f3f4f6;
}

.appointments-sales-date-field {
    display: grid;
    gap: 0.55rem;
}

.appointments-sales-date-field > span {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 800;
}

.appointments-sales-date-field select,
.appointments-sales-date-field input {
    width: 100%;
    min-height: clamp(42px, 6.5vw, 54px);
    border-radius: 14px;
    border: 1px solid #d6dce8;
    background: #ffffff;
    color: #152137;
    padding: 0 1rem;
    font-size: clamp(0.88rem, 1.8vw, 1.04rem);
}

.appointments-sales-date-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.appointments-sales-date-calendars {
    border-top: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
    padding: clamp(0.45rem, 1.2vw, 1rem) 0 clamp(0.4rem, 1vw, 0.9rem);
}

.appointments-sales-date-calendars-head {
    display: grid;
    grid-template-columns: clamp(32px, 5vw, 44px) 1fr clamp(32px, 5vw, 44px);
    align-items: center;
    gap: clamp(0.35rem, 1vw, 0.8rem);
    margin-bottom: clamp(0.35rem, 1vw, 0.8rem);
}

.appointments-sales-date-month-titles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.appointments-sales-date-month-titles strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
    text-transform: lowercase;
}

.appointments-sales-date-nav {
    width: clamp(32px, 5vw, 44px);
    height: clamp(32px, 5vw, 44px);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-date-nav:hover,
.appointments-sales-date-nav:focus-visible {
    background: #f3f4f6;
    color: #0f172a;
}

.appointments-sales-date-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.65rem, 2vw, 1.5rem);
}

.appointments-sales-date-weekdays,
.appointments-sales-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(0.1rem, 0.35vw, 0.25rem);
}

.appointments-sales-date-weekdays {
    margin-bottom: 0.45rem;
}

.appointments-sales-date-weekdays span {
    text-align: center;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: lowercase;
}

.appointments-sales-date-empty {
    display: block;
    aspect-ratio: 1;
    min-height: 0;
    max-height: clamp(28px, 5.2vw, 42px);
}

.appointments-sales-date-day {
    aspect-ratio: 1;
    min-height: 0;
    max-height: clamp(28px, 5.2vw, 42px);
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: clamp(0.72rem, 1.8vw, 0.98rem);
    font-weight: 700;
    cursor: pointer;
}

.appointments-sales-date-day.is-in-range {
    background: #f2f4f7;
    border-radius: 12px;
}

.appointments-sales-date-day.is-start,
.appointments-sales-date-day.is-end {
    background: #111111;
    color: #ffffff;
}

.appointments-sales-date-day.is-today:not(.is-start):not(.is-end) {
    box-shadow: inset 0 0 0 1px #d6dce8;
}

.appointments-sales-date-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.9rem;
}

.appointments-sales-date-cancel,
.appointments-sales-date-apply {
    min-height: clamp(42px, 6vw, 52px);
    padding: 0 clamp(0.9rem, 2vw, 1.5rem);
    border-radius: 999px;
    font-size: clamp(0.86rem, 1.8vw, 1rem);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-sales-date-cancel {
    background: #ffffff;
    border: 1px solid #d7dce6;
    color: #111827;
}

.appointments-sales-date-apply {
    background: #111111;
    border: 1px solid #111111;
    color: #ffffff;
}

@media (max-width: 900px), (max-height: 900px) {
    .appointments-sales-date-modal {
        padding: clamp(0.5rem, 2vw, 1rem);
    }

    .appointments-sales-date-dialog {
        width: min(680px, calc(100vw - 1rem));
        max-height: calc(100dvh - 1rem);
        border-radius: 18px;
    }

    .appointments-sales-date-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .appointments-sales-date-month-titles {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .appointments-sales-date-month-titles strong:nth-child(2) {
        display: none;
    }

    .appointments-sales-date-months {
        grid-template-columns: 1fr;
    }

    .appointments-sales-date-month[data-sales-date-calendar="1"] {
        display: none;
    }

    .admin-body.admin-page-appointments-sales .appointments-sales-date-header h2 {
        font-size: clamp(1rem, 3.2vw, 1.2rem) !important;
    }

    .appointments-sales-date-field > span {
        font-size: 0.9rem;
    }

    .appointments-sales-date-weekdays span {
        font-size: 0.72rem;
    }
}

@media (max-width: 640px), (max-height: 700px) {
    .appointments-sales-date-modal {
        padding: 0.5rem;
    }

    .appointments-sales-date-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 0.85rem 0.8rem 0.95rem;
    }

    .appointments-sales-date-inputs {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .appointments-sales-date-close {
        width: 36px;
        height: 36px;
    }

    .appointments-sales-date-nav {
        width: 32px;
        height: 32px;
    }

    .appointments-sales-date-actions {
        gap: 0.55rem;
    }
}

@media (max-width: 480px), (max-height: 620px) {
    .appointments-sales-date-empty,
    .appointments-sales-date-day {
        max-height: clamp(24px, 6vw, 32px);
        font-size: 0.72rem;
    }

    .appointments-sales-date-weekdays span {
        font-size: 0.66rem;
    }

    .appointments-sales-date-field select,
    .appointments-sales-date-field input {
        min-height: 40px;
        padding: 0 0.75rem;
    }

    .appointments-sales-date-cancel,
    .appointments-sales-date-apply {
        min-height: 40px;
        padding-inline: 0.85rem;
        font-size: 0.84rem;
    }
}

body.appointments-sales-filters-open {
    overflow: hidden;
}

body.appointments-sales-dates-open {
    overflow: hidden;
}

.appointments-sales-table {
    min-width: 1280px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.appointments-sales-table th {
    white-space: nowrap;
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
    background: #f7f9fc;
    color: #111827;
    font-size: 0.60rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid #e6edf5;
}

.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table th {
    padding-top: 0.72rem !important;
    padding-bottom: 0.72rem !important;
    color: #111827 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.appointments-sales-sort-header-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.appointments-sales-sort-header {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.appointments-sales-sort-header:hover,
.appointments-sales-sort-header:focus-visible {
    color: #0f172a;
}

.appointments-sales-sort-header:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.2);
    outline-offset: 3px;
    border-radius: 10px;
}

.appointments-sales-sort-arrows {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.02rem;
    line-height: 0.9;
    color: #98a2b3;
    transform: translateY(0);
}

.appointments-sales-sort-arrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    text-shadow: 0 0 0 currentColor;
}

.appointments-sales-sort-header.is-active .appointments-sales-sort-arrows {
    color: #667085;
}

.appointments-sales-sort-header.is-asc .appointments-sales-sort-arrow-up,
.appointments-sales-sort-header.is-desc .appointments-sales-sort-arrow-down {
    color: #0f172a;
    transform: scale(1.08);
}

.appointments-sales-table td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: top;
    color: #182233;
    font-size: 0.78rem;
    line-height: 1.35;
}

.appointments-sales-table tbody tr {
    transition: background-color 0.18s ease;
}

.appointments-sales-table tbody tr:hover td {
    background: #fbfcff;
}

.appointments-sales-table td:nth-child(2),
.appointments-sales-table td:nth-child(3) {
    color: #101828;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
}

.appointments-sales-client-link {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f56ff;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.16s ease;
}

.appointments-sales-client-link:hover,
.appointments-sales-client-link:focus-visible {
    color: #4f46e5;
    text-decoration: underline;
}

.appointments-sales-client-text {
    color: #101828;
    font: inherit;
    font-weight: 600;
}

.appointments-sales-table td:nth-child(4),
.appointments-sales-table td:nth-child(8),
.appointments-sales-table td:nth-child(9) {
    color: #415066;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
}

.appointments-sales-table th:nth-child(5),
.appointments-sales-table th:nth-child(6),
.appointments-sales-table td:nth-child(5),
.appointments-sales-table td:nth-child(6) {
    text-align: center;
}

.appointments-sales-table th:nth-child(4),
.appointments-sales-table td:nth-child(4) {
    text-align: left;
}

.appointments-sales-table th:nth-child(10),
.appointments-sales-table th:nth-child(11) {
    text-align: center;
}

.appointments-sales-table td:nth-child(10):not(.appointments-sales-updated-cell) {
    text-align: right;
}

.appointments-sales-table .appointments-sales-updated-cell {
    vertical-align: middle;
    text-align: center;
    width: 1%;
}

.appointments-sales-table th.appointments-sales-updated-head {
    text-align: center;
}

.appointments-sales-table .appointments-sales-updated-at {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    line-height: 1.15;
    white-space: nowrap;
}

.appointments-sales-table .appointments-sales-updated-date,
.appointments-sales-table .appointments-sales-updated-time {
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.appointments-sales-table td:nth-child(11) {
    text-align: center;
}

.appointments-sales-table td:nth-child(11) .appointments-sales-status-stack {
    align-items: center;
}

.appointments-sales-table td:nth-child(5),
.appointments-sales-table td:nth-child(6) {
    color: #415066;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
}

.appointments-sales-table td:nth-child(7) {
    color: #334155;
    font-size: 0.76rem;
}

.appointments-sales-ref {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #f3f1ff;
    border: 1px solid #e2defe;
    color: #5f56ff;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.appointments-sales-ref:hover,
.appointments-sales-ref:focus-visible {
    background: #ece9ff;
    border-color: #d7d0ff;
    color: #4f46e5;
}

.appointments-sales-price {
    white-space: nowrap;
    color: #101828;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: normal;
}

.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table td.appointments-sales-price {
    color: #101828 !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    font-variant-numeric: normal !important;
    text-align: right !important;
}

.appointments-sales-price.is-refund,
.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table td.appointments-sales-price.is-refund {
    color: #b42318 !important;
}

.appointments-sales-table--records th.appointments-sales-money-head,
.appointments-sales-table--records th.appointments-sales-status-head,
.appointments-sales-table--records td.appointments-sales-price.is-centered,
.appointments-sales-table--records td.appointments-sales-status-cell {
    text-align: center !important;
    vertical-align: middle;
}

.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table--records td.appointments-sales-price.is-centered {
    text-align: center !important;
}

.appointments-sales-table--records td.appointments-sales-status-cell {
    text-align: center !important;
}

.appointments-sales-table--records td.appointments-sales-status-cell .appointments-sales-status-pill {
    margin-inline: auto;
}

.appointments-sales-subnav {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    isolation: isolate;
}

.appointments-sales-subnav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    background: #0f172a;
    z-index: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, width;
}

.appointments-sales-subnav-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.42rem 1.05rem;
    border-radius: 999px;
    color: #475467;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    transition: color 0.22s ease;
}

.appointments-sales-subnav-link:hover,
.appointments-sales-subnav-link:focus-visible {
    color: #101828;
}

.appointments-sales-subnav-link.is-active {
    color: #fff;
    background: transparent;
}

[data-sales-results-region] {
    transition: opacity 0.22s ease, transform 0.22s ease;
}

[data-sales-results-region][aria-busy="true"] {
    opacity: 0.42;
    transform: translateY(2px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .appointments-sales-subnav-indicator,
    [data-sales-results-region] {
        transition: none !important;
    }
}

.clients-pro-toolbar.appointments-sales-toolbar.is-loading {
    pointer-events: none;
}

.clients-pro-toolbar.appointments-sales-toolbar.is-loading .appointments-sales-subnav-link:not(.is-active) {
    opacity: 0.72;
}

.appointments-sales-table--drafts th.appointments-sales-money-head,
.appointments-sales-table--drafts td.appointments-sales-price.is-centered {
    text-align: center !important;
    vertical-align: middle;
}

.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table--drafts th.appointments-sales-money-head,
.admin-body.admin-page-appointments-sales .clients-pro-table.appointments-sales-table--drafts td.appointments-sales-price.is-centered {
    text-align: center !important;
}

.appointments-sales-ref.is-draft-ref {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: #7c6cff;
    font-weight: 800;
    cursor: pointer;
    text-align: inherit;
    box-shadow: none;
    min-height: 0;
}

.appointments-sales-ref.is-draft-ref:hover,
.appointments-sales-ref.is-draft-ref:focus-visible {
    background: #ece9ff;
    border-color: #d7d0ff;
    color: #4f46e5;
}

.appointments-sales-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0.14rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-sales-status-pill.is-reserved {
    background: #e8efff;
    color: #3667f5;
}

.appointments-sales-status-pill.is-confirmed {
    background: #ece7ff;
    color: #5f56ff;
}

.appointments-sales-status-pill.is-waiting {
    background: #fff2dc;
    color: #b46a00;
}

.appointments-sales-status-pill.is-started {
    background: #e4f7ea;
    color: #177245;
}

.appointments-sales-status-pill.is-completed {
    background: #e4f7ea;
    color: #177245;
}

.appointments-sales-status-pill.is-membership-active {
    background: #e4f7ea;
    color: #177245;
}

.appointments-sales-status-pill.is-refunded {
    background: #f2f4f7;
    color: #64748b;
}

.appointments-sales-status-pill.is-review {
    background: #fff7ed;
    color: #c2410c;
}

@keyframes appointments-sales-row-flash {
    0%,
    100% {
        background-color: transparent;
    }

    25%,
    75% {
        background-color: #ebe6ff;
    }

    50% {
        background-color: #d4cbff;
    }
}

.clients-pro-table.appointments-sales-table tr.appointments-sales-row--flash td {
    animation: appointments-sales-row-flash 0.75s ease-in-out 3;
}

.appointments-sales-status-pill.is-draft {
    background: #f2f4f7;
    color: #64748b;
}

.appointments-sales-status-pill.is-canceled,
.appointments-sales-status-pill.is-no-show {
    background: #fde7ec;
    color: #d34163;
}

.appointments-sales-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.appointments-sales-status-picker {
    position: relative;
    display: inline-flex;
}

.appointments-sales-status-trigger {
    border: 0;
    cursor: pointer;
    gap: 0.1rem;
    padding-right: 0.42rem;
}

.appointments-sales-status-trigger .appointments-sales-status-chevron {
    font-size: 0.95rem;
    line-height: 1;
    margin-left: 0.05rem;
}

.appointments-sales-status-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 12000;
    min-width: 230px;
    max-height: min(70vh, 420px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid #e5e7ef;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 0.35rem 0;
}

.appointments-sales-status-menu[hidden] {
    display: none !important;
}

.appointments-sales-table-wrap--appointments {
    overflow-x: auto;
    overflow-y: visible;
}

.appointments-sales-table--appointments .appointments-sales-status-cell {
    position: relative;
    overflow: visible;
}

.appointments-sales-payment-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-size: 0.77rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-sales-payment-pill.is-paid {
    background: #e4f7ea;
    color: #177245;
}

.appointments-sales-payment-pill.is-partial {
    background: #fff2dc;
    color: #b46a00;
}

.appointments-sales-payment-pill.is-pending {
    background: #edf1f5;
    color: #4d5a6d;
}

.appointments-sales-payment-note {
    display: block;
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
}

.appointments-sales-placeholder {
    min-height: 300px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #64748b;
}

.appointments-sales-placeholder h3 {
    margin: 0 0 0.35rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.appointments-sales-placeholder p {
    margin: 0;
    max-width: 420px;
    font-size: 0.96rem;
    font-weight: 600;
}

.appointments-sales-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.appointments-sales-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 40px;
    padding: 0.5rem 1.15rem;
    border-radius: 10px;
    border: 1px solid #111827;
    background: #111827;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.appointments-sales-add-btn-icon {
    font-size: 1.15rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1;
}

.appointments-sales-add-btn:hover {
    background: #1f2937;
    border-color: #1f2937;
    color: #ffffff;
}

.admin-body.admin-page-sales-daily-summary .clients-pro-main {
    padding: 0 1rem 1.2rem;
    background: #f3f4f6;
}

.sales-daily-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sales-daily-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sales-daily-toolbar-left {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.sales-daily-nav-btn,
.sales-daily-today-btn,
.sales-daily-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding: 0 0.95rem;
    border: 1px solid #d2d2d2;
    border-radius: 0.55rem;
    background: #ffffff;
    color: #303030;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sales-daily-nav-btn {
    width: 2.35rem;
    padding: 0;
}

.sales-daily-nav-btn.is-disabled {
    opacity: 0.42;
    border-color: #e4e4e4;
    background: #f3f3f3;
    color: #a3a3a3;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.sales-daily-nav-btn .material-symbols-outlined,
.sales-daily-filters-btn .material-symbols-outlined {
    font-size: 1.15rem;
}

.sales-daily-today-btn {
    padding: 0 0.85rem;
}

.sales-daily-today-btn.is-active {
    background: #f7f7f7;
}

.sales-daily-date-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0 0.85rem;
    border: 1px solid #d2d2d2;
    border-radius: 0.55rem;
    background: #ffffff;
    font: inherit;
    cursor: pointer;
}

.sales-daily-date-chip:hover {
    border-color: #b8b8b8;
    background: #fafafa;
}

.sales-daily-date-icon {
    color: #5f6f84;
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: none;
}

.sales-daily-date-label {
    color: #141414;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}

.sales-daily-date-dialog {
    width: min(380px, 100%);
    padding: 1.25rem 1.35rem 1.35rem;
}

.sales-daily-date-header {
    justify-content: flex-end;
    margin-bottom: 0.35rem;
}

.sales-daily-date-calendars {
    border-top: 0;
    border-bottom: 0;
    padding: 0;
}

.sales-daily-date-calendars-head {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.sales-daily-date-calendars-head strong {
    text-align: center;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
    text-transform: lowercase;
}

.appointments-sales-date-day.is-future {
    opacity: 0.35;
    cursor: not-allowed;
}

body.appointments-sales-daily-date-open {
    overflow: hidden;
}

.sales-daily-filters-btn.is-active {
    border-color: #8a8a8a;
    background: #fafafa;
}

.sales-daily-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
    align-items: start;
}

.sales-daily-card {
    border: 1px solid #e3e3e3;
    border-radius: 0.65rem;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sales-daily-card h2 {
    margin: 0;
    padding: 1.2rem 1.4rem 1rem;
    color: #141414;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sales-daily-table-wrap {
    overflow: auto;
}

.sales-daily-table {
    width: 100%;
    border-collapse: collapse;
}

.sales-daily-table thead th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e8ecf1;
    background: #f3f6fa;
    color: #8a93a3;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    white-space: nowrap;
}

.sales-daily-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    color: #141414;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
}

.sales-daily-table thead th:first-child,
.sales-daily-table tbody td:first-child {
    text-align: left;
    font-weight: 400;
}

.sales-daily-table thead th:first-child {
    font-weight: 700;
}

.sales-daily-table tbody tr.is-total td,
.sales-daily-table tbody tr.is-emphasis td {
    font-weight: 700;
}

.sales-daily-table tbody tr.is-total td:not(:first-child),
.sales-daily-table tbody tr.is-emphasis td:not(:first-child) {
    font-weight: 700;
}

.sales-daily-table tbody tr.is-total td {
    padding-top: 1.05rem;
    border-top: 1px solid #e6e6e6;
    border-bottom: 0;
}

.sales-daily-table tbody tr.is-emphasis td:first-child {
    font-weight: 600;
}

.sales-daily-table tbody tr:last-child td {
    border-bottom: 0;
}

.sales-daily-table tbody tr:not(.is-total):not(.is-emphasis):hover td {
    background: transparent;
}

@media (max-width: 1100px) {
    .sales-daily-grid {
        grid-template-columns: 1fr;
    }

    .sales-daily-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-daily-filters-btn {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .appointments-sales-toolbar-main,
    .appointments-sales-toolbar-search-row,
    .appointments-sales-toolbar-filters-row,
    .appointments-sales-toolbar-end {
        width: 100%;
    }

    .appointments-sales-toolbar-filters-row--appointments {
        flex-wrap: wrap;
    }

    .appointments-sales-toolbar-filters-row .appointments-sales-sort--toolbar {
        flex: 1 1 100%;
        max-width: none;
        width: 100%;
        margin-left: 0;
    }

    .appointments-sales-sort {
        min-width: 0;
        width: 100%;
        margin-left: 0;
    }

    .appointments-sales-search {
        min-width: 0;
        width: 100%;
        flex-basis: auto;
    }
}

form[data-appointments-filters] {
    display: contents;
}

.appointments-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-page-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8c6b3d;
}

.appointments-page-head h1 {
    margin: 0;
}

.appointments-page-copy {
    margin: 0.45rem 0 0;
    max-width: 780px;
    color: #5d6b82;
}

.appointments-page-badge {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.6rem 1rem;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #22324b;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-toolbar-panel,
.appointments-calendar-panel,
.appointments-editor-panel,
.appointments-list-panel {
    overflow: hidden;
}

.appointments-toolbar-panel {
    position: sticky;
    top: var(--appointments-sticky-top);
    overflow: visible;
    z-index: 14;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 1px solid rgba(147, 197, 253, 0.18);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 20px rgba(22, 33, 48, 0.08), 0 1px 3px rgba(22, 33, 48, 0.04);
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
}

/* Responsive toolbar panel */
@media (max-width: 768px) {
    .appointments-toolbar-panel {
        border-radius: 0;
        box-shadow: 0 2px 12px rgba(22, 33, 48, 0.06);
        margin: 0 0.25rem;
    }
}

@media (max-width: 480px) {
    .appointments-toolbar-panel {
        margin: 0;
    }
}

.appointments-calendar-panel {
    overflow: visible;
    margin-top: 0;
    border: 1px solid #d4dfec;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 4px 20px rgba(22, 33, 48, 0.06), 0 1px 3px rgba(22, 33, 48, 0.03);
}

/* Responsive calendar panel */
@media (max-width: 768px) {
    .appointments-calendar-panel {
        border-radius: 0;
        box-shadow: 0 2px 12px rgba(22, 33, 48, 0.04);
        margin: 0 0.25rem;
    }
    .appointments-calendar-panel::before {
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .appointments-calendar-panel {
        margin: 0;
    }
}

.appointments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.appointments-toolbar-cluster,
.appointments-toolbar-nav,
.appointments-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.appointments-toolbar-cluster-right {
    margin-left: auto;
}

.appointments-toolbar-chip,
.appointments-toolbar-icon,
.appointments-toolbar-range,
.appointments-toolbar-view,
.appointments-toolbar-picker,
.appointments-toolbar-view-select,
.appointments-toolbar-add-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid rgba(147, 197, 253, 0.28);
    border-radius: 12px;
    background: #ffffff;
    color: #1e293b;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(22, 33, 48, 0.04);
}

.appointments-toolbar-panel button.appointments-toolbar-chip,
.appointments-toolbar-panel button.appointments-toolbar-icon,
.appointments-toolbar-panel button.appointments-toolbar-view-select,
.appointments-toolbar-panel button.appointments-centers-trigger,
.appointments-toolbar-panel button.appointments-members-trigger {
    background: #ffffff;
    color: #16243c;
    border-color: #d7dfe9;
}

.admin-body.admin-page-appointments-calendar [aria-label="Lista de espera"],
.admin-body.admin-page-appointments-calendar [title="Lista de espera"],
.admin-body.admin-page-appointments-calendar [data-tooltip="Lista de espera"],
.admin-body.admin-page-appointments-calendar a[href*="section=waitlist"],
.admin-body.admin-page-appointments-calendar [data-appointments-waitlist-toggle],
.admin-body.admin-page-appointments-calendar [data-waitlist-toggle] {
    display: none !important;
}

.appointments-toolbar-icon {
    width: 46px;
    padding: 0;
}

.appointments-toolbar-icon .material-symbols-outlined,
.appointments-toolbar-picker .material-symbols-outlined,
.appointments-toolbar-view-select .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-toolbar-date-group {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    border: 1px solid rgba(147, 197, 253, 0.28);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 1px 2px rgba(22, 33, 48, 0.04);
}

.appointments-toolbar-date-group .appointments-toolbar-icon,
.appointments-toolbar-date-group .appointments-toolbar-range {
    min-height: 46px;
    border: 0;
    border-radius: 0;
}

.appointments-toolbar-date-group .appointments-toolbar-icon {
    font-size: 0;
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    overflow: hidden;
    text-indent: -9999px;
}

.appointments-toolbar-date-group .appointments-toolbar-icon::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: #172235;
    font-size: 1.15rem;
    line-height: 1;
    text-indent: 0;
}

.appointments-toolbar-icon-prev::before {
    content: 'chevron_left';
}

.appointments-toolbar-icon-next::before {
    content: 'chevron_right';
}

.appointments-toolbar-date-group .appointments-toolbar-range,
.appointments-toolbar-date-group .appointments-toolbar-icon + .appointments-toolbar-range,
.appointments-toolbar-date-group .appointments-toolbar-range + .appointments-toolbar-icon {
    border-left: 1px solid #d7dfe9;
}

.appointments-toolbar-range {
    flex: 1 1 auto;
    min-width: 0;
}

.appointments-toolbar-date-group-with-picker {
    display: flex;
    position: relative;
    gap: 0;
    padding: 0;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    flex: 1 1 auto;
    min-width: 0;
}

.appointments-toolbar-date-group-with-picker::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #d7dfe9;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    pointer-events: none;
}

.appointments-week-picker {
    position: relative;
    display: flex;
    align-items: stretch;
    z-index: 80;
}

.appointments-toolbar-date-group-with-picker .appointments-week-picker {
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1rem 0 1.1rem;
    gap: 0.42rem;
    line-height: 1;
    border-left: 1px solid #d7dfe9;
    cursor: pointer;
    user-select: none;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-range,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range-button {
    width: auto;
    min-width: 0;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-range,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon + .appointments-toolbar-range,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range + .appointments-toolbar-icon,
.appointments-toolbar-date-group-with-picker .appointments-toolbar-range-button {
    border-left: 0;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-range-button {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0 1rem 0 1rem;
    gap: 0.3rem;
    white-space: nowrap;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon {
    position: relative;
    z-index: 1;
}

.appointments-toolbar-date-group-with-picker > .appointments-toolbar-icon:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.appointments-toolbar-date-group-with-picker > .appointments-toolbar-icon:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.appointments-toolbar-date-group-with-picker .appointments-toolbar-icon + .appointments-week-picker,
.appointments-toolbar-date-group-with-picker .appointments-week-picker + .appointments-toolbar-icon {
    box-shadow: inset 1px 0 0 #d7dfe9;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button > span:first-child {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 1rem;
    color: #64748b;
    pointer-events: none;
}

.appointments-toolbar-date-group .appointments-week-picker + .appointments-toolbar-icon {
    border-left: 1px solid #d7dfe9;
}

.appointments-toolbar-date-group .appointments-toolbar-range-button:focus-visible {
    outline: 2px solid rgba(95, 79, 255, 0.36);
    outline-offset: -2px;
}

.appointments-week-popover[hidden] {
    display: none;
}

.appointments-week-popover {
    position: absolute;
    top: calc(100% + 0.85rem);
    left: 50%;
    z-index: 81;
    width: min(316px, calc(100vw - 1.25rem));
    padding: 0.9rem;
    border: 1px solid rgba(213, 221, 233, 0.92);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

.appointments-week-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.appointments-week-popover-head strong {
    flex: 1 1 auto;
    text-align: center;
    color: #16243c;
    font-size: 1rem;
    font-weight: 800;
    text-transform: capitalize;
}

.appointments-week-nav {
    width: 40px;
    height: 40px;
    border: 1px solid #d8e1ec;
    border-radius: 12px;
    background: #ffffff;
    color: #16243c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointments-week-nav .material-symbols-outlined {
    font-size: 1.22rem;
    line-height: 1;
}

.appointments-week-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin-bottom: 0.9rem;
    color: #5f6f86;
    font-size: 0.72rem;
    font-weight: 700;
}

.appointments-week-status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.appointments-week-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    display: inline-block;
}

.appointments-week-status-dot.is-high {
    background: #22c55e;
}

.appointments-week-status-dot.is-medium {
    background: #f59e0b;
}

.appointments-week-status-dot.is-low {
    background: #ef4444;
}

.appointments-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.32rem;
    margin-bottom: 0.42rem;
}

.appointments-weekdays span {
    color: #68778d;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.appointments-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}

.appointments-week-day {
    position: relative;
    min-width: 0;
    height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #132238;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.14rem;
    padding: 0.2rem 0.14rem;
    box-shadow: none;
    cursor: pointer;
    text-align: center;
    overflow: visible;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.appointments-week-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 0.28rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-week-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 0.12rem);
    min-width: 0;
    min-height: 22px;
    padding: 0.14rem 0.12rem;
    border-radius: 10px;
    background: #eef2f7;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    opacity: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-week-day-count[hidden] {
    display: none !important;
}

.appointments-week-day:hover,
.appointments-week-day:focus-visible {
    background: #f8fbff;
    border-color: #cfd8e5;
    color: #111827;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.appointments-week-day.is-outside {
    color: #94a3b8;
    opacity: 0.58;
    font-weight: 500;
}

.appointments-week-day.is-outside .appointments-week-day-count {
    opacity: 0.82;
}

.appointments-week-day.is-disabled,
.appointments-week-day:disabled {
    cursor: not-allowed;
    pointer-events: auto;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
    opacity: 0.6;
}

.appointments-week-day.is-disabled .appointments-week-day-number,
.appointments-week-day:disabled .appointments-week-day-number {
    background: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
}

.appointments-week-day.is-disabled .appointments-week-day-count,
.appointments-week-day:disabled .appointments-week-day-count {
    background: #e2e8f0;
    color: #64748b;
    box-shadow: none;
}

.appointments-week-day.is-disabled:hover,
.appointments-week-day.is-disabled:focus-visible,
.appointments-week-day:disabled:hover,
.appointments-week-day:disabled:focus-visible {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
}

.appointments-week-day.is-today {
    border-color: #0ea5e9;
    outline: 2px solid rgba(14, 165, 233, 0.55);
    outline-offset: 1px;
    background:
        linear-gradient(180deg, rgba(14, 165, 233, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(14, 165, 233, 0.28),
        0 0 0 3px rgba(186, 230, 253, 0.72);
}

.appointments-week-day.is-today .appointments-week-day-number {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

.appointments-week-day.is-today .appointments-week-day-count {
    border: 1px solid rgba(14, 165, 233, 0.22);
}

.appointments-week-day.is-availability-high {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.32);
    color: #14532d;
}

.appointments-week-day.is-availability-high .appointments-week-day-number {
    background: rgba(34, 197, 94, 0.18);
}

.appointments-week-day.is-availability-high .appointments-week-day-count {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.24);
}

.appointments-week-day.is-availability-medium {
    background: rgba(250, 204, 21, 0.2);
    border-color: rgba(245, 158, 11, 0.34);
    color: #92400e;
}

.appointments-week-day.is-availability-medium .appointments-week-day-number {
    background: rgba(250, 204, 21, 0.3);
}

.appointments-week-day.is-availability-medium .appointments-week-day-count {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.24);
}

.appointments-week-day.is-availability-low {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.24);
    color: #991b1b;
}

.appointments-week-day.is-availability-low .appointments-week-day-number {
    background: rgba(239, 68, 68, 0.18);
}

.appointments-week-day.is-availability-low .appointments-week-day-count {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
}

.appointments-week-picker.is-bungee-mode .appointments-week-day.is-disabled,
.appointments-week-picker.is-bungee-mode .appointments-week-day.is-disabled.is-availability-past,
.appointments-week-picker.is-bungee-mode .appointments-week-day:disabled {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #94a3b8;
    opacity: 0.88;
}

.appointments-week-picker.is-bungee-mode .appointments-week-day.is-disabled .appointments-week-day-number,
.appointments-week-picker.is-bungee-mode .appointments-week-day:disabled .appointments-week-day-number {
    background: #e2e8f0;
    color: #94a3b8;
}

.appointments-week-picker.is-bungee-mode .appointments-week-status-legend {
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
}

.appointments-week-day.is-in-week {
    box-shadow: inset 0 0 0 2px rgba(101, 88, 245, 0.45);
}

.appointments-week-day.is-week-start,
.appointments-week-day.is-week-end {
    box-shadow: inset 0 0 0 2px rgba(101, 88, 245, 0.72);
}

.appointments-week-day.is-week-start .appointments-week-day-number,
.appointments-week-day.is-week-end .appointments-week-day-number {
    background: #6558f5;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.78);
}

.appointments-week-day.is-today.is-week-start .appointments-week-day-number,
.appointments-week-day.is-today.is-week-end .appointments-week-day-number {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

.appointments-week-day[data-availability-summary][data-availability-times]:hover::before,
.appointments-week-day[data-availability-summary][data-availability-times]:focus-visible::before {
    content: attr(data-availability-summary) "\A" attr(data-availability-times);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.7rem);
    z-index: 3;
    width: min(228px, 78vw);
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(31, 41, 55, 0.96);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.24);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    white-space: pre-line;
    transform: translateX(-50%);
    pointer-events: none;
}

.appointments-week-day[data-availability-summary][data-availability-times]:hover::after,
.appointments-week-day[data-availability-summary][data-availability-times]:focus-visible::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.34rem);
    z-index: 2;
    width: 12px;
    height: 12px;
    background: rgba(31, 41, 55, 0.96);
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

@media (max-width: 768px) {
    .appointments-week-popover {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100vw - 2rem));
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        z-index: 9999;
    }
    .admin-account-dropdown {
        position: fixed;
        top: calc(var(--appointments-sticky-top, 68px) + 3rem + 1cm);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        margin-left: -0.3cm;
        width: min(330px, calc(100vw - 1rem));
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        z-index: 9999;
    }
    .admin-notifications-menu[open] .admin-notifications-dropdown {
        position: fixed;
        top: calc(var(--appointments-sticky-top, 68px) + 3rem + 1cm);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        margin-left: -0.3cm;
        width: min(360px, calc(100vw - 1rem));
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        z-index: 9999;
    }
}

@media (max-width: 380px) {
    .appointments-week-popover {
        width: calc(100vw - 1rem);
        padding: 0.6rem;
    }
    .appointments-week-popover-head {
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }
    .appointments-week-status-legend {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
    }
    .appointments-weekdays {
        gap: 0.2rem;
        margin-bottom: 0.4rem;
        font-size: 0.65rem;
    }
    .appointments-week-grid {
        gap: 0.2rem;
    }
    .appointments-week-day {
        height: 36px;
        border-radius: 8px;
        padding: 0.1rem;
    }
    .appointments-week-day-number {
        min-width: 18px;
        min-height: 18px;
        font-size: 0.78rem;
    }
}

.appointments-toolbar-picker {
    position: relative;
    width: 46px;
    padding: 0;
}

.appointments-toolbar-picker.is-disabled {
    opacity: 0.72;
}

.appointments-toolbar-picker .material-symbols-outlined {
    color: #1f2a3b;
}

.appointments-toolbar-picker select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    appearance: none;
    opacity: 0;
    cursor: pointer;
}

.appointments-toolbar-picker select:disabled {
    cursor: default;
}

.appointments-toolbar-icon-muted {
    color: #1f2a3b;
}

.appointments-toolbar-view-select {
    gap: 0.45rem;
    padding-right: 0.85rem;
    cursor: default;
}

.appointments-centers-filter,
.appointments-members-filter {
    position: relative;
}

.appointments-centers-trigger {
    gap: 0.45rem;
    min-width: 118px;
    justify-content: space-between;
    padding-right: 0.85rem;
}

.appointments-centers-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-members-trigger.is-disabled {
    opacity: 0.72;
}

.appointments-toolbar-panel button.appointments-members-trigger.is-active,
.appointments-members-trigger.is-active {
    border-color: #6b5bff;
    background: #6b5bff;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(107, 91, 255, 0.22);
}

.appointments-members-trigger.is-active .material-symbols-outlined {
    color: #ffffff;
}

.appointments-centers-menu,
.appointments-members-menu {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 0;
    z-index: 60;
    width: min(300px, calc(100vw - 2rem));
}

.appointments-centers-menu-inner,
.appointments-members-menu-inner {
    padding: 0.65rem;
    border: 1px solid #dde5ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.16);
    text-align: left;
}

.appointments-centers-section + .appointments-centers-section {
    margin-top: 0.75rem;
}

.appointments-centers-section-title {
    display: block;
    padding: 0 0.2rem 0.55rem;
    color: #526176;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.appointments-centers-list,
.appointments-members-presets,
.appointments-members-list {
    display: grid;
    gap: 0.2rem;
}

.appointments-centers-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #172235;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.appointments-centers-item:hover {
    background: #f7f9fc;
}

.appointments-centers-item.is-active {
    background: #f0efff;
}

.appointments-centers-name {
    flex: 1 1 auto;
    min-width: 0;
}

.appointments-centers-check {
    font-size: 1.1rem;
    line-height: 1;
    color: #172235;
}

.appointments-members-preset,
.appointments-members-current-card,
.appointments-members-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.68rem 0.7rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #172235;
    font-size: 0.94rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.appointments-members-preset:hover,
.appointments-members-current-card:hover,
.appointments-members-item:hover {
    background: #f7f9fc;
}

.appointments-members-preset.is-active,
.appointments-members-current-card,
.appointments-members-item.is-active {
    background: #f0efff;
}

.appointments-members-preset.is-disabled,
.appointments-members-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.appointments-members-preset .material-symbols-outlined,
.appointments-members-resource-icon .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.appointments-members-current {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
}

.appointments-members-section {
    margin-top: 0.55rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e9eef5;
}

.appointments-members-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

.appointments-members-section-head strong {
    color: #161f32;
    font-size: 0.88rem;
}

.appointments-members-clear {
    border: 0;
    background: transparent;
    color: #5e52ff;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.appointments-members-clear.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.appointments-members-check {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #d1dae6;
    border-radius: 6px;
    background: #ffffff;
    flex: 0 0 22px;
}

.appointments-members-item.is-active .appointments-members-check {
    border-color: #6b5bff;
    background: #6b5bff;
    color: #ffffff;
}

.appointments-members-check .material-symbols-outlined {
    font-size: 0.88rem;
    line-height: 1;
}

.appointments-members-avatar,
.appointments-members-resource-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--member-color, #1e6eb3);
    color: #ffffff;
    overflow: hidden;
    flex: 0 0 24px;
    font-size: 0.82rem;
    font-weight: 700;
}

.appointments-members-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appointments-members-resource-icon {
    background: color-mix(in srgb, var(--resource-color, #f3d58c) 22%, #ffffff);
    color: #a47a17;
    border-radius: 8px;
}

.appointments-members-name {
    min-width: 0;
    color: #172235;
    font-size: 0.94rem;
    font-weight: 600;
}

body.has-appointments-filters-drawer {
    overflow: hidden;
}

.appointments-toolbar-filters-trigger {
    position: relative;
}

.appointments-toolbar-filters-trigger.is-active {
    border-color: #5f56ff;
    color: #5f56ff;
}

.appointments-toolbar-filter-count {
    position: absolute;
    top: -0.2rem;
    right: -0.1rem;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #5f56ff;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-filters-drawer[hidden] {
    display: none !important;
}

.appointments-filters-drawer {
    position: fixed;
    inset: 0;
    z-index: 220;
}

.appointments-filters-backdrop {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(9, 14, 24, 0.16);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: none;
    cursor: pointer;
}

.appointments-filters-backdrop:hover,
.appointments-filters-backdrop:focus-visible,
.appointments-filters-backdrop:active {
    background: rgba(9, 14, 24, 0.16);
    border: 0;
    color: transparent;
    box-shadow: none;
    outline: none;
}

.appointments-filters-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw);
    height: 100%;
    background: #ffffff;
    box-shadow: -24px 0 54px rgba(15, 23, 42, 0.12);
}

.appointments-filters-panel-top {
    position: relative;
    padding: 1.15rem 1.15rem 0;
}

.appointments-filters-close {
    position: absolute;
    top: 1.05rem;
    left: 1.05rem;
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d9e1ec;
    border-radius: 999px;
    background: #ffffff;
    color: #172235;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.appointments-filters-close:hover,
.appointments-filters-close:focus-visible {
    background: #f4f7fb;
    border-color: #cfd9e6;
    color: #172235;
}

.appointments-filters-close .material-symbols-outlined {
    font-size: 1.35rem;
}

.appointments-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 4rem;
    padding-right: 0.2rem;
}

.appointments-filters-head h2 {
    margin: 0;
    color: #0d1525;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.appointments-filters-saved {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0 1rem;
    border: 1px solid #d8e0ea;
    border-radius: 999px;
    background: #ffffff;
    color: #111928;
    font-size: 0.96rem;
    font-weight: 700;
}

.appointments-filters-saved {
    display: none !important;
}

.appointments-filters-saved:hover,
.appointments-filters-saved:focus-visible {
    background: #ffffff;
    border-color: #cfd9e6;
    color: #111928;
}

.appointments-filters-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.2rem 1.15rem 1rem;
}

.appointments-filters-section {
    border-bottom: 1px solid #e8edf4;
}

.appointments-filters-section:last-child {
    border-bottom: 0;
}

.appointments-filters-summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 64px;
    padding: 0 1rem;
    list-style: none;
    cursor: pointer;
}

.appointments-filters-summary::-webkit-details-marker {
    display: none;
}

.appointments-filters-summary.is-highlighted {
    border-radius: 12px;
    background: #f4f5f7;
}

.appointments-filters-summary-icon {
    flex: 0 0 auto;
    color: #111928;
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-filters-summary-label {
    flex: 1 1 auto;
    min-width: 0;
    color: #111928;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-filters-summary-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.38rem;
    border-radius: 999px;
    background: #6b5bff;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-filters-summary-count[hidden] {
    display: none !important;
}

.appointments-filters-summary-clear {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111928;
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-filters-summary-clear[hidden] {
    display: none !important;
}

.appointments-filters-summary-clear:hover,
.appointments-filters-summary-clear:focus-visible {
    background: transparent;
    color: #111928;
    text-decoration: underline;
}

.appointments-filters-summary-chevron {
    margin-left: auto;
    color: #111928;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.appointments-filters-section[open] .appointments-filters-summary-chevron {
    transform: rotate(180deg);
}

.appointments-filters-options {
    display: grid;
    gap: 0.65rem;
    padding: 0.35rem 1rem 1.25rem 3.35rem;
}

.appointments-filters-options--scroll {
    max-height: 248px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.appointments-filters-check,
.appointments-filters-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #101828;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}

.appointments-filters-check input,
.appointments-filters-radio input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #5f56ff;
    flex: 0 0 24px;
}

.appointments-filters-check.is-disabled,
.appointments-filters-radio.is-disabled {
    color: #9aa6b6;
}

.appointments-filters-check.is-disabled input,
.appointments-filters-radio.is-disabled input {
    opacity: 0.55;
    cursor: not-allowed;
}

.appointments-filters-help {
    margin: 0.15rem 0 0;
    color: #8b98aa;
    font-size: 0.84rem;
    font-weight: 600;
}

.appointments-filters-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1rem 1.15rem 1.25rem;
    border-top: 1px solid #e8edf4;
    background: #ffffff;
}

.appointments-filters-reset,
.appointments-filters-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 54px;
    padding: 0 1.3rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.appointments-filters-reset {
    border: 1px solid #d8e0ea;
    background: #ffffff;
    color: #121a29;
}

.appointments-filters-reset:hover,
.appointments-filters-reset:focus-visible {
    background: #f6f8fb;
    border-color: #cfd9e6;
    color: #121a29;
}

.appointments-filters-apply {
    border: 1px solid #0b0b10;
    background: #0b0b10;
    color: #ffffff;
}

.appointments-filters-apply:hover,
.appointments-filters-apply:focus-visible {
    background: #1b1d24;
    border-color: #1b1d24;
}

@media (max-width: 900px) {
    .appointments-filters-panel {
        width: 100vw;
    }

    .appointments-filters-panel-top {
        padding: 1rem 0.85rem 0;
    }

    .appointments-filters-close {
        top: 0.9rem;
        left: 0.85rem;
        width: 46px;
        height: 46px;
    }

    .appointments-filters-head {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-top: 4rem;
    }

    .appointments-filters-head h2 {
        font-size: 1.55rem;
    }

    .appointments-filters-body {
        padding: 1rem 0.85rem;
    }

    .appointments-filters-summary {
        min-height: 60px;
        padding-inline: 0.8rem;
    }

    .appointments-filters-options {
        padding: 0.2rem 0.8rem 1rem 2.85rem;
    }

    .appointments-filters-footer {
        padding: 0.85rem;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .appointments-filters-reset,
    .appointments-filters-apply {
        width: 100%;
        min-width: 0;
    }

    /* Toolbar responsive */
    .appointments-toolbar-panel {
        border-radius: 0;
        box-shadow: 0 2px 12px rgba(22, 33, 48, 0.06);
    }
    .appointments-toolbar-chip,
    .appointments-toolbar-icon,
    .appointments-toolbar-range,
    .appointments-toolbar-view,
    .appointments-toolbar-picker,
    .appointments-toolbar-view-select {
        min-height: 40px;
        font-size: 0.85rem;
    }
    .appointments-toolbar-add-trigger {
        min-height: 40px;
        padding: 0 0.6rem;
    }
    .appointments-toolbar-add-trigger::before {
        font-size: 0.85rem;
    }
}

@media (max-width: 640px) {
    /* Small mobile toolbar */
    .appointments-toolbar-chip,
    .appointments-toolbar-icon,
    .appointments-toolbar-range,
    .appointments-toolbar-view,
    .appointments-toolbar-picker,
    .appointments-toolbar-view-select {
        min-height: 36px;
        font-size: 0.78rem;
        padding: 0 0.5rem;
    }
    .appointments-toolbar-add-trigger {
        min-height: 36px;
        padding: 0 0.5rem;
    }
    .appointments-toolbar-add-trigger::before {
        font-size: 0.78rem;
    }
}

.appointments-toolbar-add-trigger {
    position: relative;
    gap: 0.45rem;
    padding: 0 0.8rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
    color: transparent;
    font-size: 0;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 1px 2px rgba(124, 58, 237, 0.2);
    transition: all 0.2s ease;
}

.appointments-toolbar-add-trigger::before {
    content: 'Reservar clase';
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.appointments-toolbar-add-trigger::after {
    content: none;
}

.appointments-toolbar-add-trigger:hover,
.appointments-toolbar-add-trigger:focus-visible {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
    color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4), 0 2px 8px rgba(124, 58, 237, 0.3);
}

.appointments-toolbar-chip:hover,
.appointments-toolbar-icon:hover,
.appointments-toolbar-icon:focus-visible,
.appointments-toolbar-view-select:focus-visible {
    border-color: #b7c4d6;
    background: #f0f4ff;
    color: #111927;
    box-shadow: 0 2px 8px rgba(22, 33, 48, 0.06);
    transform: translateY(-1px);
}

.appointments-toolbar-panel button.appointments-toolbar-chip:hover,
.appointments-toolbar-panel button.appointments-toolbar-chip:focus-visible,
.appointments-toolbar-panel button.appointments-toolbar-icon:hover,
.appointments-toolbar-panel button.appointments-toolbar-icon:focus-visible,
.appointments-toolbar-panel button.appointments-toolbar-view-select:hover,
.appointments-toolbar-panel button.appointments-toolbar-view-select:focus-visible,
.appointments-toolbar-panel button.appointments-centers-trigger:hover,
.appointments-toolbar-panel button.appointments-centers-trigger:focus-visible,
.appointments-toolbar-panel button.appointments-members-trigger:hover,
.appointments-toolbar-panel button.appointments-members-trigger:focus-visible,
.appointments-toolbar-panel button.appointments-toolbar-chip:active,
.appointments-toolbar-panel button.appointments-toolbar-icon:active,
.appointments-toolbar-panel button.appointments-toolbar-view-select:active,
.appointments-toolbar-panel button.appointments-centers-trigger:active,
.appointments-toolbar-panel button.appointments-members-trigger:active {
    background: #ffffff;
    color: #111927;
    border-color: #b7c4d6;
}

.appointments-toolbar-panel button.appointments-members-trigger.is-active,
.appointments-toolbar-panel button.appointments-members-trigger.is-active:hover,
.appointments-toolbar-panel button.appointments-members-trigger.is-active:focus-visible,
.appointments-toolbar-panel button.appointments-members-trigger.is-active:active {
    border-color: #6b5bff !important;
    background: #6b5bff !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(107, 91, 255, 0.22);
}

.appointments-toolbar-panel button.appointments-members-trigger.is-active .material-symbols-outlined {
    color: #ffffff !important;
}

.appointments-calendar-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 1.2rem 0.5rem;
    border-bottom: 1px solid rgba(147, 197, 253, 0.12);
    flex: 0 0 auto;
}

.appointments-calendar-panel > .appointments-calendar-topp {
    margin-top: 0;
}

.appointments-calendar-panel > .appointments-calendar-head {
    margin-top: 0;
}

.appointments-calendar-summary-staff {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.appointments-calendar-summary-avatar {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--member-color, #6b5bff);
    color: #ffffff;
    overflow: hidden;
    flex: 0 0 48px;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.appointments-calendar-summary-avatar.is-photo {
    background: #eef2ff;
    border-radius: 14px;
}

.appointments-calendar-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appointments-calendar-summary-copy {
    min-width: 0;
}

.appointments-calendar-summary h2,
.appointments-panel-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
}

.appointments-calendar-summary p,
.appointments-panel-head p {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

.appointments-calendar-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2rem;
    flex-wrap: wrap;
    color: #617188;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.appointments-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Responsive legend */
@media (max-width: 768px) {
    .appointments-calendar-legend {
        gap: 0.8rem;
        font-size: 0.78rem;
    }
    .appointments-calendar-summary {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0 1rem 0.75rem;
    }
    .appointments-calendar-summary-staff {
        gap: 0.7rem;
    }
    .appointments-calendar-summary-avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
    }
    .appointments-calendar-summary h2 {
        font-size: 0.9rem;
    }
    .appointments-calendar-summary p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .appointments-calendar-legend {
        justify-content: flex-start;
        gap: 0.6rem;
        font-size: 0.72rem;
    }
    .appointments-calendar-summary {
        padding: 0 0.75rem 0.6rem;
    }
}

.appointments-calendar-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 0;
    flex: 1 1 auto;
    min-height: 200px;
    padding: 2rem 2rem;
    border: 1px solid rgba(124, 92, 255, 0.15);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(124, 92, 255, 0.09), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.06), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.03), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    color: #526176;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 16px rgba(124, 92, 255, 0.08);
}

.appointments-calendar-empty-hero {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(123, 92, 255, 0.25) 0%, rgba(99, 102, 241, 0.12) 100%);
    color: #6d5cff;
    box-shadow:
        0 6px 24px rgba(124, 92, 255, 0.18),
        0 2px 6px rgba(124, 92, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.appointments-calendar-empty-hero::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 30px;
    background: linear-gradient(160deg, rgba(124, 92, 255, 0.12), rgba(99, 102, 241, 0.08));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.appointments-calendar-empty-hero:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 32px rgba(124, 92, 255, 0.22);
}

.appointments-calendar-empty-hero:hover::after {
    opacity: 1;
}

.appointments-calendar-empty-hero .material-symbols-outlined {
    font-size: 2.4rem;
    line-height: 1;
}

.appointments-calendar-empty-copy {
    display: grid;
    gap: 0.65rem;
    max-width: 420px;
    text-align: center;
}

.appointments-calendar-empty-state strong {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, #3b2db8 0%, #6d5cff 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.25;
}

.appointments-calendar-empty-state p {
    margin: 0 auto;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 380px;
    text-align: center;
}

/* Responsive empty state */
@media (max-width: 768px) {
    .appointments-calendar-empty-state {
        min-height: 180px;
        padding: 1.5rem 1.25rem;
        margin: 0 0.5rem;
        border-radius: 16px;
    }
    .appointments-calendar-empty-hero {
        width: 76px;
        height: 76px;
        border-radius: 22px;
    }
    .appointments-calendar-empty-hero .material-symbols-outlined {
        font-size: 1.8rem;
    }
    .appointments-calendar-empty-state strong {
        font-size: 1.5rem;
    }
    .appointments-calendar-empty-state p {
        font-size: 0.95rem;
    }
    .appointments-calendar-empty-copy {
        max-width: 320px;
    }
    .appointments-calendar-legend {
        justify-content: center;
        gap: 0.8rem;
        font-size: 0.78rem;
        padding: 0 0.5rem;
    }
    .appointments-calendar-summary {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0 1rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .appointments-calendar-empty-state {
        min-height: 150px;
        padding: 1.25rem 0.75rem;
        margin: 0 0.25rem;
        border-radius: 12px;
        gap: 0.75rem;
    }
    .appointments-calendar-empty-hero {
        width: 60px;
        height: 60px;
        border-radius: 18px;
    }
    .appointments-calendar-empty-hero .material-symbols-outlined {
        font-size: 1.4rem;
    }
    .appointments-calendar-empty-state strong {
        font-size: 1.2rem;
    }
    .appointments-calendar-empty-state p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    .appointments-calendar-empty-copy {
        max-width: 260px;
    }
    .appointments-calendar-legend {
        justify-content: center;
        gap: 0.5rem;
        font-size: 0.7rem;
        padding: 0 0.25rem;
    }
    .appointments-calendar-summary {
        padding: 0 0.75rem 0.6rem;
    }
}

.appointments-calendar-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #9ad9f5 0%, #6bc5e8 100%);
    box-shadow: 0 1px 4px rgba(154, 217, 245, 0.4);
}

.appointments-calendar-dot.is-blocked {
    background: repeating-linear-gradient(135deg, #d7deea 0, #d7deea 4px, #f1f4f9 4px, #f1f4f9 8px);
}

.appointments-calendar-dot.is-timeoff {
    background: linear-gradient(135deg, #f5f6fb 0%, #dfe4f1 100%);
    border: 1px solid rgba(102, 117, 143, 0.28);
}

.appointments-calendar-dot.is-buffer {
    background: #c8b6ff;
}

.appointments-calendar-board {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.appointments-calendar-topp {
    position: relative;
    z-index: 10;
    background: #ffffff;
    width: 100%;
}

.appointments-calendar-head {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.appointments-calendar-head-spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    position: sticky;
    left: 0;
    border-right: 1px solid #e4eaf2;
    border-bottom: 1px solid #e4eaf2;
    background: #ffffff;
    color: #68788f;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 3;
}

.appointments-calendar-head-days,
.appointments-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.appointments-calendar-day-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 66px;
    padding: 0 1rem;
    border-right: 1px solid rgba(147, 197, 253, 0.18);
    border-bottom: 1px solid rgba(147, 197, 253, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    transition: background 0.2s ease;
}

.appointments-calendar-day-title:hover {
    background: linear-gradient(180deg, #f8faff 0%, #f0f4ff 100%);
}

.appointments-calendar-day-title small {
    display: block;
    color: #94a0b3;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.appointments-calendar-day-title strong {
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 700;
}

.appointments-calendar-day-chip {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #1e293b;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.appointments-calendar-day-title.is-today .appointments-calendar-day-chip {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.appointments-calendar-day-title.is-today small,
.appointments-calendar-day-title.is-today strong {
    color: #6d28d9;
}

.appointments-calendar-grid-wrap {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: start;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    width: 100%;
}

.appointments-calendar-time-rail {
    position: sticky;
    left: 0;
    border-right: 1px solid rgba(147, 197, 253, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    z-index: 2;
}

.appointments-calendar-time-cell {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-end;
    height: calc(var(--appointments-hour-height) / 4);
    padding: 0 0.45rem 0 0;
    border-bottom: 1px solid rgba(147, 197, 253, 0.12);
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    transition: color 0.2s ease, background 0.2s ease;
}

.appointments-calendar-time-cell:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.03);
}

/* Responsive calendar grid */
@media (max-width: 768px) {
    .appointments-calendar-grid-wrap {
        grid-template-columns: 52px minmax(0, 1fr);
        overflow-x: visible;
    }
    .appointments-calendar-time-rail {
        border-right: 1px solid rgba(147, 197, 253, 0.12);
    }
    .appointments-calendar-time-cell {
        font-size: 0.65rem;
        padding: 0 0.3rem 0 0;
    }
}

@media (max-width: 480px) {
    .appointments-calendar-grid-wrap {
        grid-template-columns: 44px minmax(0, 1fr);
        overflow-x: visible;
    }
    .appointments-calendar-time-cell {
        font-size: 0.6rem;
        padding: 0 0.2rem 0 0;
    }
}

.appointments-calendar-time-cell.is-hour {
    color: #172235;
    font-weight: 800;
}

.appointments-calendar-time-cell.is-selected,
.appointments-calendar-time-cell.is-hover {
    position: relative;
    z-index: 3;
    color: #5f4fff;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 0 0 2px #6a59ff;
}

.appointments-calendar-time-cell.is-hover {
    color: rgba(95, 79, 255, 0.9);
    box-shadow: inset 0 0 0 2px rgba(106, 89, 255, 0.72);
    background: rgba(255, 255, 255, 0.84);
}

.appointments-calendar-time-selection {
    position: absolute;
    inset-inline: 0.1rem 0.18rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.42rem 0 0.28rem;
    border: 2px solid #6a59ff;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.98);
    color: #5f4fff;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.appointments-calendar-time-selection.is-hover {
    border-color: rgba(106, 89, 255, 0.72);
    background: rgba(255, 255, 255, 0.84);
    color: rgba(95, 79, 255, 0.9);
}

.appointments-calendar-day {
    position: relative;
    height: calc(var(--appointments-hour-height) * var(--appointments-visible-minutes, 1440) / 60);
    border-right: 1px solid rgba(147, 197, 253, 0.18);
    border-bottom: 1px solid rgba(147, 197, 253, 0.12);
    background-color: #ffffff;
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(117, 131, 151, 0.08) 0,
            rgba(117, 131, 151, 0.08) 1px,
            transparent 1px,
            transparent calc(var(--appointments-hour-height) / 4)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--appointments-hour-height) - 1px),
            rgba(117, 131, 151, 0.12) calc(var(--appointments-hour-height) - 1px),
            rgba(117, 131, 151, 0.12) var(--appointments-hour-height)
        );
}

.appointments-calendar-day.is-clickable {
    cursor: default;
}

.appointments-calendar-day.is-resource-only {
    cursor: default;
}

.appointments-calendar-day.is-resource-only .appointments-calendar-event {
    cursor: pointer;
}

.appointments-calendar-day.is-past {
    background-color: #f8fafc;
}

.appointments-calendar-day.is-past.is-clickable,
.appointments-calendar-day.is-past-hover-blocked.is-clickable {
    cursor: not-allowed;
}

.appointments-calendar-day-title.is-past {
    opacity: 0.72;
}

.appointments-calendar-day-title.is-past .appointments-calendar-day-chip {
    background: #e2e8f0;
    color: #64748b;
    border-color: #cbd5e1;
}

.appointments-calendar-past {
    position: absolute;
    inset-inline: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(226, 232, 240, 0.55) 0,
        rgba(226, 232, 240, 0.55) 4px,
        rgba(248, 250, 252, 0.72) 4px,
        rgba(248, 250, 252, 0.72) 8px
    );
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
    border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
    z-index: 2;
    pointer-events: auto;
    cursor: not-allowed;
}

.appointments-calendar-event.is-past-slot {
    z-index: 5;
    cursor: not-allowed !important;
    filter: saturate(0.62);
    opacity: 0.88;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28);
}

.appointments-calendar-event.is-past-slot:hover,
.appointments-calendar-event.is-past-slot:focus,
.appointments-calendar-event.is-past-slot:active {
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.34);
    transform: none;
}

.appointments-calendar-day.is-today {
    background-color: #fcfdff;
}

.appointments-calendar-blocked {
    position: absolute;
    inset-inline: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(220, 227, 237, 0.85) 0,
        rgba(220, 227, 237, 0.85) 4px,
        rgba(248, 250, 252, 0.96) 4px,
        rgba(248, 250, 252, 0.96) 8px
    );
    border-top: 1px solid rgba(163, 174, 189, 0.16);
    border-bottom: 1px solid rgba(163, 174, 189, 0.16);
    z-index: 1;
    pointer-events: none;
}

.appointments-calendar-timeoff {
    position: absolute;
    inset-inline: 0.24rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.34rem 0.38rem;
    border: 1px solid rgba(124, 137, 163, 0.34);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(248, 249, 253, 0.97) 0%, rgba(233, 237, 246, 0.95) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    color: #314055;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.appointments-calendar-timeoff::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(173, 181, 198, 0.12) 0,
        rgba(173, 181, 198, 0.12) 6px,
        rgba(255, 255, 255, 0) 6px,
        rgba(255, 255, 255, 0) 12px
    );
    pointer-events: none;
}

.appointments-calendar-timeoff strong,
.appointments-calendar-timeoff small {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-timeoff strong {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15;
}

.appointments-calendar-timeoff small {
    font-size: 0.69rem;
    font-weight: 700;
    color: #526179;
    line-height: 1.1;
}

.appointments-calendar-now-line {
    position: absolute;
    inset-inline: 0;
    height: 2px;
    background: #ef4444;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
    z-index: 5;
    pointer-events: none;
}

.appointments-calendar-selection {
    position: absolute;
    inset-inline: 0.04rem;
    display: flex;
    align-items: center;
    min-height: calc(var(--appointments-hour-height) / 4);
    height: calc(var(--appointments-hour-height) / 4);
    padding: 0 0.55rem;
    border: 2px solid #6a59ff;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.96);
    color: #5f4fff;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.appointments-calendar-selection.is-hover {
    border-color: rgba(106, 89, 255, 0.72);
    background: rgba(255, 255, 255, 0.82);
    color: rgba(95, 79, 255, 0.9);
}

.appointments-calendar-event {
    position: absolute;
    inset-inline: 0.04rem;
    display: block;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--appointment-accent, #6b5bff) 34%, #d8e6f5);
    border-radius: 10px;
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 26%, #ffffff);
    box-shadow: 0 2px 8px rgba(22, 33, 48, 0.06);
    text-decoration: none;
    z-index: 4;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.appointments-calendar-day.is-past-hover-blocked {
    cursor: not-allowed;
}

.appointments-calendar-event:hover {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12), 0 1px 4px rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}

.appointments-calendar-event[data-appointment-type="group"] {
    border-left-width: 3px;
    border-left-color: color-mix(in srgb, var(--appointment-accent, #6b5bff) 72%, #0f172a);
}

.appointments-calendar-event.is-bungee-class,
.appointments-calendar-event[data-appointment-type="bungee"] {
    --bungee-class-accent: var(--appointment-accent, #14b8a6);
    --bungee-class-border: rgba(20, 184, 166, 0.28);
    --bungee-class-bg-start: #e8f8f4;
    --bungee-class-bg-end: #ffffff;
    --appointment-status-color: var(--bungee-class-accent);
    overflow: hidden;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--bungee-class-border) !important;
    border-left-width: 4px !important;
    border-left-color: var(--bungee-class-accent) !important;
    background: linear-gradient(
        165deg,
        var(--bungee-class-bg-start) 0%,
        var(--bungee-class-bg-end) 58%,
        #ffffff 100%
    ) !important;
    box-shadow: 0 4px 14px rgba(15, 35, 68, 0.06);
}

.appointments-calendar-event.is-bungee-class.is-full,
.appointments-calendar-event[data-appointment-type="bungee"].is-full {
    border-color: color-mix(in srgb, var(--bungee-class-accent) 28%, #dc2626 72%) !important;
    border-left-color: #dc2626 !important;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--bungee-class-bg-start) 45%, #fee2e2) 0%,
        #fff5f5 58%,
        #ffffff 100%
    ) !important;
}

.appointments-calendar-event.is-bungee-class.is-half-full,
.appointments-calendar-event[data-appointment-type="bungee"].is-half-full {
    border-color: color-mix(in srgb, var(--bungee-class-accent) 28%, #ca8a04 72%) !important;
    border-left-color: #ca8a04 !important;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--bungee-class-bg-start) 45%, #fef9c3) 0%,
        #fffbeb 58%,
        #ffffff 100%
    ) !important;
}

.appointments-calendar-event.is-bungee-class.is-past-slot,
.appointments-calendar-event[data-appointment-type="bungee"].is-past-slot {
    border-color: rgba(148, 163, 184, 0.42) !important;
    background: linear-gradient(165deg, #f1f5f9 0%, #f8fafc 55%, #fff 100%) !important;
    filter: saturate(0.45);
    opacity: 0.82;
    cursor: not-allowed !important;
}

.appointments-calendar-event.is-bungee-class.is-selected,
.appointments-calendar-event[data-appointment-type="bungee"].is-selected {
    z-index: 6;
    border-color: var(--bungee-class-accent) !important;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--bungee-class-bg-start) 70%, var(--bungee-class-accent)) 0%,
        var(--bungee-class-bg-end) 55%,
        #ffffff 100%
    ) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bungee-class-accent) 55%, transparent),
        0 8px 20px color-mix(in srgb, var(--bungee-class-accent) 28%, transparent) !important;
}

.appointments-calendar-event.is-bungee-class.is-full.is-selected,
.appointments-calendar-event[data-appointment-type="bungee"].is-full.is-selected {
    border-color: #dc2626 !important;
    background: linear-gradient(165deg, rgba(220, 38, 38, 0.24) 0%, rgba(248, 113, 113, 0.12) 45%, #fee2e2 100%) !important;
    box-shadow:
        0 0 0 2px rgba(220, 38, 38, 0.42),
        0 8px 20px rgba(220, 38, 38, 0.16) !important;
}

.appointments-calendar-event.is-bungee-class.is-half-full.is-selected,
.appointments-calendar-event[data-appointment-type="bungee"].is-half-full.is-selected {
    border-color: #ca8a04 !important;
    background: linear-gradient(165deg, rgba(202, 138, 4, 0.22) 0%, rgba(250, 204, 21, 0.12) 45%, #fef9c3 100%) !important;
    box-shadow:
        0 0 0 2px rgba(202, 138, 4, 0.38),
        0 8px 20px rgba(202, 138, 4, 0.14) !important;
}

.appointments-calendar-event.is-bungee-class.is-past-slot.is-selected,
.appointments-calendar-event[data-appointment-type="bungee"].is-past-slot.is-selected {
    border-color: #94a3b8 !important;
    background: linear-gradient(165deg, rgba(148, 163, 184, 0.18) 0%, #f1f5f9 100%) !important;
    box-shadow:
        0 0 0 2px rgba(148, 163, 184, 0.35),
        0 8px 20px rgba(148, 163, 184, 0.12) !important;
}

.appointments-calendar-event.is-bungee-class > .appointments-calendar-event-status-icon,
.appointments-calendar-event[data-appointment-type="bungee"] > .appointments-calendar-event-status-icon,
.appointments-calendar-event.is-bungee-class > .appointments-calendar-event-meta,
.appointments-calendar-event[data-appointment-type="bungee"] > .appointments-calendar-event-meta {
    display: none;
}

.appointments-calendar-event.is-bungee-class .appointments-calendar-event-plain.is-bungee-card-shell,
.appointments-calendar-event.is-bungee-class .appointments-calendar-event-core.is-bungee-card-shell,
.appointments-calendar-event[data-appointment-type="bungee"] .appointments-calendar-event-plain.is-bungee-card-shell,
.appointments-calendar-event[data-appointment-type="bungee"] .appointments-calendar-event-core.is-bungee-card-shell {
    display: block;
    padding: 0;
    margin: 0;
    min-width: 0;
    min-height: 0;
    height: 100% !important;
    top: 0 !important;
    overflow: hidden;
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card {
    height: 100%;
    min-height: 0;
    padding: 0.56rem 0.52rem 0.42rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
    position: relative;
    overflow: hidden;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-foot,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-foot {
    margin-top: auto;
    flex-shrink: 0;
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card.is-full,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card.is-full {
    background: transparent;
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card .bungee-week-calendar-card-status,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card .bungee-week-calendar-card-status {
    position: absolute;
    top: 0.42rem;
    right: 0.42rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card.is-half-full .bungee-week-calendar-card-status,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card.is-half-full .bungee-week-calendar-card-status {
    background: #eab308;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.24);
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card.is-full .bungee-week-calendar-card-status,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card.is-full .bungee-week-calendar-card-status {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.24);
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card.is-past .bungee-week-calendar-card-status,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card.is-past .bungee-week-calendar-card-status,
.appointments-calendar-event.is-bungee-class.is-past-slot .bungee-week-calendar-card-status,
.appointments-calendar-event[data-appointment-type="bungee"].is-past-slot .bungee-week-calendar-card-status {
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.24);
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card.is-half-full,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card.is-half-full {
    background: transparent;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-time,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-time {
    margin: 0;
    padding-right: 0.65rem;
    font-size: 0.78rem;
    color: #0f2344;
    line-height: 1.25;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-time strong,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-time strong {
    font-weight: 800;
    letter-spacing: 0.01em;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-title,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-title {
    margin: 0.12rem 0 0;
    padding-right: 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f2344;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.06rem;
    overflow: visible;
    flex: 0 1 auto;
    min-width: 0;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-title-main,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-title-main {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-title-meta,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-title-meta {
    display: block;
    width: 100%;
    font-size: 0.74rem;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-meta,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-meta {
    margin: 0;
    font-size: 0.72rem;
    color: #6b7c93;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-pattern,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-pattern,
.bungee-week-calendar-card-pattern {
    margin: 0.12rem 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5f6b7a;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card .bungee-week-calendar-card-pattern,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card .bungee-week-calendar-card-pattern {
    margin-top: auto;
    padding-top: 0.08rem;
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-meta .material-symbols-outlined,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-meta .material-symbols-outlined {
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.bungee-capacity-inline {
    margin-top: auto;
    padding-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
}

.bungee-capacity-inline-main {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    flex: 0 0 auto;
}

.bungee-capacity-inline-icon {
    font-size: 1.05rem !important;
    width: 1.05rem;
    height: 1.05rem;
    color: #334155;
    line-height: 1;
}

.bungee-capacity-inline-total {
    font-size: 0.84rem;
    font-weight: 800;
    color: #0f2344;
    letter-spacing: -0.02em;
    line-height: 1;
}

.bungee-capacity-inline-bands {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.38rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.bungee-capacity-inline-band {
    display: inline !important;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.bungee-capacity-inline-band.tier-40 {
    color: #0f766e;
}

.bungee-capacity-inline-band.tier-60 {
    color: #b45309;
}

.bungee-capacity-inline-band.tier-100 {
    color: #1d4ed8;
}

.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card .bungee-week-calendar-card-meta,
.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card .bungee-week-calendar-card-pattern,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card .bungee-week-calendar-card-meta,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card .bungee-week-calendar-card-pattern {
    display: none !important;
}

.appointments-calendar-event.is-bungee-class .bungee-capacity-inline,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-capacity-inline {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 0.22rem;
    padding-top: 0;
    overflow: visible;
}

/* Capacity badge � always visible on calendar cards */
.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-foot,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-foot {
    position: absolute !important;
    bottom: 2px !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
    padding: 0 0.35rem 0.1rem !important;
    background: inherit;
}

.appointments-calendar-event.is-bungee-class .bungee-capacity-inline-main,
.appointments-calendar-event.is-bungee-class .bungee-capacity-inline-bands,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-capacity-inline-main,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-capacity-inline-bands {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: visible;
    white-space: nowrap;
}

.appointments-calendar-event.is-bungee-class .bungee-capacity-inline-band,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-capacity-inline-band {
    display: inline !important;
    overflow: visible;
}

.appointments-calendar-event.is-compact.is-bungee-class .appointments-calendar-event-plain.is-bungee-card-shell,
.appointments-calendar-event.is-compact.is-bungee-class .appointments-calendar-event-core.is-bungee-card-shell,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .appointments-calendar-event-plain.is-bungee-card-shell,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .appointments-calendar-event-core.is-bungee-card-shell {
    display: block !important;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-appointments-class-card,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-appointments-class-card {
    padding: 0.28rem 0.36rem 0.24rem;
    gap: 0.08rem;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-week-calendar-card-time,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-week-calendar-card-time {
    font-size: 0.68rem;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-week-calendar-card-time strong,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-week-calendar-card-time strong {
    font-weight: 800;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-week-calendar-card-title,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-week-calendar-card-title {
    font-size: 0.72rem;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-week-calendar-card-meta,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-week-calendar-card-meta {
    display: none;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-week-calendar-card-pattern,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-week-calendar-card-pattern {
    margin-top: auto;
    font-size: 0.66rem;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-capacity-inline,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-capacity-inline {
    padding-top: 0.1rem;
    gap: 0.28rem;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-capacity-inline-total,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-capacity-inline-total {
    font-size: 0.72rem;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-capacity-inline-band,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-capacity-inline-band {
    font-size: 0.68rem;
}

.appointments-calendar-event.is-compact.is-bungee-class .bungee-week-calendar-card-status,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-week-calendar-card-status {
    top: 0.28rem;
    right: 0.28rem;
    width: 0.42rem;
    height: 0.42rem;
}

.appointments-calendar-hover-price.is-bungee-capacity-hover {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.appointments-calendar-hover-price.is-bungee-capacity-hover .bungee-capacity-inline {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 0;
    padding-top: 0;
    width: auto;
    min-width: 9.5rem;
    overflow: visible;
}

.appointments-calendar-hover-price.is-bungee-capacity-hover .bungee-capacity-inline-bands {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
}

.appointments-calendar-hover-price.is-bungee-capacity-hover .bungee-capacity-inline-band {
    display: inline !important;
}

.appointments-calendar-hover-card.is-bungee-hover {
    --appointment-hover-color: #14b8a6;
    width: min(390px, calc(100vw - 2rem));
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(15, 35, 68, 0.22);
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-head {
    padding: 0.85rem 1rem 0.75rem;
    background: #14b8a6;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-head strong {
    font-size: 0.92rem;
    font-weight: 800;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-status {
    font-size: 0.88rem;
    font-weight: 700;
    opacity: 0.98;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-body {
    gap: 1.1rem;
    padding: 1rem 1.05rem 1.05rem;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-avatar {
    width: 52px;
    height: 52px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 1.2rem;
    font-weight: 800;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-copy strong {
    font-size: 1rem;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-copy span {
    font-size: 0.9rem;
    color: #64748b;
    white-space: normal;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-service-row {
    align-items: flex-start;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-service-copy {
    flex: 1;
    min-width: 0;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-service-copy strong {
    font-size: 0.96rem;
    font-weight: 800;
    white-space: normal;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-service-copy span {
    font-size: 0.9rem;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-bungee-capacity {
    margin-top: 0.55rem;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-bungee-capacity .bungee-capacity-inline {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-bungee-capacity .bungee-capacity-inline-main,
.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-bungee-capacity .bungee-capacity-inline-bands {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.appointments-calendar-hover-card.is-bungee-hover .appointments-calendar-hover-channel {
    display: none;
}

.appointments-calendar-event[data-appointment-type="group"]::before {
    content: attr(data-appointment-group-size);
    position: absolute;
    top: 0.14rem;
    left: 0.16rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.34);
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
}

.appointments-calendar-event[data-appointment-status="no_show"] {
    border-color: #f29ab0;
    background: #ffe3ea;
    cursor: default;
}

.appointments-calendar-event[data-appointment-status="no_show"]:hover {
    box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.12);
}

.appointments-calendar-event[data-appointment-status="no_show"].is-slot-exposing {
    transform: translateX(-18px);
}

.appointments-calendar-event.is-compact .appointments-calendar-event-core,
.appointments-calendar-event.is-compact .appointments-calendar-event-plain {
    justify-content: center;
    gap: 0;
    padding-top: 0.18rem;
    padding-right: 1.35rem;
    padding-bottom: 0.18rem;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-buffer {
    display: none !important;
}

.appointments-calendar-event.is-compact.has-processing-time .appointments-calendar-event-core {
    justify-content: flex-start;
    padding-top: 0.18rem;
    padding-bottom: 0.08rem;
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 32%, #ffffff);
    box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.16);
    z-index: 2;
}

.appointments-calendar-event.is-compact.has-processing-time {
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 22%, #ffffff);
}

.appointments-calendar-event.is-compact.has-processing-time::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(100% - var(--appointment-after-visible-percent, 0%));
    border-top: 1px dashed rgba(99, 102, 241, 0.36);
    z-index: 1;
    pointer-events: none;
}

.appointments-calendar-event.is-compact.has-processing-time .appointments-calendar-event-buffer.is-after {
    display: flex !important;
    align-items: flex-start;
    inset-inline: 0;
    padding: 0.06rem 0.34rem 0 0.34rem;
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 18%, #ffffff);
    border-top: 1px dashed rgba(99, 102, 241, 0.36);
    z-index: 1;
}

.appointments-calendar-event.is-compact.has-processing-time .appointments-calendar-event-buffer.is-after span {
    display: block !important;
    font-size: 0.64rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5f4fff;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-service,
.appointments-calendar-event.is-compact .appointments-calendar-event-services,
.appointments-calendar-event.is-compact .appointments-calendar-event-price,
.appointments-calendar-event.is-compact small,
.appointments-calendar-event.is-compact .appointments-calendar-event-meta {
    display: none !important;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-client {
    display: block !important;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.05;
    color: #17253d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-calendar-event.is-compact strong {
    font-size: 0.78rem;
    line-height: 1.08;
}

.appointments-calendar-event.is-drag-origin {
    opacity: 0.2;
    cursor: grabbing;
}

.appointments-calendar-event.is-preview-hidden {
    opacity: 0;
    pointer-events: none;
}

.appointments-calendar-event.appointments-calendar-event-preview {
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.08);
}

.appointments-calendar-event.appointments-calendar-event-preview .appointments-calendar-event-status-icon {
    opacity: 0.95;
}

.appointments-calendar-drag-preview {
    z-index: 9;
    pointer-events: none;
    opacity: 0.94;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
    cursor: grabbing;
    overflow: hidden;
}

.appointments-calendar-drag-preview .appointments-calendar-event-buffer.is-after,
.appointments-calendar-drag-preview .appointments-calendar-event-buffer.is-before {
    display: flex !important;
}

.appointments-calendar-drag-preview.is-compact .appointments-calendar-event-buffer.is-after {
    align-items: flex-start;
    inset-inline: 0;
    padding: 0.06rem 0.34rem 0 0.34rem;
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 18%, #ffffff);
    border-top: 1px dashed rgba(99, 102, 241, 0.36);
}

body.appointments-calendar-dragging,
body.appointments-calendar-dragging * {
    cursor: grabbing !important;
}

.appointments-calendar-event-core,
.appointments-calendar-event-plain {
    position: absolute;
    inset-inline: 0.12rem 0.16rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.18rem;
    padding: 0.28rem 0.7rem 0.28rem 0.32rem;
}

.appointments-calendar-event[data-appointment-type="group"] .appointments-calendar-event-core,
.appointments-calendar-event[data-appointment-type="group"] .appointments-calendar-event-plain {
    padding-left: 1.72rem;
}

.appointments-calendar-event-plain {
    inset: 0.12rem 0.14rem;
    border-radius: 0;
    background: transparent;
    color: #17253d;
    box-sizing: border-box;
    overflow: hidden;
}

.appointments-calendar-event-core {
    padding-bottom: 0.36rem;
}

.appointments-calendar-event.has-processing-time {
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 20%, #ffffff);
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-core {
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 32%, #ffffff);
    box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.16);
    gap: 0.08rem;
    padding: 0.16rem 1.3rem 0.04rem 0.34rem;
}

.appointments-calendar-event[data-appointment-type="group"].has-processing-time .appointments-calendar-event-core {
    padding-left: 1.62rem;
}

.appointments-calendar-event.has-processing-time strong {
    font-size: 0.78rem;
    line-height: 1.04;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-client {
    font-size: 0.73rem;
    line-height: 1.02;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-service {
    font-size: 0.72rem;
    line-height: 1.02;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-services {
    gap: 0.02rem;
}

.appointments-calendar-event-buffer {
    position: absolute;
    inset-inline: 0.12rem 0.16rem;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    padding: 0 0.42rem;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
}

.appointments-calendar-event-buffer.is-before {
    border-bottom: 1px dashed rgba(99, 102, 241, 0.24);
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 14%, #ffffff);
    align-items: flex-end;
    padding-bottom: 0.08rem;
}

.appointments-calendar-event-buffer.is-after {
    border-top: 2px dashed rgba(99, 102, 241, 0.32);
    background: color-mix(in srgb, var(--appointment-accent, #6b5bff) 18%, #ffffff);
    padding-top: 0.08rem;
}

.appointments-calendar-event[data-appointment-status="no_show"] .appointments-calendar-event-buffer.is-before {
    border-bottom-color: rgba(225, 29, 72, 0.24);
    background: rgba(225, 29, 72, 0.08);
}

.appointments-calendar-event[data-appointment-status="no_show"] .appointments-calendar-event-buffer.is-after {
    border-top-color: rgba(225, 29, 72, 0.24);
    background: rgba(225, 29, 72, 0.1);
}

.appointments-calendar-event-buffer span {
    display: block;
    width: 100%;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.02;
    color: #5b4b94;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-calendar-event-status-icon {
    position: absolute;
    top: 0.18rem;
    right: 0.18rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.22rem;
    height: 1.22rem;
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1;
    pointer-events: auto;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-status-icon {
    top: 50%;
    right: 0.22rem;
    transform: translateY(-50%);
    width: 1.02rem;
    height: 1.02rem;
    font-size: 0.68rem;
}

.appointments-calendar-event.has-payment-ribbon:not([data-appointment-type="group"]) .appointments-calendar-event-core,
.appointments-calendar-event.has-payment-ribbon:not([data-appointment-type="group"]) .appointments-calendar-event-plain {
    padding-left: 1.38rem;
    padding-right: 0.42rem;
}

.appointments-calendar-event.has-payment-ribbon:not([data-appointment-type="group"]) > .appointments-calendar-event-status-icon {
    top: 0.22rem;
    left: 0.24rem;
    right: auto;
    width: 1rem;
    height: 1rem;
    font-size: 0.72rem;
    transform: none;
}

.appointments-calendar-event.is-compact.has-payment-ribbon:not([data-appointment-type="group"]) .appointments-calendar-event-core,
.appointments-calendar-event.is-compact.has-payment-ribbon:not([data-appointment-type="group"]) .appointments-calendar-event-plain {
    padding-left: 1.22rem;
    padding-right: 0.38rem;
}

.appointments-calendar-event.is-compact.has-payment-ribbon:not([data-appointment-type="group"]) > .appointments-calendar-event-status-icon {
    top: 0.2rem;
    left: 0.2rem;
    right: auto;
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.64rem;
    transform: none;
}

.appointments-calendar-event.has-payment-ribbon {
    overflow: hidden;
    z-index: 5;
}

.appointments-calendar-event-payment-ribbon {
    --appointments-payment-ribbon-start: #22c55e;
    --appointments-payment-ribbon-end: #15803d;
    position: absolute;
    top: 0.32rem;
    right: -1.02rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.88rem;
    min-height: 0.5rem;
    padding: 0.05rem 0.32rem 0.07rem;
    border-radius: 0.13rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(135deg, var(--appointments-payment-ribbon-start) 0%, var(--appointments-payment-ribbon-end) 100%);
    color: #ffffff;
    font-size: 0.36rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.2);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    transform: rotate(43deg) scale(0.92);
    transform-origin: center;
    pointer-events: none;
}

.appointments-calendar-event-payment-ribbon::before,
.appointments-calendar-event-payment-ribbon::after {
    display: none;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-payment-ribbon {
    top: 0.26rem;
    right: -0.92rem;
    min-width: 1.72rem;
    min-height: 0.46rem;
    padding: 0.04rem 0.28rem 0.06rem;
    font-size: 0.34rem;
    letter-spacing: 0.03em;
    transform: rotate(43deg) scale(0.88);
}

.appointments-calendar-event-payment-ribbon[data-state='partial'] {
    min-width: 2.02rem;
}

.appointments-calendar-event.is-compact .appointments-calendar-event-payment-ribbon[data-state='partial'] {
    min-width: 1.88rem;
}

.appointments-calendar-event.is-compact[data-appointment-type="group"]::before {
    top: 50%;
    left: 0.2rem;
    transform: translateY(-50%);
}

.appointments-calendar-event strong,
.appointments-calendar-event span,
.appointments-calendar-event small,
.appointments-calendar-event-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-event strong {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.12;
}

.appointments-calendar-event span {
    font-size: 0.8rem;
    line-height: 1.12;
}

.appointments-calendar-event-client {
    color: #1f2f46;
    font-size: 0.78rem;
    font-weight: 800;
}

.appointments-calendar-event-service {
    color: #17253d;
    font-weight: 500;
}

.appointments-calendar-event-services {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.appointments-calendar-event-price {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    min-width: 0;
    margin-top: 0.04rem;
}

.appointments-calendar-event-price-current,
.appointments-calendar-event-price-original {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-event-price-current {
    color: #111827;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.05;
}

.appointments-calendar-event-price-current.is-offer {
    color: #14532d;
}

.appointments-calendar-event-price-original {
    color: #5f6b7c;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-price {
    margin-top: 0;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-price-current {
    font-size: 0.68rem;
}

.appointments-calendar-event.has-processing-time .appointments-calendar-event-price-original {
    font-size: 0.58rem;
}

/* Responsive calendar events */
@media (max-width: 768px) {
    .appointments-calendar-event {
        border-radius: 8px !important;
        box-shadow: 0 1px 4px rgba(22, 33, 48, 0.05);
    }
    .appointments-calendar-event:hover {
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
        transform: none;
    }
    .appointments-calendar-event.is-bungee-class,
    .appointments-calendar-event[data-appointment-type="bungee"] {
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(15, 35, 68, 0.05);
    }
}

@media (max-width: 480px) {
    .appointments-calendar-event {
        border-radius: 6px !important;
    }
    .appointments-calendar-event.is-bungee-class,
    .appointments-calendar-event[data-appointment-type="bungee"] {
        border-radius: 8px !important;
        border-left-width: 3px !important;
    }
}

.appointments-calendar-event small,
.appointments-calendar-event-meta {
    display: none;
}

.appointments-calendar-event-meta {
    position: absolute;
    inset-inline: 0.48rem;
    bottom: 0.22rem;
}

.appointments-calendar-hover-card {
    --appointment-hover-color: #3b82f6;
    position: fixed;
    z-index: 1450;
    width: min(370px, calc(100vw - 2rem));
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
    overflow: hidden;
    pointer-events: none;
}

.appointments-calendar-hover-sale-ribbon {
    --appointments-hover-ribbon-start: #22c55e;
    --appointments-hover-ribbon-end: #15803d;
    position: absolute;
    top: 0.42rem;
    right: -1.62rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.35rem;
    min-height: 1.08rem;
    padding: 0.18rem 0.92rem 0.2rem;
    border-radius: 0.28rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(135deg, var(--appointments-hover-ribbon-start) 0%, var(--appointments-hover-ribbon-end) 100%);
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.22);
    box-shadow:
        0 10px 18px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transform: rotate(43deg);
    transform-origin: center;
    pointer-events: none;
}

.appointments-calendar-hover-sale-ribbon[data-state='paid'] {
    --appointments-hover-ribbon-start: #22c55e;
    --appointments-hover-ribbon-end: #15803d;
}

.appointments-calendar-hover-sale-ribbon[data-state='partial'] {
    --appointments-hover-ribbon-start: #3b82f6;
    --appointments-hover-ribbon-end: #1d4ed8;
}

.appointments-calendar-hover-sale-ribbon[hidden] {
    display: none !important;
}

.appointments-calendar-hover-card[hidden] {
    display: none !important;
}

.appointments-calendar-status-tooltip {
    position: fixed;
    z-index: 1505;
    padding: 0.34rem 0.58rem;
    border-radius: 0.72rem;
    background: #0b0b0f;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}

.appointments-calendar-status-tooltip[hidden] {
    display: none !important;
}

.appointments-quick-summary-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1495;
    display: grid;
    grid-template-columns: 156px minmax(0, 520px);
    width: min(676px, calc(100vw - 78px));
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -18px 0 44px rgba(15, 23, 42, 0.14);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.appointments-quick-summary-drawer[hidden] {
    display: none !important;
}

.appointments-quick-summary-drawer.is-open {
    transform: translateX(0);
}

.appointments-quick-summary-close {
    position: absolute;
    top: 0.8rem;
    left: -3.4rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    cursor: pointer;
}

.appointments-quick-summary-tabs {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 2.4rem 1rem;
    border-right: 1px solid #e2e8f0;
    background: #ffffff;
}

.appointments-quick-summary-tab {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.appointments-quick-summary-tab .material-symbols-outlined {
    flex: 0 0 auto;
    width: 22px;
    font-size: 1.35rem;
    text-align: center;
}

.appointments-quick-summary-tab.is-active {
    background: #f3efff;
    color: #6b5bff;
    box-shadow: inset 3px 0 0 #6b5bff;
}

.appointments-quick-summary-activity {
    display: grid;
    gap: 1rem;
}

.appointments-quick-summary-activity-month {
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: lowercase;
}

.appointments-quick-summary-activity-line {
    position: relative;
    display: grid;
    gap: 1.85rem;
    padding-left: 2rem;
}

.appointments-quick-summary-activity-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.72rem;
    width: 2px;
    background: #d1d5db;
}

.appointments-quick-summary-activity-item {
    position: relative;
}

.appointments-quick-summary-activity-dot {
    position: absolute;
    top: 0;
    left: -1.42rem;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d1d5db;
    box-shadow: 0 0 0 4px #fbfbfc;
}

.appointments-quick-summary-activity-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    min-height: 118px;
    padding: 1.45rem 1.45rem 1.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.appointments-quick-summary-activity-copy strong,
.appointments-quick-summary-activity-copy span,
.appointments-quick-summary-activity-copy p {
    display: block;
}

.appointments-quick-summary-activity-copy strong {
    color: #111827;
    font-size: 1.02rem;
    line-height: 1.25;
}

.appointments-quick-summary-activity-copy span {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.94rem;
    line-height: 1.35;
}

.appointments-quick-summary-activity-copy p {
    margin: 1rem 0 0;
    color: #111827;
    font-size: 0.95rem;
}

.appointments-quick-summary-activity-actions-wrap {
    position: relative;
    display: inline-block;
}

.appointments-quick-summary-activity-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    margin-top: 0.9rem;
    padding: 0 1rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.appointments-quick-summary-activity-actions .material-symbols-outlined {
    font-size: 1.1rem;
    transition: transform 0.18s ease;
}

.appointments-quick-summary-activity-actions-wrap.is-open .appointments-quick-summary-activity-actions .material-symbols-outlined {
    transform: rotate(180deg);
}

.appointments-quick-summary-activity-refund-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 20;
    width: 200px;
    padding: 0.65rem 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.appointments-quick-summary-activity-refund-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 1.2rem;
    border: 0;
    background: transparent;
    color: #374151;
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

.appointments-quick-summary-activity-refund-menu button:hover,
.appointments-quick-summary-activity-refund-menu button:focus-visible {
    background: #f8fafc;
    color: #111827;
}

.appointments-quick-summary-activity-icon {
    position: relative;
    display: grid;
    place-items: center;
    align-self: start;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #1f7a14;
    font-size: 1.35rem;
    font-weight: 800;
}

.appointments-quick-summary-activity-icon > .material-symbols-outlined {
    color: #1f7a14;
    font-size: 1.6rem;
}

.appointments-quick-summary-activity-item.is-sale .appointments-quick-summary-activity-icon {
    background: #075da4;
    color: #ffffff;
}

.appointments-quick-summary-activity-icon i {
    position: absolute;
    right: -3px;
    bottom: -2px;
    display: block;
    width: 19px;
    height: 19px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #128a05;
    color: transparent;
    font-size: 0 !important;
    font-style: normal;
    line-height: 1;
    overflow: hidden;
    font-family: Arial, sans-serif !important;
}

.appointments-quick-summary-activity-icon i::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 8.5px;
    height: 5.5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

.appointments-quick-summary-activity-foot {
    margin: 0.55rem 0 0;
    color: #6b7280;
    font-size: 0.95rem;
}

.appointments-quick-summary-panel {
    min-height: 0;
    overflow: auto;
    background: #fbfbfc;
}

.appointments-quick-summary-body {
    display: grid;
    gap: 1.25rem;
    padding: 1.6rem 2rem 2rem;
}

.appointments-quick-summary-body[hidden] {
    display: none !important;
}

.appointments-quick-summary-loading {
    padding: 2rem;
    color: #64748b;
    font-weight: 700;
}

.appointments-quick-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.appointments-quick-summary-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.appointments-quick-summary-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 0.95rem;
    border-radius: 999px;
    background: #128a05;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
}

.appointments-quick-summary-primary {
    min-height: 40px;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: #111318;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.appointments-quick-summary-checkout {
    min-height: 40px;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: #128a05;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.appointments-quick-summary-checkout:hover,
.appointments-quick-summary-checkout:focus-visible {
    background: #0f7605;
}

.appointments-quick-summary-secondary {
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.appointments-quick-summary-secondary:hover,
.appointments-quick-summary-secondary:focus-visible {
    background: #f9fafb;
}

.sales-refund-modal {
    --sales-refund-accent: #6b5bff;
    --sales-refund-accent-hover: #5a4be6;
    position: fixed;
    inset: 0;
    z-index: 12050;
    overflow-y: auto;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
}

.sales-refund-modal[hidden] {
    display: none !important;
}

body.has-sales-refund-modal {
    overflow: hidden;
}

.sales-refund-page {
    min-height: 100%;
}

.sales-refund-shell {
    width: min(640px, 100%);
    margin: 0 auto;
    padding: 1.35rem 1.5rem 2.5rem;
}

.sales-refund-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 1.75rem;
    padding-right: max(1.25rem, calc((100vw - 640px) / 2));
    padding-left: max(1.25rem, calc((100vw - 640px) / 2));
    box-sizing: border-box;
}

.sales-refund-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.sales-refund-back-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
}

.sales-refund-back-btn .material-symbols-outlined {
    font-size: 1.2rem;
}

.sales-refund-back-btn:hover,
.sales-refund-back-btn:focus-visible {
    background: #f8fafc;
    border-color: #d1d5db;
}

.sales-refund-back-btn[hidden] {
    display: none !important;
}

.sales-refund-close-btn,
.sales-refund-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 1.35rem;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.sales-refund-continue-btn .material-symbols-outlined {
    font-size: 1.1rem;
}

.sales-refund-continue-btn:disabled {
    border: 0;
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 1;
}

.sales-refund-intro {
    margin-bottom: 1.35rem;
}

.sales-refund-intro h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.75rem, 3vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.sales-refund-subtitle {
    margin: 0.55rem 0 0;
    color: #6b7280;
    font-size: 0.94rem;
    line-height: 1.45;
}

.sales-refund-info-link {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sales-refund-accent);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.sales-refund-info-link:hover,
.sales-refund-info-link:focus-visible {
    color: var(--sales-refund-accent-hover);
    text-decoration: underline;
}

.sales-refund-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    margin-bottom: 0;
    padding: 0.28rem;
    border-radius: 12px;
    background: #f3f4f6;
}

.sales-refund-tab {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sales-refund-tab.is-active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.sales-refund-body {
    display: grid;
    gap: 0;
}

.sales-refund-panel[data-sale-refund-panel="items"] .sales-refund-table {
    margin-top: 1rem;
}

.sales-refund-table {
    display: grid;
}

.sales-refund-table-head {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 108px;
    gap: 0.8rem 1rem;
    align-items: center;
    padding: 0.85rem 0 0.75rem;
    border-bottom: 1px solid #eceff3;
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 700;
}

.sales-refund-table-qty-label {
    grid-column: 3;
    justify-self: end;
    text-align: right;
}

.sales-refund-select-all {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
}

.sales-refund-select-all .sales-refund-select-all-label {
    grid-column: 2;
}

.sales-refund-checkbox {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    pointer-events: auto;
    cursor: pointer;
}

.sales-refund-select-all,
.sales-refund-item,
.sales-refund-inventory-check {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.sales-refund-item .sales-refund-checkbox,
.sales-refund-select-all .sales-refund-checkbox {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    width: 22px;
    height: 22px;
}

.sales-refund-item .sales-refund-checkbox-ui,
.sales-refund-select-all .sales-refund-checkbox-ui {
    grid-column: 1;
    grid-row: 1;
}

.sales-refund-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 108px;
    gap: 0.8rem 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #eceff3;
}

.sales-refund-item-copy {
    grid-column: 2;
    min-width: 0;
}

.sales-refund-checkbox-ui {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 0.05rem;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sales-refund-checkbox-ui::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.4 11.1 12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sales-refund-checkbox:checked + .sales-refund-checkbox-ui {
    border-color: var(--sales-refund-accent);
    background: var(--sales-refund-accent);
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.14);
}

.sales-refund-checkbox:checked + .sales-refund-checkbox-ui::after {
    opacity: 1;
    transform: scale(1);
}

.sales-refund-checkbox:focus-visible + .sales-refund-checkbox-ui {
    outline: 2px solid var(--sales-refund-accent);
    outline-offset: 2px;
}

.sales-refund-checkbox:disabled + .sales-refund-checkbox-ui {
    border-color: #e5e7eb;
    background: #f8fafc;
    box-shadow: none;
}

.sales-refund-items-list {
    display: grid;
}

.sales-refund-item-copy strong {
    display: block;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-refund-item-copy span {
    display: block;
    margin-top: 0.2rem;
    color: #6b7280;
    font-size: 0.86rem;
    line-height: 1.4;
}

.sales-refund-item-side {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    text-align: right;
}

.sales-refund-item-price {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
}

.sales-refund-item-qty input {
    width: 58px;
    min-height: 34px;
    padding: 0 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
    font-size: 0.88rem;
    text-align: center;
}

.sales-refund-empty {
    margin: 0;
    padding: 1.25rem 0;
    color: #6b7280;
    font-size: 0.92rem;
}

.sales-refund-panel[data-sale-refund-panel="amount"] {
    padding-top: 1rem;
}

.sales-refund-amount-panel {
    padding: 0.25rem 0 0.5rem;
}

.sales-refund-amount-field {
    display: grid;
    gap: 0.5rem;
    max-width: 300px;
}

.sales-refund-amount-field span {
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 700;
}

.sales-refund-amount-field input {
    min-height: 46px;
    padding: 0 0.95rem;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font: inherit;
    font-size: 1rem;
}

.sales-refund-amount-field input:focus {
    border-color: var(--sales-refund-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.14);
}

.sales-refund-amount-hint {
    margin: 0.7rem 0 0;
    color: #6b7280;
    font-size: 0.86rem;
}

.sales-refund-footer {
    margin-top: 0;
}

.sales-refund-panel[data-sale-refund-panel="amount"]:not([hidden]) + .sales-refund-footer {
    margin-top: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid #eceff3;
}

.sales-refund-summary {
    display: grid;
    gap: 0;
}

.sales-refund-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #eceff3;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 400;
}

.sales-refund-summary-row.is-total {
    border-bottom: 0;
    padding-bottom: 0.65rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.sales-refund-summary-row.is-total strong {
    font-size: 1rem;
    font-weight: 800;
}

.sales-refund-inventory-check {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 0 0.15rem;
    color: #374151;
    font-size: 0.94rem;
}

.sales-refund-inventory-check[hidden] {
    display: none !important;
}

.sales-refund-inventory-check .sales-refund-checkbox {
    position: relative;
    opacity: 0;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.sales-refund-inventory-check .sales-refund-checkbox-ui {
    margin-top: 0;
    flex: 0 0 22px;
}

.sales-refund-inventory-check:has(.sales-refund-checkbox:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.sales-refund-confirm {
    padding-top: 0.35rem;
}

.sales-refund-confirm-form {
    display: grid;
    gap: 1.35rem;
}

.sales-refund-field {
    display: grid;
    gap: 0.45rem;
}

.sales-refund-field-label {
    color: #374151;
    font-size: 0.88rem;
    font-weight: 700;
}

.sales-refund-field-hint {
    color: #9ca3af;
    font-size: 0.82rem;
    line-height: 1.35;
}

.sales-refund-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.sales-refund-select-wrap.is-highlight {
    border-color: #eceff3;
    background: #f3f4f6;
}

.sales-refund-select-icon {
    flex: 0 0 auto;
    margin-left: 0.95rem;
    color: #6b7280;
    font-size: 1.15rem;
    pointer-events: none;
}

.sales-refund-select {
    flex: 1 1 auto;
    width: 100%;
    min-height: 50px;
    padding: 0 2.4rem 0 0.65rem;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.sales-refund-select-wrap:not(.is-highlight) .sales-refund-select {
    padding-left: 0.95rem;
}

.sales-refund-select:focus {
    outline: none;
}

.sales-refund-select-wrap:focus-within {
    border-color: var(--sales-refund-accent);
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.12);
}

.sales-refund-select-chevron {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    color: #6b7280;
    font-size: 1.25rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.sales-refund-select option {
    color: #111827;
}

.sales-refund-continue-btn .material-symbols-outlined[hidden] {
    display: none !important;
}

.sales-refund-alert {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.45;
}

.sales-refund-alert[hidden] {
    display: none !important;
}

.sales-refund-alert.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.sales-refund-alert.is-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.appointments-quick-summary-more-wrap {
    position: relative;
    display: inline-flex;
}

.appointments-quick-summary-more-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
}

.appointments-quick-summary-more-button .material-symbols-outlined {
    font-size: 1.35rem;
}

.appointments-quick-summary-more-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 0.1rem;
    width: 250px;
    padding: 1rem 1.1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

.appointments-quick-summary-more-menu[hidden] {
    display: none !important;
}

.appointments-quick-summary-more-menu strong {
    margin-bottom: 0.35rem;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.appointments-quick-summary-more-menu button {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.94rem;
    text-align: left;
    cursor: pointer;
}

.appointments-quick-summary-more-menu button:hover,
.appointments-quick-summary-more-menu button:focus-visible {
    color: #6b5bff;
}

.appointments-quick-summary-more-menu button .material-symbols-outlined {
    color: currentColor;
    font-size: 1.15rem;
}

.appointments-quick-summary-more-menu > div {
    height: 1px;
    margin: 0.55rem 0;
    background: #e5e7eb;
}

.appointments-quick-summary-more-menu button.is-danger {
    color: #e11d48;
}

.appointments-quick-summary-body h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.appointments-quick-summary-meta {
    margin: -0.85rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

.appointments-quick-summary-client,
.appointments-quick-summary-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.appointments-quick-summary-client {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
}

.appointments-quick-summary-client strong,
.appointments-quick-summary-client span {
    display: block;
}

.appointments-quick-summary-client strong {
    color: #111827;
    font-weight: 800;
}

.appointments-quick-summary-client span {
    color: #64748b;
    font-size: 0.9rem;
}

.appointments-quick-summary-avatar {
    display: grid !important;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #ebe8ff;
    color: #6b5bff !important;
    font-size: 1.45rem !important;
    font-weight: 900;
}

.appointments-quick-summary-card {
    display: grid;
    gap: 0.95rem;
    padding: 1.25rem 1.35rem;
}

.appointments-quick-summary-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
}

.appointments-quick-summary-sale-item,
.appointments-quick-summary-payment,
.appointments-quick-summary-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.appointments-quick-summary-sale-item strong,
.appointments-quick-summary-sale-item span {
    display: block;
}

.appointments-quick-summary-sale-item strong {
    color: #111827;
    font-size: 0.96rem;
}

.appointments-quick-summary-sale-item span {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.88rem;
}

.appointments-quick-summary-sale-item b,
.appointments-quick-summary-payment strong,
.appointments-quick-summary-total strong {
    color: #111827;
    font-weight: 800;
    white-space: nowrap;
}

.appointments-quick-summary-total {
    padding-top: 0.8rem;
    border-top: 1px solid #e2e8f0;
    color: #111827;
    font-weight: 800;
}

.appointments-calendar-hover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1rem 0.7rem;
    background: var(--appointment-hover-color);
    color: #ffffff;
}

.appointments-calendar-hover-head strong,
.appointments-calendar-hover-head span {
    color: inherit;
    font-size: 0.9rem;
    font-weight: 800;
}

.appointments-calendar-hover-status {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.appointments-calendar-hover-status .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.appointments-calendar-hover-body {
    display: grid;
    gap: 1.45rem;
    padding: 1.15rem 1.2rem 1.25rem;
}

.appointments-calendar-hover-client {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.appointments-calendar-hover-avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #eef0ff;
    color: #5f4fff;
    font-size: 1.35rem;
    font-weight: 800;
}

.appointments-calendar-hover-copy {
    min-width: 0;
}

.appointments-calendar-hover-copy strong,
.appointments-calendar-hover-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-hover-copy strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.appointments-calendar-hover-copy span {
    margin-top: 0.18rem;
    color: #64748b;
    font-size: 0.95rem;
}

.appointments-calendar-hover-folio {
    margin-top: 0.34rem;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

.appointments-calendar-hover-service-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-calendar-hover-service-copy {
    min-width: 0;
}

.appointments-calendar-hover-service-copy strong,
.appointments-calendar-hover-service-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-calendar-hover-service-copy strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.appointments-calendar-hover-service-copy span {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.94rem;
}

.appointments-calendar-hover-price {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.appointments-calendar-hover-channel {
    margin-top: -0.55rem;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.appointments-bottom-grid {
    position: fixed;
    top: 68px;
    right: 0;
    bottom: 0;
    z-index: 1350;
    display: none !important;
    width: min(460px, calc(100vw - 1.25rem));
    margin: 0;
    padding: 0;
    background: transparent;
}

.appointments-bottom-grid[hidden] {
    display: none !important;
}

.appointments-editor-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    border-radius: 18px 0 0 18px;
    border-right: 0;
    box-shadow: -14px 0 32px rgba(15, 23, 42, 0.12);
    overflow: auto;
}

.appointments-list-panel {
    display: none !important;
}

.appointments-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-editor-close {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2d43;
    cursor: pointer;
}

.appointments-editor-close .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-editor-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.appointments-editor-form textarea {
    min-height: 120px;
}

.appointments-editor-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.appointments-list-actions {
    min-width: 240px;
}

.appointments-status-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.appointments-status-form select {
    min-width: 150px;
}

body.has-appointments-modal,
body.has-appointments-reschedule-modal,
body.has-appointments-cancel-modal {
    overflow: hidden;
}

.appointments-cancel-modal {
    position: fixed;
    inset: 0;
    z-index: 1652;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: #ffffff;
}

.appointments-cancel-modal.is-open {
    display: flex;
}

.appointments-cancel-dialog {
    width: 100vw;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    overflow-y: auto;
}

.appointments-cancel-form {
    display: grid;
    gap: 1.75rem;
    min-height: 100vh;
    align-content: start;
    padding: 2rem 2.5rem 3rem;
}

.appointments-cancel-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(1240px, 100%);
    margin: 0 auto;
}

.appointments-cancel-topbar-spacer {
    min-width: 1px;
    min-height: 1px;
}

.appointments-cancel-close {
    min-height: 48px;
    padding: 0 1.3rem;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-cancel-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);
    gap: 2rem;
    align-items: start;
    width: min(1240px, 100%);
    margin: 3.75rem auto 0;
}

.appointments-cancel-main {
    display: grid;
    gap: 1.25rem;
    padding: 1.2rem 0 0;
}

.appointments-cancel-head h2 {
    margin: 0;
    color: #111827;
    font-size: 3rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.appointments-cancel-head p {
    margin: 0.7rem 0 0;
    color: #64748b;
    font-size: 1.12rem;
    line-height: 1.45;
}

.appointments-cancel-note {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid #d8ddff;
    border-radius: 12px;
    background: #eef0ff;
}

.appointments-cancel-note-icon {
    color: #6358e7;
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-cancel-note-copy {
    display: grid;
    gap: 0.26rem;
}

.appointments-cancel-note-copy strong,
.appointments-cancel-note-copy small {
    display: block;
}

.appointments-cancel-note-copy strong {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.appointments-cancel-note-copy small {
    color: #5f6b81;
    font-size: 0.94rem;
    line-height: 1.5;
}

.appointments-cancel-field {
    display: grid;
    gap: 0.55rem;
}

.appointments-cancel-field > span {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointments-cancel-field select {
    width: 100%;
    min-height: 56px;
    border: 1px solid #d5dbe7;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.85rem 1rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}

.appointments-cancel-notify {
    margin-top: 0.15rem;
}

.appointments-cancel-side {
    display: grid;
    gap: 1rem;
    padding: 2.35rem 2rem 2rem;
    border: 1px solid #e3e6ee;
    border-radius: 22px;
    background: #ffffff;
}

.appointments-cancel-side h3 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
}

.appointments-cancel-side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eaedf3;
}

.appointments-cancel-side-row span {
    color: #374151;
    font-size: 0.98rem;
    line-height: 1.45;
}

.appointments-cancel-side-row strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-cancel-side-copy {
    margin: -0.15rem 0 0;
    color: #6b7280;
    font-size: 0.98rem;
    line-height: 1.55;
}

.appointments-cancel-submit {
    min-height: 58px;
    margin-top: 1rem;
    border: 0;
    border-radius: 999px;
    background: #dc143c;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-no-show-modal .appointments-cancel-form {
    padding-top: 0.8rem;
}

.appointments-no-show-header {
    width: min(1260px, calc(100% - 4rem));
    margin: 2.2rem auto 0;
}

.appointments-no-show-modal .appointments-cancel-topbar,
.appointments-no-show-modal .appointments-cancel-layout {
    width: min(1260px, calc(100% - 4rem));
}

.appointments-no-show-modal .appointments-cancel-layout {
    grid-template-columns: minmax(0, 1.62fr) minmax(410px, 0.82fr);
    gap: 5.8rem;
    margin-top: 1.9rem;
}

.appointments-no-show-modal .appointments-cancel-main {
    gap: 1.7rem;
    padding-top: 0.15rem;
}

.appointments-no-show-modal .appointments-cancel-head h2 {
    font-size: 2.95rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.appointments-no-show-modal .appointments-cancel-note {
    max-width: 646px;
    padding: 1.15rem 1.2rem;
}

.appointments-no-show-modal .appointments-cancel-note-copy strong {
    font-size: 0.96rem;
    font-weight: 500;
}

.appointments-no-show-modal .appointments-cancel-side {
    max-width: 446px;
    padding: 2.3rem 2.35rem 2.15rem;
    border-radius: 20px;
}

.appointments-no-show-modal .appointments-cancel-side h3 {
    font-size: 1.02rem;
}

.appointments-no-show-modal .appointments-cancel-side-copy {
    margin-top: -0.05rem;
}

.appointments-no-show-modal .appointments-cancel-submit {
    margin-top: 1.5rem;
}

.appointments-reschedule-modal {
    position: fixed;
    inset: 0;
    z-index: 1650;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(7px);
}

.appointments-reschedule-modal.is-open {
    display: flex;
}

.appointments-reschedule-dialog {
    position: relative;
    width: min(500px, 100%);
    border: 1px solid rgba(223, 228, 236, 0.95);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.16),
        0 2px 8px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.appointments-reschedule-close {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.appointments-reschedule-close:hover,
.appointments-reschedule-close:focus-visible {
    background: #f1f5f9;
    color: #111827;
}

.appointments-reschedule-form {
    display: grid;
    gap: 1.15rem;
    padding: 1.55rem 1.65rem 1.45rem;
}

.appointments-reschedule-head {
    padding-right: 2rem;
}

.appointments-reschedule-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.appointments-reschedule-head p {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin: 0.72rem 0 0;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointments-reschedule-head p::before {
    content: 'schedule';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.appointments-reschedule-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.82rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.appointments-reschedule-toggle:hover:not(.is-disabled) {
    border-color: #d8e0f2;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.appointments-reschedule-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointments-reschedule-check {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 0.12rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: transparent;
    flex-shrink: 0;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.appointments-reschedule-check .material-symbols-outlined {
    font-size: 0.92rem;
    line-height: 1;
}

.appointments-reschedule-toggle input[type="checkbox"]:checked + .appointments-reschedule-check {
    border-color: #6d57ff;
    background: linear-gradient(145deg, #6d57ff 0%, #5b47ea 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(91, 71, 234, 0.28);
}

.appointments-reschedule-toggle input[type="checkbox"]:focus-visible + .appointments-reschedule-check {
    outline: 2px solid rgba(109, 87, 255, 0.35);
    outline-offset: 2px;
}

.appointments-reschedule-toggle input[type="checkbox"]:disabled + .appointments-reschedule-check {
    opacity: 0.45;
    box-shadow: none;
}

.appointments-reschedule-toggle.is-disabled {
    cursor: default;
    background: #f1f5f9;
    border-color: #e2e8f0;
    box-shadow: none;
}

.appointments-reschedule-copy {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.appointments-reschedule-copy strong,
.appointments-reschedule-copy small {
    display: block;
}

.appointments-reschedule-copy strong {
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.45;
}

.appointments-reschedule-copy small {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.5;
}

.appointments-reschedule-toggle.is-disabled .appointments-reschedule-copy strong {
    color: #64748b;
}

.appointments-reschedule-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.appointments-reschedule-channel {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 28px;
    padding: 0 0.68rem 0 0.52rem;
    border: 1px solid #dbe3f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.appointments-reschedule-channel[data-reschedule-email-channel]::before,
.appointments-reschedule-channel[data-reschedule-whatsapp-channel]::before,
.appointments-reschedule-channel[data-cancel-email-channel]::before,
.appointments-reschedule-channel[data-cancel-whatsapp-channel]::before {
    font-family: 'Material Symbols Outlined';
    font-size: 0.95rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.appointments-reschedule-channel[data-reschedule-email-channel]::before,
.appointments-reschedule-channel[data-cancel-email-channel]::before {
    content: 'mail';
}

.appointments-reschedule-channel[data-reschedule-whatsapp-channel]::before,
.appointments-reschedule-channel[data-cancel-whatsapp-channel]::before {
    content: 'chat';
}

.appointments-reschedule-channel.is-on {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.appointments-reschedule-channel.is-off {
    border-style: dashed;
    border-color: #d7dee8;
    background: #f8fafc;
    color: #94a3b8;
    text-decoration: none;
    opacity: 0.78;
}

.appointments-reschedule-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.62rem;
    padding-top: 1.1rem;
    margin-top: 0.15rem;
    border-top: 1px solid #eef2f7;
}

.appointments-reschedule-cancel,
.appointments-reschedule-submit {
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.appointments-reschedule-cancel {
    border: 1px solid #d7dee8;
    background: #ffffff;
    color: #334155;
}

.appointments-reschedule-cancel:hover,
.appointments-reschedule-cancel:focus-visible {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.appointments-reschedule-submit {
    border: 0;
    background: linear-gradient(145deg, #6d57ff 0%, #5b47ea 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(91, 71, 234, 0.28);
}

.appointments-reschedule-submit:hover,
.appointments-reschedule-submit:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(91, 71, 234, 0.34);
}

.appointments-reschedule-submit:active {
    transform: translateY(0);
}

@media (max-width: 560px) {
    .appointments-reschedule-form {
        padding: 1.35rem 1.15rem 1.2rem;
    }

    .appointments-reschedule-head h2 {
        font-size: 1.22rem;
    }

    .appointments-reschedule-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .appointments-reschedule-cancel,
    .appointments-reschedule-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 980px) {
    .appointments-cancel-layout {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 1.75rem;
    }

    .appointments-cancel-main {
        padding-left: 0;
    }

    .appointments-cancel-head h2 {
        font-size: 2.35rem;
    }

    .appointments-cancel-side {
        padding: 1.4rem 1.2rem 1.25rem;
    }

    .appointments-cancel-form {
        padding: 1.2rem 1rem 1.75rem;
    }

    .appointments-cancel-topbar {
        width: 100%;
    }

    .appointments-cancel-layout {
        width: 100%;
    }
}

.appointments-quick-popover {
    position: fixed;
    z-index: 1400;
}

.appointments-quick-card {
    min-width: 306px;
    padding: 0 0 0.45rem;
    border: 1px solid #dfe3ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.appointments-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 50px;
    padding: 0 1.05rem;
    margin-bottom: 0.2rem;
    background: #f7f7f8;
    border-bottom: 1px solid #eceff4;
}

.appointments-quick-head strong {
    color: #111927;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
}

.appointments-quick-close {
    border: 0;
    background: transparent;
    color: #1f2d43;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-quick-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    width: 100%;
    min-height: 50px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2d43;
    font-size: 0.96rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.appointments-quick-action span:last-child {
    flex: 1 1 auto;
    text-align: left;
}

.appointments-quick-action .material-symbols-outlined {
    flex: 0 0 22px;
    color: #1f2d43;
    font-size: 1.18rem;
    line-height: 1;
}

.appointments-quick-action:hover {
    background: #f4f6fb;
}

.appointments-quick-action.is-disabled {
    opacity: 1;
    color: #1f2d43;
    cursor: default;
}

.appointments-quick-link {
    display: block;
    padding: 0.8rem 1.05rem 0.55rem;
    color: #6b5bff;
    font-size: 0.95rem;
    font-weight: 700;
}

.appointments-service-selector {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.14);
    backdrop-filter: none;
}

.appointments-service-selector[hidden] {
    display: none !important;
}

.appointments-service-selector:not(.is-summary) [data-service-summary-view] {
    display: none !important;
}

.appointments-service-selector.is-summary [data-service-picker-view] {
    display: none !important;
}

.appointments-service-selector-shell {
    display: grid;
    grid-template-columns: 84px var(--appointments-client-panel-width, 272px) minmax(0, 1fr);
    width: min(960px, 100vw);
    height: 100%;
    margin: 0;
    background: transparent;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

.appointments-service-selector:not(.is-summary):not(.is-checkout):not(.is-client-picker-open) .appointments-service-selector-shell {
    width: min(calc(84px + var(--appointments-client-panel-width, 272px) + 514px), 100vw);
}

.appointments-service-selector.is-summary {
    --appointments-client-panel-width: 305px;
}

.appointments-service-selector.is-summary .appointments-service-selector-shell {
    width: min(860px, 100vw);
}

.admin-body {
    --appointments-checkout-drawer-width: 1400px;
    --appointments-checkout-side-width: 430px;
    --appointments-payment-dialog-width: 760px;
    --appointments-payment-cash-width: 560px;
    --appointments-payment-giftcard-width: 520px;
    --appointments-payment-split-width: 760px;
}

.appointments-service-selector.is-checkout .appointments-service-selector-shell {
    grid-template-columns: minmax(0, 1fr);
    width: min(980px, 100vw);
}

.appointments-service-selector.is-checkout .appointments-service-selector-tools {
    position: absolute;
    top: 0.5rem;
    left: calc(100vw - min(980px, 100vw) - 3.45rem);
    z-index: 8;
    padding: 0;
    background: transparent;
    border-right: 0;
}

.appointments-service-selector.is-checkout .appointments-service-selector-tool {
    border-color: rgba(203, 213, 225, 0.65);
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.appointments-service-selector.is-checkout .appointments-service-selector-tool.is-static {
    background: #f8fafc;
}

.appointments-service-selector.is-checkout .appointments-service-selector-side {
    display: none;
}

.appointments-service-selector.is-checkout .appointments-service-selector-main {
    padding: 0;
}

.appointments-service-sale-success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 22;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: min(980px, 100vw);
    padding: 1.4rem;
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.appointments-service-sale-success[hidden] {
    display: none !important;
}

.appointments-service-sale-success.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.appointments-service-sale-success-card {
    width: min(520px, 100%);
    margin-top: 1.2rem;
    padding: 1.45rem 1.5rem 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.2);
}

.appointments-service-sale-success-badge {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #16a34a;
}

.appointments-service-sale-success-badge .material-symbols-outlined {
    font-size: 1.9rem;
    line-height: 1;
}

.appointments-service-sale-success-kicker {
    display: block;
    color: #16a34a;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appointments-service-sale-success-card h3 {
    margin: 0.28rem 0 0.45rem;
    color: #111827;
    font-size: 1.55rem;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.appointments-service-sale-success-card p {
    max-width: 34rem;
    margin: 0 auto;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.45;
}

.appointments-service-sale-success-actions {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

.appointments-service-sale-success-print,
.appointments-service-sale-success-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 12px;
    font-weight: 800;
}

.appointments-service-sale-success-print {
    border: 0;
    background: #111318;
    color: #ffffff;
}

.appointments-service-sale-success-dismiss {
    border: 1px solid #d8e0eb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-selector.is-checkout.is-checkout-tip-stage .appointments-service-selector-shell {
    width: min(980px, 100vw);
}

.appointments-service-selector.is-checkout.is-checkout-tip-stage .appointments-service-checkout {
    grid-template-columns: minmax(0, 1fr) var(--appointments-checkout-side-width);
}

.appointments-service-selector.is-checkout.is-checkout-tip-stage .appointments-service-selector-tools {
    left: calc(100vw - min(980px, 100vw) - 3.45rem);
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-selector-shell {
    height: 100%;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-selector-main {
    display: block;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    align-content: stretch;
    height: 100%;
    min-height: 0;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout-main {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout-side {
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    overflow-x: hidden;
    overflow-y: hidden;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout-services {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout-side-footer {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 0 0 auto;
    margin-top: auto;
    width: 100%;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-picker {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.appointments-service-selector.is-checkout:not(.is-pos-catalog) .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.appointments-service-selector.is-picker-returnable {
    --appointments-client-panel-width: 305px;
}

.appointments-service-selector.is-picker-returnable .appointments-service-selector-shell {
    width: min(860px, 100vw);
}

.appointments-service-selector.is-client-picker-open {
    --appointments-client-panel-width: 336px;
}

.appointments-service-selector-tools {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.75rem 0.85rem 0.5rem;
    background: transparent;
    border-right: 0;
}

.appointments-service-selector-tool {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #22324b;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.appointments-service-selector-tool .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.appointments-service-selector-close {
    cursor: pointer;
}

.appointments-service-selector-tool.is-static {
    color: #2a3850;
}

.appointments-service-selector-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: #f6f7f9;
    border-left: 1px solid #e6ecf3;
    border-right: 1px solid #e4eaf2;
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog {
    --pos-cart-column-width: clamp(300px, 35%, 420px);
    --pos-shell-max-width: min(100vw, 1320px);
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    overflow: visible;
    background: rgba(15, 23, 42, 0.14);
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-shell {
    position: relative;
    grid-template-areas: "catalog cart";
    grid-template-columns: minmax(0, 65fr) minmax(280px, 35fr);
    width: var(--pos-shell-max-width);
    max-width: var(--pos-shell-max-width);
    max-height: 100dvh;
    height: 100%;
    margin: 0 0 0 auto;
    background: #ffffff;
    border-radius: 0;
    border-left: 1px solid rgba(214, 220, 232, 0.92);
    box-shadow: -12px 0 48px rgba(15, 23, 42, 0.14);
    overflow: visible;
    box-sizing: border-box;
}

.appointments-service-selector.is-pos-catalog:not(.is-checkout) .appointments-service-selector-shell {
    width: var(--pos-shell-max-width);
    max-width: var(--pos-shell-max-width);
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-tools {
    position: absolute;
    top: 1rem;
    left: -60px;
    z-index: 12;
    display: flex;
    padding: 0;
    background: transparent;
    border: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-close {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d8dde6;
    border-radius: 12px;
    background: #f4f6f8;
    color: #111827;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.1),
        0 1px 2px rgba(15, 23, 42, 0.05);
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-close .material-symbols-outlined {
    font-size: 1.45rem;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-close:hover,
.appointments-service-selector.is-pos-catalog .appointments-service-selector-close:focus-visible {
    border-color: #d8dde6;
    background: #ffffff;
    color: #0f172a;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.13),
        0 1px 2px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-main {
    grid-area: catalog;
    min-width: 0;
    padding: 1.1rem 1.35rem 1.35rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #c4b5fd transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-main::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-main::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-main::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border: 1px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-main::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-side {
    grid-area: cart;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    min-width: 0;
    width: auto;
    max-width: none;
    overflow-x: hidden;
    overflow-y: auto;
    border-left: 1px solid #eef2f6;
    border-right: 0;
    background: #ffffff;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #c4b5fd transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-side::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-side::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-side::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border: 1px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-side::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
    min-height: auto;
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    margin: 1rem 1rem 0;
    padding: 1rem 1.05rem;
    box-sizing: border-box;
    border: 1px solid #e9e5ff;
    border-radius: 14px;
    background: #f8f6ff;
    box-shadow: none;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-trigger:hover {
    border-color: #ddd6fe;
    background: #f3f0ff;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-sidecopy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.2rem;
    flex: 1 1 auto;
    margin-top: 0;
    text-align: left;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-sidecopy .appointments-service-selector-icon {
    grid-row: 1 / -1;
    grid-column: 1;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-sidecopy h3 {
    grid-column: 2;
    grid-row: 1;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-sidecopy p {
    grid-column: 2;
    grid-row: 2;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-sidecopy h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-sidecopy p {
    margin: 0.28rem 0 0;
    max-width: none;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 500;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-icon {
    flex: 0 0 auto;
    margin: 0;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(145deg, #f4f2ff 0%, #ebe7ff 100%);
    color: #6b5bff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-icon .material-symbols-outlined {
    font-size: 1.65rem;
}

.appointments-pos-catalog {
    display: grid;
    gap: 0.85rem;
}

.appointments-pos-crumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.appointments-pos-crumbs .is-current {
    color: #111827;
    font-weight: 700;
}

.appointments-pos-crumb-sep {
    color: #cbd5e1;
    font-weight: 500;
}

.appointments-pos-catalog-head {
    margin: 0;
}

.appointments-pos-catalog-head h2,
.appointments-pos-catalog-head [data-service-picker-title] {
    margin: 0;
    color: #111827;
    font-size: clamp(1.45rem, 1.8vw, 1.75rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-search-shell {
    margin-bottom: 0.15rem;
    padding: 0 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-search-shell .material-symbols-outlined {
    color: #94a3b8;
    font-size: 1.2rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-search-shell:focus-within {
    border-color: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.appointments-service-selector.is-pos-catalog .appointments-pos-search-shell input {
    min-height: 46px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    border: 0;
    background: transparent;
    font-size: 0.94rem;
    color: #111827;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-search-shell input::placeholder {
    color: #94a3b8;
}

.appointments-pos-categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.appointments-pos-category {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.4rem;
    min-height: 78px;
    padding: 0.65rem 0.4rem;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #ffffff;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.appointments-pos-category:hover:not(.is-active) {
    border-color: #d1d5db;
    background: #fafafa;
}

.appointments-pos-category.is-active {
    border-color: #8b5cf6;
    background: #f5f3ff;
    color: #7c3aed;
    box-shadow: none;
}

.appointments-pos-category-icon {
    font-size: 1.35rem;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    color: #64748b;
}

.appointments-pos-category.is-active .appointments-pos-category-icon {
    color: #7c3aed;
}

.appointments-pos-category-panel {
    display: none;
    padding-top: 0.35rem;
}

.appointments-pos-category-panel.is-active {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.appointments-pos-quick-sale {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.appointments-pos-quick-sale-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.15rem;
}

.appointments-pos-quick-sale-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.appointments-pos-quick-sale-edit {
    border: 0;
    background: transparent;
    color: #7c3aed;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.15rem 0;
}

.appointments-pos-quick-sale-edit:hover {
    text-decoration: underline;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-catalog,
.appointments-service-selector.is-pos-catalog .appointments-service-selector-stage {
    max-width: 100%;
    min-width: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-sale-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
    max-width: 100%;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-catalog-extra {
    display: none;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.appointments-service-selector.is-pos-catalog.is-pos-show-all-services .appointments-pos-service-catalog-extra {
    display: block;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-all-services-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 0.65rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-all-services-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-all-services-head span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups {
    display: grid;
    gap: 1rem;
    max-height: min(52vh, 560px);
    overflow: auto;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: #c4b5fd transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups {
    display: grid;
    gap: 0.35rem;
    max-height: calc(100dvh - 290px);
    overflow: auto;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: #c4b5fd transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups::-webkit-scrollbar,
.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups::-webkit-scrollbar,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups::-webkit-scrollbar-track,
.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups::-webkit-scrollbar-track,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups::-webkit-scrollbar-thumb,
.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups::-webkit-scrollbar-thumb,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border: 1px solid #fafbfc;
    border-radius: 999px;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups::-webkit-scrollbar-thumb:hover,
.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups::-webkit-scrollbar-thumb:hover,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-group {
    border: 1px solid #eef2f6;
    border-radius: 14px;
    background: #fafbfc;
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-group-head {
    padding: 0.75rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #eef2f6;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-group-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.65rem 0.5rem 0.75rem;
    align-items: stretch;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-group-head {
    padding: 0.65rem 0.85rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: start;
    align-content: stretch;
    gap: 0.35rem 0.85rem;
    width: 100%;
    min-height: 92px;
    height: 100%;
    padding: 0.85rem 0.9rem 0.85rem 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item:hover,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option:hover {
    border-color: #d1d5db;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item:focus-visible,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22);
}

.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option.is-selected {
    background: #f5f3ff;
    border-color: #c4b5fd;
    box-shadow: none;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item .appointments-service-option-accent,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option .appointments-service-option-accent {
    grid-row: 1 / -1;
    grid-column: 1;
    align-self: stretch;
    width: 8px;
    min-height: 100%;
    height: auto;
    margin: 0;
    border-radius: 12px 0 0 12px;
    background: var(--service-accent, #9ad9f5) !important;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item .appointments-service-option-accent {
    background: #9ad9f5 !important;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item .appointments-service-option-copy,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option .appointments-service-option-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    padding-top: 0.05rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item .appointments-service-option-copy strong,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option .appointments-service-option-copy strong {
    display: block;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item .appointments-service-option-copy small,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option .appointments-service-option-copy small {
    display: none;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-service-group,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups .appointments-service-group {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-service-group + .appointments-service-group,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups .appointments-service-group + .appointments-service-group {
    margin-top: 0.35rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-service-group-head,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups .appointments-service-group-head {
    padding: 0.35rem 0 0.25rem;
    margin-bottom: 0.35rem;
    background: transparent;
    border-bottom: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-service-group,
.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-service-group-list,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups .appointments-service-group,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups .appointments-service-group-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-service-group-list,
.appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups .appointments-service-group-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0;
    align-items: stretch;
    background: transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-membership-badge {
    color: #6d28d9;
    background: #f5f3ff;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-pos-product-option {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: start;
    align-content: stretch;
    gap: 0.35rem 0.75rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 124px;
    height: 100%;
    padding: 0.8rem 0.85rem 0.8rem 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    overflow: visible;
    box-sizing: border-box;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-pos-product-option:hover:not(:disabled) {
    border-color: #d1d5db;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-pos-product-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22);
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-pos-product-option.is-selected {
    border-color: #c4b5fd;
    background: #faf9ff;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-pos-product-option.is-out-of-stock,
.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-pos-product-option:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-pos-product-option .appointments-service-option-accent {
    grid-row: 1 / -1;
    grid-column: 1;
    align-self: stretch;
    width: 8px;
    min-height: 100%;
    height: auto;
    margin: 0;
    border-radius: 12px 0 0 12px;
    background: var(--service-accent, #f59ad8) !important;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-top {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-image-placeholder {
    font-size: 1.85rem;
    color: #c4b5fd;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-copy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.28;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-size: 0.76rem;
    line-height: 1.3;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-stock {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-stock.is-empty {
    background: #fef2f2;
    color: #b91c1c;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-product-price {
    grid-column: 2;
    grid-row: 2;
    display: block;
    align-self: end;
    margin-top: auto;
    padding-top: 0.1rem;
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line.is-product-line {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.6rem 0.65rem 0.65rem;
    border-left: 3px solid var(--service-accent, #f59ad8);
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line.is-product-line .appointments-pos-cart-line-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line.is-product-line .appointments-pos-cart-line-thumb {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f5f9;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line.is-product-line .appointments-pos-cart-line-thumb-placeholder {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f5f3ff;
    color: #8b5cf6;
    font-size: 1.2rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-quick-item .appointments-service-option-price,
.appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-option .appointments-service-option-price {
    grid-column: 2;
    grid-row: 2;
    display: block;
    align-self: end;
    margin-top: auto;
    padding-top: 0.15rem;
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 500;
    text-align: left;
    white-space: normal;
}

.appointments-pos-coming-soon {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    max-width: 360px;
    margin: 2.5rem auto;
    text-align: center;
    color: #64748b;
}

.appointments-pos-coming-soon .material-symbols-outlined {
    font-size: 2rem;
    color: #6b5bff;
}

.appointments-pos-coming-soon strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 1rem 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
}

.appointments-pos-cart-empty[hidden] {
    display: none !important;
}

.appointments-pos-cart-empty {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    margin: auto 0;
    padding: 2.5rem 1rem 3rem;
    text-align: center;
    color: #64748b;
}

.appointments-pos-cart-body[hidden],
.appointments-pos-cart-empty.is-hidden,
.appointments-pos-cart-body.is-hidden {
    display: none !important;
}

.appointments-pos-cart-empty-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: linear-gradient(145deg, #f4f2ff 0%, #ebe7ff 55%, #e2ddff 100%);
    font-size: 2.65rem;
    color: #7c6cff;
    box-shadow: 0 14px 28px rgba(107, 91, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 6px 10px rgba(107, 91, 255, 0.12));
}

.appointments-pos-cart-empty strong {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.appointments-pos-cart-empty p {
    margin: 0;
    max-width: 280px;
    font-size: 0.9rem;
    line-height: 1.55;
    font-weight: 500;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-lines {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: #c4b5fd transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-lines::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-lines::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-lines::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border: 1px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-lines::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-totals {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    background: #ffffff;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-footer {
    display: grid;
    gap: 0.65rem;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.35rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 0.55rem;
    align-items: stretch;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-continue {
    flex-shrink: 0;
}

.appointments-pos-cart-line {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.75rem 0.8rem;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #ffffff;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.65rem 0.7rem 0.8rem;
    border: 1px solid #e8edf3;
    border-left: 3px solid var(--service-accent, #6b5bff);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line.is-accented {
    border-color: #e8edf3;
    border-left-color: var(--service-accent, #6b5bff);
    background: #ffffff;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line-accent {
    display: none;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 0.15rem;
    min-width: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line-copy strong {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line-copy small {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.35;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line-price {
    flex: 0 0 auto;
    padding-top: 0.05rem;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line-remove {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: -0.05rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-line-remove:hover {
    background: #f1f5f9;
    color: #64748b;
}

.appointments-pos-cart-line.is-accented {
    border-color: #e9e5ff;
    background: #faf9ff;
}

.appointments-pos-cart-line-accent {
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    background: var(--service-accent, #6b5bff);
}

.appointments-pos-cart-line-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.appointments-pos-cart-line-copy strong {
    color: #0f172a;
    font-size: 0.88rem;
    line-height: 1.3;
}

.appointments-pos-cart-line-copy small {
    color: #94a3b8;
    font-size: 0.78rem;
}

.appointments-pos-cart-line-price {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-pos-cart-line-remove {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.appointments-pos-cart-line-remove:hover {
    background: #f1f5f9;
    color: #ef4444;
}

.appointments-pos-cart-totals {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.15rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-footer .appointments-pos-cart-totals {
    padding-top: 0.5rem;
    border-top: 1px solid #e8edf3;
}

.appointments-pos-cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
}

.appointments-pos-cart-total-row.is-total {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 800;
}

.appointments-pos-cart-continue {
    width: 100%;
    min-height: 48px;
    padding: 0 1.15rem;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.appointments-pos-cart-more {
    display: grid;
    place-items: center;
    width: 46px;
    min-height: 48px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.appointments-pos-cart-more .material-symbols-outlined {
    font-size: 1.35rem;
}

.appointments-pos-cart-more:hover:not(:disabled),
.appointments-pos-cart-more:focus-visible:not(:disabled) {
    border-color: #d1d5db;
    background: #f8fafc;
    color: #111827;
}

.appointments-pos-cart-more:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.appointments-pos-cart-continue:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.22);
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-continue:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

.appointments-service-selector.is-pos-catalog.is-checkout {
    --appointments-checkout-side-width: 380px;
    align-items: stretch;
    padding: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout [data-service-picker-view],
.appointments-service-selector.is-pos-catalog.is-checkout [data-service-summary-view] {
    display: none !important;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-selector-shell,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-selector-shell,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-selector-shell {
    position: relative;
    grid-template-areas: "checkout";
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    width: min(980px, 100vw);
    max-width: min(980px, 100vw);
    height: 100%;
    min-height: 0;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    align-self: stretch;
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-selector-tools,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-selector-tools,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-selector-tools {
    position: absolute;
    top: 1rem;
    left: -60px;
    z-index: 12;
    padding: 0;
    background: transparent;
    border: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-selector-close {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-selector-side {
    display: none;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-selector-main {
    grid-area: checkout;
    display: block;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    align-self: stretch;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-checkout,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-checkout {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    align-content: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-checkout,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-checkout {
    grid-template-columns: minmax(0, 1fr) var(--appointments-checkout-side-width);
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout.is-view-active {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-main {
    display: grid;
    align-content: start;
    justify-items: center;
    align-items: start;
    gap: 1rem;
    padding: 1.35rem 1.5rem 1.5rem;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-checkout-main,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-checkout-main {
    justify-items: center;
}

.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-checkout-crumbs,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-checkout-copy,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-checkout-tip-stage {
    width: 100%;
    max-width: 700px;
}

.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-checkout-crumbs,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-checkout-copy,
.appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-checkout-payment-stage {
    width: 100%;
    max-width: 560px;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-crumbs {
    color: #94a3b8;
    font-size: 0.88rem;
    font-weight: 600;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-crumb {
    color: #94a3b8;
    font-weight: 600;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-crumbs .is-current {
    color: #111827;
    font-weight: 700;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-crumbs [data-service-checkout-crumb-next] {
    color: #94a3b8;
    font-weight: 600;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-copy h2[data-service-checkout-title] {
    font-size: clamp(1.65rem, 2vw, 2rem);
    letter-spacing: -0.035em;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-copy p {
    color: #64748b;
    font-size: 0.95rem;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-tip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    width: 100%;
    max-width: 700px;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-tip-card {
    min-height: 100px;
    padding: 0.8rem 0.75rem;
    border-color: #d6dfeb;
    border-radius: 12px;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-tip-card.is-selected {
    border-color: #6b63ff;
    box-shadow: inset 0 0 0 1.5px #6b63ff;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-tip-card[data-tip-mode="percent"] small {
    display: none !important;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    margin: 0;
    padding: 1.55rem 1.2rem 1.2rem;
    border: 0;
    border-left: 1px solid #e6ecf3;
    border-radius: 0;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: hidden;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-shell {
    flex: 0 0 auto;
    min-height: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-side .appointments-service-checkout-totals .appointments-service-checkout-row[hidden] {
    display: none !important;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-side .appointments-service-checkout-totals .appointments-service-checkout-row:not(.is-payable):not(.is-total) {
    display: none;
    max-height: none;
    margin: 0;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: none;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-totals:hover .appointments-service-checkout-row:not(.is-payable):not(.is-total),
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-totals:focus-within .appointments-service-checkout-row:not(.is-payable):not(.is-total) {
    display: flex;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-side .appointments-service-checkout-totals .appointments-service-checkout-row.is-total {
    display: flex;
    max-height: none;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: none;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-services {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-add,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-payments,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-actions {
    flex: 0 0 auto;
    flex-shrink: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-side-footer {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 0 0 auto;
    margin-top: auto;
    width: 100%;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-side {
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-picker {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-list {
    max-height: none;
    min-height: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-search-shell {
    width: 100%;
    margin: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-option {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-totals:hover .appointments-service-checkout-row.is-total,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-totals:focus-within .appointments-service-checkout-row.is-total {
    margin-top: 0.2rem;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-current-card {
    padding: 1rem 1rem 0.95rem;
    border-color: #e8edf3;
    border-radius: 16px;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-current-avatar {
    width: 56px;
    height: 56px;
    font-size: 1rem;
    background: rgba(107, 99, 255, 0.12);
    color: #6b63ff;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-service {
    grid-template-columns: 4px minmax(0, 1fr) auto;
    gap: 0.85rem;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-service-accent {
    display: block;
    min-height: 68px;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-add {
    width: fit-content;
    min-height: 40px;
    padding: 0 1.05rem;
    border: 1px solid #d6dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #202939;
    font-size: 0.94rem;
    font-weight: 700;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-add.is-hidden {
    display: none !important;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-totals {
    gap: 0;
    margin-top: 0;
    padding-top: 0.85rem;
    border-top: 1px solid #e8edf3;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-row.is-payable {
    margin-top: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid #e7edf5;
    font-size: 1.04rem;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-actions {
    gap: 0.65rem;
    padding-top: 0.35rem;
    margin-top: 0;
    flex-shrink: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-actions .appointments-service-summary-more {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-submit {
    flex: 1 1 auto;
    min-height: 48px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-selector-shell {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100vw;
    }

    .appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-selector-tools {
        position: absolute;
        top: 0.85rem;
        left: 0.85rem;
        z-index: 6;
        padding: 0;
        border-right: 0;
        background: transparent;
    }

    .appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-tip-stage .appointments-service-checkout,
    .appointments-service-selector.is-pos-catalog.is-checkout.is-checkout-payment-stage .appointments-service-checkout {
        grid-template-columns: 1fr;
    }

    .appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-main {
        border-right: 0;
        border-bottom: 1px solid #eef2f6;
    }

    .appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-side {
        border-left: 0;
        border-top: 1px solid #e6ecf3;
    }

    .appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-tip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

}

.appointments-service-selector.is-pos-catalog.is-client-picker-open:not(.is-checkout) .appointments-service-selector-shell {
    grid-template-areas: "catalog cart";
    grid-template-columns: minmax(0, 65fr) minmax(300px, 35fr);
    width: 100%;
    max-width: min(100vw, 1320px);
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open:not(.is-checkout) {
    --pos-cart-column-width: clamp(300px, 35%, 420px);
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open:not(.is-checkout) .appointments-service-selector-side {
    min-width: 0;
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-pos-cart {
    display: none;
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-service-client-picker {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 0.85rem 0 1rem;
    box-shadow: none;
    overflow: hidden;
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-service-client-picker .appointments-service-selector-head {
    padding: 0 1rem 0.35rem;
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-service-client-picker .appointments-service-selector-head h2 {
    font-size: 1.15rem;
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-service-client-search-shell {
    width: calc(100% - 2rem);
    max-width: none;
    margin: 0 1rem 0.65rem;
    box-sizing: border-box;
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-service-client-list-wrap {
    min-height: 0;
    overflow: auto;
}

.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-service-client-picker .appointments-service-client-special,
.appointments-service-selector.is-pos-catalog.is-client-picker-open .appointments-service-client-picker .appointments-service-client-option {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 72px;
    padding: 0.7rem 1rem;
    box-sizing: border-box;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current {
    flex-shrink: 0;
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    min-height: 0;
    margin: 1rem 1rem 0.35rem;
    padding: 0;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "copy avatar"
        "actions avatar"
        "memberships memberships";
    align-items: start;
    gap: 0.55rem 0.85rem;
    min-height: 0;
    padding: 1rem;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-avatar--hero {
    grid-area: avatar;
    width: 56px;
    height: 56px;
    margin: 0;
    justify-self: end;
    align-self: start;
    font-size: 1.35rem;
    background: rgba(107, 91, 255, 0.12);
    color: #6b5bff;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-copy {
    grid-area: copy;
    justify-items: start;
    padding: 0;
    text-align: left;
    gap: 0.2rem;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-copy strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-copy small {
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.35;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 0;
    border: 0;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-profile-link {
    display: none;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-details {
    display: none;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-actions-toggle {
    min-height: 38px;
    min-width: 112px;
    padding: 0 0.95rem;
    border: 1.5px solid #111827;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 600;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-actions-toggle .material-symbols-outlined {
    font-size: 1.15rem;
}

.appointments-service-selector.is-pos-catalog .appointments-pos-cart-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1.25rem 1rem 2rem;
    text-align: center;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-stage {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

@media (max-width: 1100px) {
    .appointments-service-selector.is-pos-catalog {
        --pos-cart-column-width: 280px;
    }

    .appointments-service-selector.is-pos-catalog .appointments-service-selector-shell {
        grid-template-areas: "catalog cart";
        grid-template-columns: minmax(0, 1fr) var(--pos-cart-column-width, 280px);
        width: 100%;
        max-width: 100vw;
    }

    .appointments-service-selector.is-pos-catalog.is-client-picker-open:not(.is-checkout) .appointments-service-selector-shell {
        grid-template-areas: "catalog cart";
        grid-template-columns: minmax(0, 1fr) minmax(280px, 36vw);
    }

    .appointments-service-selector.is-pos-catalog.is-checkout {
        --appointments-checkout-side-width: 320px;
    }

    .appointments-pos-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .appointments-pos-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .appointments-service-selector.is-pos-catalog .appointments-pos-quick-sale-grid,
    .appointments-service-selector.is-pos-catalog .appointments-pos-service-groups .appointments-service-group-list,
    .appointments-service-selector.is-pos-catalog .appointments-pos-product-groups .appointments-service-group-list,
    .appointments-service-selector.is-pos-catalog .appointments-pos-membership-groups .appointments-service-group-list {
        grid-template-columns: 1fr;
    }
}

.appointments-service-selector-client-trigger {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 100%;
    padding: 2rem 1.2rem 1.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.appointments-service-selector-client-trigger[aria-disabled="true"] {
    cursor: default;
    pointer-events: none;
}

.appointments-service-selector-client-trigger[hidden] {
    display: none !important;
}

.appointments-service-selector.is-client-picker-open .appointments-service-selector-client-trigger,
.appointments-service-selector.is-client-picker-open .appointments-service-selector-context,
.appointments-service-selector.is-client-picker-open .appointments-service-selector-client-current {
    display: none !important;
}

.appointments-service-selector-sidecopy {
    width: 100%;
    margin-top: 4.1rem;
    text-align: center;
}

.appointments-service-selector-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1.35rem;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.1);
    color: #6b5bff;
}

.appointments-service-selector-icon .material-symbols-outlined {
    font-size: 1.8rem;
    line-height: 1;
}

.appointments-service-selector-sidecopy h3 {
    margin: 0;
    color: #1d2c44;
    font-size: 1.02rem;
    line-height: 1.35;
}

.appointments-service-selector-sidecopy p {
    margin: 0.45rem auto 0;
    max-width: 116px;
    color: #65748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

.appointments-service-selector-sidecopy[hidden],
.appointments-service-selector-client-trigger[hidden],
.appointments-service-selector-client-current[hidden] {
    display: none !important;
}

.appointments-service-selector-client-current {
    width: 100%;
    min-height: 100%;
    background: #ffffff;
}

.appointments-service-selector-client-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.12);
    color: #6b5bff;
    font-size: 1.15rem;
    font-weight: 800;
}

.appointments-service-selector-client-avatar--hero {
    width: 98px;
    height: 98px;
    margin: 0 auto;
    font-size: 2rem;
}

.appointments-service-selector-client-copy {
    display: grid;
    gap: 0.18rem;
}

.appointments-service-selector-client-copy strong {
    color: #1d2c44;
    font-size: 1.02rem;
    line-height: 1.35;
}

.appointments-service-selector-client-copy small {
    color: #65748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.appointments-service-selector-client-card {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 0.82rem;
    min-height: 100%;
    padding: 1.35rem 0 1.05rem;
}

.appointments-service-selector-client-card .appointments-service-selector-client-copy {
    justify-items: center;
    padding: 0 1.25rem;
    text-align: center;
    gap: 0.22rem;
}

.appointments-service-selector-client-card .appointments-service-selector-client-copy strong {
    display: block;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.12;
    font-weight: 700;
}

.appointments-service-selector-client-card .appointments-service-selector-client-copy small {
    display: block;
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.2;
}

.appointments-service-selector-client-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.2rem 1rem 1.1rem;
    border-bottom: 1px solid #e8eef5;
}

.appointments-service-selector-client-memberships {
    display: grid;
    gap: 0.65rem;
    width: 100%;
    padding: 0.9rem 1rem 1rem;
    margin: 0;
    border-top: 1px solid #e8eef5;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    min-height: 3.5rem;
    box-sizing: border-box;
}

.appointments-service-selector-client-card .appointments-service-selector-client-memberships {
    margin-top: 0.15rem;
}

.appointments-service-selector-client-memberships[hidden] {
    display: none !important;
}

.appointments-service-selector-client-memberships-title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    text-align: left;
}

.appointments-service-selector-client-memberships-loading,
.appointments-service-selector-client-memberships-empty {
    margin: 0;
    padding: 0.65rem 0.35rem;
    font-size: 0.82rem;
    color: #94a3b8;
    text-align: center;
}

.appointments-service-selector-client-memberships-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
    max-height: min(300px, 44vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.appointments-service-selector-client-memberships-hint {
    display: none !important;
}

.appointments-service-selector.is-pos-catalog .appointments-service-selector-client-current .appointments-service-selector-client-card .appointments-service-selector-client-memberships {
    grid-area: memberships;
    width: 100%;
    max-width: none;
    margin: 0.15rem 0 0;
    padding: 0.8rem 0.85rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
}

.appointments-service-selector-client-membership-item {
    list-style: none;
}

.appointments-service-selector-client-membership {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    width: 100%;
    padding: 0.8rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    text-align: left;
    cursor: default;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.appointments-service-selector-client-membership.is-actionable {
    cursor: pointer;
}

.appointments-service-selector-client-membership.is-actionable:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.appointments-service-selector-client-membership.is-selected {
    border-color: #2563eb;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28), 0 10px 24px rgba(37, 99, 235, 0.14);
}

.appointments-service-selector-client-membership.is-readonly,
.appointments-service-selector-client-membership.is-disabled {
    opacity: 0.88;
    background: #f8fafc;
}

.appointments-service-selector-client-membership.is-readonly.is-disabled {
    cursor: not-allowed;
}

.appointments-service-checkout-membership-note {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #0d9488;
}

.appointments-service-selector-client-membership-icon-wrap {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 11px;
    background: linear-gradient(145deg, #ede9fe 0%, #dbeafe 100%);
    color: #4338ca;
    flex-shrink: 0;
}

.appointments-service-selector-client-membership-icon-wrap .material-symbols-outlined {
    font-size: 1.35rem;
    line-height: 1;
}

.appointments-service-selector-client-membership-body {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.appointments-service-selector-client-membership-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.appointments-service-selector-client-membership-head strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.appointments-service-selector-client-membership-status {
    flex-shrink: 0;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
}

.appointments-service-selector-client-membership-status.is-available {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.appointments-service-selector-client-membership-status.is-depleted,
.appointments-service-selector-client-membership-status.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.appointments-service-selector-client-membership-metrics {
    display: grid;
    gap: 0.28rem;
}

.appointments-service-selector-client-membership-metric {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.25;
}

.appointments-service-selector-client-membership-metric .material-symbols-outlined {
    font-size: 0.95rem;
    color: #94a3b8;
}

.appointments-service-selector-client-membership-metric em {
    font-style: normal;
    font-weight: 600;
    color: #64748b;
}

.appointments-service-selector-client-membership-metric.is-credits {
    color: #0f766e;
}

.appointments-service-selector-client-membership-metric.is-credits .material-symbols-outlined {
    color: #14b8a6;
}

.appointments-service-selector-client-membership-cta {
    font-size: 0.74rem;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 0.01em;
}

.appointments-service-selector-client-membership-check {
    font-size: 1.35rem;
    color: #2563eb;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.appointments-service-selector-client-membership.is-selected .appointments-service-selector-client-membership-check {
    opacity: 1;
    transform: scale(1);
}

.appointments-service-selector-client-membership.is-selected .appointments-service-selector-client-membership-cta {
    color: #1d4ed8;
}

.appointments-service-selector-client-actions-wrap {
    position: relative;
    flex: 0 0 auto;
}

.appointments-service-selector-client-actions-toggle,
.appointments-service-selector-client-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: auto;
    min-height: 42px;
    min-width: 106px;
    padding: 0 1.05rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.appointments-service-selector-client-profile-link {
    flex: 0 0 auto;
    min-width: 96px;
    border-color: #d6deea;
    background: #ffffff;
    color: #111827;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
}

.appointments-service-selector-client-actions-toggle:hover,
.appointments-service-selector-client-profile-link:hover {
    text-decoration: none;
}

.appointments-service-selector-client-actions-toggle .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointments-service-selector-client-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: grid;
    min-width: 286px;
    padding: 0.5rem 0;
    border-radius: 16px;
    border: 1px solid #e6ecf5;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    isolation: isolate;
}

.appointments-service-selector-client-actions-menu[hidden] {
    display: none !important;
}

.appointments-service-selector-client-actions-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 42px;
    padding: 0 0.95rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 500;
    text-decoration: none;
}

.appointments-service-selector-client-actions-option:hover {
    background: #f8fafc;
}

.appointments-service-selector-client-actions-option .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-selector-client-actions-option.is-danger {
    color: #e11d48;
}

.appointments-service-selector-client-actions-divider {
    height: 1px;
    margin: 0.35rem 0.95rem;
    background: #e8eef5;
}

.appointments-service-selector-client-actions-title {
    margin: 0.3rem 0.95rem 0.35rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appointments-service-selector-client-actions-option[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.appointments-service-selector-client-profile-link[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.appointments-service-selector-client-details {
    display: grid;
    gap: 1rem;
    padding: 0 1.5rem;
    align-content: flex-start;
}

.appointments-service-selector.is-bungee-session .appointments-service-selector-shell {
    grid-template-columns: 84px minmax(0, 1fr);
    width: min(780px, 100vw);
}

/* Scale down Bungee modal on smaller screens: fills viewport, right-aligned */
@media (max-width: 1366px) {
    .appointments-service-selector.is-bungee-session {
        align-items: flex-start;
        justify-content: flex-end;
    }
    .appointments-service-selector.is-bungee-session .appointments-service-selector-shell {
        transform: scale(0.80);
        transform-origin: right top;
        height: 125vh;
        margin: 0;
    }
}

.appointments-service-selector.is-bungee-session .appointments-service-selector-side {
    display: none;
}

.appointments-service-selector.is-bungee-session .appointments-service-selector-shell {
    overflow-x: hidden;
}

.appointments-service-selector.is-bungee-session .appointments-service-selector-main {
    padding: 1.95rem 2.5rem 1.5rem;
    overflow-x: hidden;
    min-width: 0;
}

.appointments-service-selector-client-detail {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    color: #5f6f86;
    font-size: 0.93rem;
    line-height: 1.4;
}

.appointments-service-selector-client-detail .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
    color: #1f2d43;
}

.appointments-service-selector-context {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.7rem;
}

.appointments-service-selector-context[hidden] {
    display: none !important;
}

.appointments-service-selector-context small {
    display: block;
    margin-bottom: 0.18rem;
    color: #7b889d;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.appointments-service-selector-context strong {
    color: #1d2c44;
    font-size: 1rem;
}

.appointments-service-selector-main {
    display: grid;
    padding: 1.95rem 2rem 1.5rem;
    min-height: 0;
    background: #ffffff;
    overflow: hidden;
}

.appointments-service-selector-stage,
.appointments-service-client-picker,
.appointments-service-summary,
.appointments-service-checkout {
    display: grid;
    min-height: 0;
}

.appointments-service-selector-stage,
.appointments-service-summary,
.appointments-service-checkout {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(28px);
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    will-change: transform, opacity;
}

.appointments-service-selector-stage.is-view-active,
.appointments-service-summary.is-view-active,
.appointments-service-checkout.is-view-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.appointments-service-selector-stage.is-enter-from-right,
.appointments-service-summary.is-enter-from-right,
.appointments-service-checkout.is-enter-from-right {
    opacity: 0;
    transform: translateX(34px);
}

.appointments-service-selector-stage.is-enter-from-left,
.appointments-service-summary.is-enter-from-left,
.appointments-service-checkout.is-enter-from-left {
    opacity: 0;
    transform: translateX(-34px);
}

.appointments-service-selector-stage.is-exit-to-left,
.appointments-service-summary.is-exit-to-left,
.appointments-service-checkout.is-exit-to-left {
    opacity: 0;
    transform: translateX(-34px);
    pointer-events: none;
}

.appointments-service-selector-stage.is-exit-to-right,
.appointments-service-summary.is-exit-to-right,
.appointments-service-checkout.is-exit-to-right {
    opacity: 0;
    transform: translateX(34px);
    pointer-events: none;
}

.appointments-service-selector-stage[hidden],
.appointments-service-client-picker[hidden],
.appointments-service-summary[hidden],
.appointments-service-checkout[hidden] {
    display: none !important;
}

body.has-appointments-modal .appointments-bottom-grid {
    display: none !important;
}

.appointments-service-selector-stage {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1.35rem;
}

.appointments-service-checkout {
    grid-template-columns: minmax(0, 1fr) var(--appointments-checkout-side-width);
    background: #ffffff;
    min-height: 100%;
}

.appointments-service-checkout-main {
    display: grid;
    align-content: start;
    gap: 1.55rem;
    min-height: 0;
    padding: 2.05rem 1.95rem 2.2rem;
    border-right: 1px solid #e6ecf3;
    overflow: auto;
}

.appointments-service-checkout-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    gap: 0.85rem;
    min-height: 0;
    height: auto;
    max-height: 100%;
    align-self: start;
    padding: 1.55rem 1.2rem 1.2rem;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-client-picker {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-services,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-add,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-side-footer,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-totals,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-payments,
.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-actions {
    display: none !important;
}

.appointments-service-checkout-crumbs {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #8a94a6;
    font-size: 0.88rem;
    font-weight: 600;
}

.appointments-service-checkout-crumb {
    padding: 0;
    border: 0;
    background: transparent;
    color: #69778d;
    font: inherit;
    cursor: pointer;
}

.appointments-service-checkout-crumbs .is-current {
    color: #111827;
    font-weight: 700;
}

.appointments-service-checkout-copy {
    display: grid;
    gap: 0.65rem;
}

.appointments-service-checkout-copy h2 {
    margin: 0;
    color: #172033;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.appointments-service-checkout-copy h2[data-service-checkout-title] {
    font-size: 2.1rem;
    letter-spacing: -0.04em;
}

.appointments-service-checkout-copy p {
    margin: 0;
    color: #4b5563;
    font-size: 0.98rem;
    line-height: 1.45;
}

.appointments-service-checkout-tip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    width: 100%;
    max-width: 700px;
}

.appointments-service-selector.is-checkout.is-checkout-tip-stage .appointments-service-checkout-main {
    justify-items: center;
}

.appointments-service-selector.is-checkout.is-checkout-tip-stage .appointments-service-checkout-crumbs,
.appointments-service-selector.is-checkout.is-checkout-tip-stage .appointments-service-checkout-copy,
.appointments-service-selector.is-checkout.is-checkout-tip-stage .appointments-service-checkout-tip-stage {
    width: 100%;
    max-width: 700px;
}

.appointments-service-tip-card {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.42rem;
    min-height: 112px;
    padding: 0.85rem 0.9rem;
    border: 1px solid #d6dfeb;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.appointments-service-tip-card:hover {
    transform: translateY(-1px);
}

.appointments-service-tip-card.is-selected {
    border-color: #6b63ff;
    box-shadow: inset 0 0 0 1.5px #6b63ff;
}

.appointments-service-tip-card[data-tip-mode="none"] {
    gap: 0;
}

.appointments-service-tip-card[data-tip-mode="none"] small[hidden] {
    display: none !important;
}

.appointments-service-tip-card strong {
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 800;
}

.appointments-service-tip-card small {
    color: #7b8798;
    font-size: 0.84rem;
    line-height: 1.25;
    font-weight: 700;
}

.appointments-service-tip-card--custom .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-tip-card--custom small {
    margin-top: -0.1rem;
}

.appointments-service-tip-custom {
    display: none !important;
}

.appointments-service-tip-custom span {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.appointments-service-tip-custom-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 50px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 14px;
    background: #ffffff;
}

.appointments-service-tip-custom-input input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}

.appointments-service-tip-custom-input small {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
}

.appointments-service-checkout-client {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    gap: 0.85rem;
    padding: 1.2rem 1.15rem;
    border: 1px solid #e6ecf3;
    border-radius: 14px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

.appointments-service-checkout-client-copy {
    display: grid;
    gap: 0.2rem;
}

.appointments-service-checkout-client-copy strong {
    color: #1f2937;
    font-size: 0.96rem;
    line-height: 1.25;
    font-weight: 800;
}

.appointments-service-checkout-client-copy span {
    color: #778297;
    font-size: 0.86rem;
    line-height: 1.35;
}

.appointments-service-checkout-client-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: #f2efff;
    color: #7c6cff;
    font-size: 1.8rem;
    line-height: 1;
}

.appointments-service-checkout-client-shell {
    display: grid;
    align-content: start;
    gap: 0.95rem;
    flex: 0 0 auto;
}

.appointments-service-checkout-client[hidden],
.appointments-service-checkout-client-current[hidden],
.appointments-service-checkout-client-picker[hidden] {
    display: none !important;
}

.appointments-service-checkout-client-current-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1.25rem 1.2rem;
    border: 1px solid #e6ecf3;
    border-radius: 14px;
    background: #ffffff;
}

.appointments-service-checkout-client-current-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    gap: 0.85rem;
}

.appointments-service-checkout-client-current-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.appointments-service-checkout-client-current-copy strong {
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 700;
}

.appointments-service-checkout-client-current-copy span {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.35;
}

.appointments-service-checkout-client-current-avatar {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.1);
    color: #6b5bff;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.appointments-service-checkout-client-current-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.appointments-service-checkout-client-current-actions-wrap {
    position: relative;
}

.appointments-service-checkout-client-current-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 42px;
    min-width: 118px;
    padding: 0 1rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.appointments-service-checkout-client-current-actions-toggle .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointments-service-checkout-client-current-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 35;
    display: grid;
    min-width: 286px;
    padding: 0.5rem 0;
    border-radius: 16px;
    border: 1px solid #e6ecf5;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    isolation: isolate;
}

.appointments-service-checkout-client-current-actions-menu[hidden] {
    display: none !important;
}

.appointments-service-checkout-client-current-actions-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 42px;
    padding: 0 0.95rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 500;
    text-decoration: none;
}

.appointments-service-checkout-client-current-actions-option:hover {
    background: #f8fafc;
    text-decoration: none;
}

.appointments-service-checkout-client-current-actions-option .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-checkout-client-current-actions-option.is-danger {
    color: #e11d48;
}

.appointments-service-checkout-client-current-actions-divider {
    height: 1px;
    margin: 0.35rem 0.95rem;
    background: #e8eef5;
}

.appointments-service-checkout-client-current-actions-title {
    margin: 0.3rem 0.95rem 0.35rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appointments-service-checkout-client-current-actions-option[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.appointments-service-checkout-client-picker {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: 0;
    height: 100%;
    padding-top: 0.1rem;
}

.appointments-service-checkout-client-search-shell {
    max-width: none;
}

.appointments-service-checkout-client-list-wrap {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    padding-top: 0.15rem;
}

.appointments-service-checkout-client-special,
.appointments-service-checkout-client-option {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 0.85rem 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.appointments-service-checkout-client-special[hidden],
.appointments-service-checkout-client-option[hidden] {
    display: none !important;
}

.appointments-service-checkout-client-special:hover,
.appointments-service-checkout-client-option:hover {
    background: #fafbfd;
}

.appointments-service-checkout-client-special.is-empty,
.appointments-service-checkout-client-option.is-selected {
    background: #f7f8fc;
}

.appointments-service-checkout-client-special + .appointments-service-checkout-client-special {
    margin-top: 0.05rem;
}

.appointments-service-checkout-client-list {
    display: grid;
    min-height: 0;
    max-height: 420px;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid #e8eef5;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd8e6 transparent;
}

.appointments-service-checkout-client-special .appointments-service-client-special-avatar,
.appointments-service-checkout-client-option .appointments-service-client-avatar--list {
    width: 48px;
    height: 48px;
}

.appointments-service-checkout-client-special .appointments-service-client-special-copy strong,
.appointments-service-checkout-client-option .appointments-service-client-option-copy strong {
    font-size: 0.98rem;
    line-height: 1.32;
}

.appointments-service-checkout-client-option .appointments-service-client-option-copy small {
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.4;
}

/* POS ventas: lista de clientes estilo Fitune */
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-picker {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 0.85rem;
    padding-top: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-search-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-list-wrap {
    display: flex;
    flex-direction: column;
    align-content: start;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding-top: 0;
    scrollbar-width: thin;
    scrollbar-color: #cfd8e6 transparent;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-option {
    appearance: none;
    -webkit-appearance: none;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.85rem;
    min-height: 72px;
    padding: 0.8rem 1.35rem;
    border-bottom: 1px solid #e8eef5;
    box-shadow: none;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special:hover,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-option:hover {
    background: #f8fafc;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special + .appointments-service-checkout-client-special {
    margin-top: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-list {
    display: block;
    max-height: none;
    margin: 0;
    padding: 0;
    border-top: 0;
    overflow: visible;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special .appointments-service-client-special-avatar,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-option .appointments-service-client-avatar--list {
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(107, 99, 255, 0.1);
    color: #6b63ff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special .appointments-service-client-special-avatar .material-symbols-outlined {
    font-size: 1.45rem;
    line-height: 1;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special .appointments-service-client-special-copy,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-option .appointments-service-client-option-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-special .appointments-service-client-special-copy strong,
.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-option .appointments-service-client-option-copy strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.appointments-service-selector.is-pos-catalog.is-checkout .appointments-service-checkout-client-option .appointments-service-client-option-copy small {
    font-size: 0.92rem;
    font-weight: 500;
}

.appointments-service-checkout-client-list::-webkit-scrollbar,
.appointments-service-checkout-client-list-wrap::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-checkout-client-list::-webkit-scrollbar-track,
.appointments-service-checkout-client-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-checkout-client-list::-webkit-scrollbar-thumb,
.appointments-service-checkout-client-list-wrap::-webkit-scrollbar-thumb {
    background: #cfd8e6;
    border: 1px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-checkout-services {
    display: grid;
    align-content: start;
    gap: 0.95rem;
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(42vh, calc(100dvh - 19rem));
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.appointments-service-checkout-services::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-checkout-services::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-checkout-services::-webkit-scrollbar-thumb {
    background: #cfd8e6;
    border: 1px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-checkout-add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 40px;
    padding: 0 1.05rem;
    border: 1px solid #d6dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #202939;
    font-size: 0.94rem;
    font-weight: 700;
}

.appointments-service-checkout-add .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointments-service-checkout-service {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
}

.appointments-service-checkout-service-accent {
    width: 4px;
    min-height: 68px;
    border-radius: 999px;
    background: var(--service-accent, #9ad9f5);
}

.appointments-service-checkout-service-copy strong {
    display: block;
    color: #202939;
    font-size: 0.96rem;
    line-height: 1.28;
    font-weight: 800;
}

.appointments-service-checkout-service-copy small {
    display: block;
    margin-top: 0.2rem;
    color: #8390a4;
    font-size: 0.89rem;
    line-height: 1.35;
}

.appointments-service-checkout-stock-label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-top: 0.35rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    width: fit-content;
}

.appointments-service-checkout-stock-label.is-empty {
    background: #fef2f2;
    color: #b91c1c;
}

.appointments-service-checkout-service-price {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-service-checkout-totals {
    display: grid;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 1.35rem;
    border-top: 1px solid #e7edf5;
}

.appointments-service-checkout-payments {
    flex: 0 0 auto;
}

.appointments-service-checkout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #7c8798;
    font-size: 0.93rem;
}

.appointments-service-checkout-row strong {
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 800;
}

.appointments-service-checkout-row.is-total,
.appointments-service-checkout-row.is-payable {
    color: #111827;
}

.appointments-service-checkout-row.is-total strong,
.appointments-service-checkout-row.is-payable strong {
    font-weight: 800;
}

.appointments-service-checkout-row.is-total {
    margin-top: 0.2rem;
}

.appointments-service-checkout-row.is-payable {
    margin-top: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid #e7edf5;
    font-size: 1.04rem;
}

.appointments-service-checkout-side .appointments-service-checkout-totals .appointments-service-checkout-row:not(.is-payable) {
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: max-height 0.2s ease, opacity 0.18s ease, transform 0.18s ease, margin 0.18s ease;
}

.appointments-service-checkout-side:hover .appointments-service-checkout-totals .appointments-service-checkout-row:not(.is-payable),
.appointments-service-checkout-side:focus-within .appointments-service-checkout-totals .appointments-service-checkout-row:not(.is-payable) {
    max-height: 30px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.appointments-service-checkout-side:hover .appointments-service-checkout-totals .appointments-service-checkout-row.is-total,
.appointments-service-checkout-side:focus-within .appointments-service-checkout-totals .appointments-service-checkout-row.is-total {
    margin-top: 0.2rem;
}

.appointments-service-checkout-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    flex-shrink: 0;
}

.appointments-service-checkout-actions .appointments-service-summary-more-menu {
    left: 0;
    bottom: calc(100% + 0.6rem);
    z-index: 60;
}

.appointments-service-checkout-actions .appointments-service-summary-more {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
}

.appointments-service-checkout-submit {
    flex: 1 1 auto;
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: #111318;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    box-shadow: none;
}

.appointments-service-checkout-tip-stage,
.appointments-service-checkout-payment-stage,
.appointments-service-checkout-split-stage {
    display: grid;
    align-content: start;
    gap: 1.1rem;
    min-height: 0;
}

.appointments-service-checkout-tip-stage[hidden],
.appointments-service-checkout-payment-stage[hidden],
.appointments-service-checkout-split-stage[hidden] {
    display: none !important;
}

.appointments-service-checkout.is-client-picker-open .appointments-service-checkout-payments {
    display: none !important;
}

.appointments-service-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 560px;
}

.appointments-service-selector.is-checkout.is-checkout-payment-stage .appointments-service-checkout-main {
    justify-items: center;
}

.appointments-service-selector.is-checkout.is-checkout-payment-stage .appointments-service-checkout-crumbs,
.appointments-service-selector.is-checkout.is-checkout-payment-stage .appointments-service-checkout-copy,
.appointments-service-selector.is-checkout.is-checkout-payment-stage .appointments-service-checkout-payment-stage {
    width: 100%;
    max-width: 560px;
}

.appointments-service-payment-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.34rem;
    min-height: 92px;
    padding: 0.65rem 0.75rem;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.appointments-service-payment-card:hover {
    background: #fbfcfe;
    transform: translateY(-1px);
}

.appointments-service-payment-card.is-selected {
    border-color: #6b5bff;
    box-shadow: inset 0 0 0 1.5px #6b5bff;
    background: #fbfaff;
}

.appointments-service-payment-card strong {
    font-size: 0.9rem;
    line-height: 1.25;
    font-weight: 700;
}

.appointments-service-payment-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #f6f8fc;
}

.appointments-service-payment-icon .material-symbols-outlined {
    font-size: 1.12rem;
    line-height: 1;
}

.appointments-service-payment-icon[data-tone="cash"] {
    color: #2d9b3f;
}

.appointments-service-payment-icon[data-tone="gift"] {
    color: #2d9b3f;
}

.appointments-service-payment-icon[data-tone="split"] {
    color: #111827;
}

.appointments-service-payment-icon[data-tone="other"] {
    color: #6b5bff;
}

.appointments-service-checkout-split-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 46px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 14px;
    background: #ffffff;
    color: #5f56ff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-service-checkout-split-add .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-checkout-split-list {
    display: grid;
    gap: 0.85rem;
}

.appointments-service-checkout-split-empty {
    padding: 1rem 1.1rem;
    border: 1px dashed #d8dfeb;
    border-radius: 14px;
    color: #64748b;
    font-size: 0.95rem;
}

.appointments-service-checkout-split-item,
.appointments-service-checkout-payment-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    background: #ffffff;
}

.appointments-service-checkout-split-item-copy,
.appointments-service-checkout-payment-line-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.appointments-service-checkout-split-item-copy strong,
.appointments-service-checkout-payment-line-copy span {
    color: #111827;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
}

.appointments-service-checkout-split-item-copy small,
.appointments-service-checkout-payment-line-copy small {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.35;
}

.appointments-service-checkout-split-item-side,
.appointments-service-checkout-payment-line-side {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 auto;
}

.appointments-service-checkout-split-item-side strong,
.appointments-service-checkout-payment-line-side strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.appointments-service-checkout-payments {
    display: grid;
    gap: 0.65rem;
}

.appointments-service-checkout-payment-remove {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.appointments-service-checkout-payment-remove:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #111827;
}

.appointments-service-checkout-payment-remove .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

body.has-appointments-payment-modal {
    overflow: hidden;
}

.appointments-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 5500;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.28);
}

.appointments-payment-modal[hidden] {
    display: none !important;
}

.appointments-payment-dialog {
    position: relative;
    width: min(var(--appointments-payment-dialog-width), calc(100vw - 2rem));
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
    padding: 1.9rem 2rem 1.8rem;
}

.appointments-payment-dialog--cash {
    width: min(var(--appointments-payment-cash-width), calc(100vw - 2rem));
}

.appointments-payment-dialog--giftcard {
    width: min(var(--appointments-payment-giftcard-width), calc(100vw - 2rem));
}

.appointments-payment-dialog--split {
    width: min(var(--appointments-payment-split-width), calc(100vw - 2rem));
}

.appointments-payment-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-payment-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 800;
}

.appointments-payment-body {
    display: grid;
    justify-items: center;
    gap: 1.35rem;
    padding: 1.85rem 0 1.35rem;
}

.appointments-payment-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: min(100%, 320px);
    min-height: 56px;
    padding: 0.65rem 1rem;
    border: 1px solid #d8dfea;
    border-radius: 12px;
    background: #f8fafc;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.appointments-payment-display:focus-within {
    border-color: #d8dfea;
    background: #f8fafc;
    box-shadow: none;
}

.appointments-payment-display-prefix {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.appointments-payment-display-value {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: right;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.appointments-payment-display-value::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.appointments-payment-display-value:focus,
.appointments-payment-display-value:focus-visible,
.admin-body .appointments-payment-display .appointments-payment-display-value:focus,
.admin-body .appointments-payment-display input.appointments-payment-display-value:focus,
.admin-body .appointments-payment-display input.appointments-payment-display-value:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

span.appointments-payment-display-value {
    display: block;
    text-align: right;
    cursor: text;
}

.appointments-payment-display[data-payment-cash-display],
.appointments-payment-display:has([data-payment-cash-display-value]) {
    cursor: text;
}

.appointments-payment-suggestions {
    display: flex;
    gap: 0.7rem;
    width: 100%;
    padding-bottom: 0.15rem;
    overflow: auto;
    scrollbar-width: thin;
}

.appointments-payment-suggestion {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-payment-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    width: min(390px, 100%);
}

.appointments-payment-key {
    display: grid;
    place-items: center;
    min-height: 58px;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-payment-key .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-payment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-payment-actions--cash {
    align-items: flex-end;
}

.appointments-payment-action-copy {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.appointments-payment-meta {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.35;
}

.appointments-payment-actions--giftcard,
.appointments-payment-actions--split-picker {
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.appointments-payment-summary {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
}

.appointments-payment-submit,
.appointments-payment-cancel {
    min-height: 52px;
    padding: 0 1.6rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-payment-submit {
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-payment-submit:disabled {
    background: #b5b8c0;
    cursor: not-allowed;
}

.appointments-payment-cancel {
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-payment-body--giftcard {
    justify-items: stretch;
}

.appointments-payment-field {
    display: grid;
    gap: 0.7rem;
}

.appointments-payment-field span {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.appointments-payment-field input {
    min-height: 54px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 0.98rem;
}

.appointments-payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1.35rem;
}

.appointments-service-selector-head {
    display: grid;
    gap: 1rem;
}

.appointments-service-selector-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.appointments-client-create-modal {
    position: fixed;
    inset: 0;
    z-index: 1920;
    display: block;
    padding: 0;
    background: rgba(7, 12, 22, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.appointments-client-create-modal[hidden] {
    display: none !important;
}

.appointments-client-create-dialog {
    position: relative;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.appointments-client-create-close {
    display: none;
}

.appointments-client-create-close .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-client-create-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.appointments-client-create-modal.is-drawer {
    background: transparent;
    opacity: 0;
    transition: opacity 0.24s ease;
}

.appointments-client-create-modal.is-drawer .appointments-client-create-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(1240px, calc(100vw - 48px));
    max-width: 100%;
    height: 100vh;
    border-left: 1px solid rgba(214, 220, 232, 0.9);
    box-shadow: 0 24px 50px rgba(10, 16, 26, 0.22);
    transform: translateX(48px);
    opacity: 0;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
    pointer-events: auto;
    overflow: visible;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer .appointments-client-create-dialog {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    width: min(1120px, calc(100vw - 48px));
    max-width: 100%;
    box-sizing: border-box;
    background: transparent;
    border-left: 0;
    box-shadow: none;
    overflow: hidden;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-client-view .appointments-client-create-dialog {
    width: min(1280px, calc(100vw - 48px));
    max-width: 100%;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-checkout-view .appointments-client-create-dialog {
    width: min(var(--appointments-checkout-drawer-width), calc(100vw - 48px));
    max-width: 100%;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer .appointments-client-create-frame {
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.appointments-client-create-modal.is-drawer.is-open {
    opacity: 1;
}

.appointments-client-create-modal.is-drawer.is-open .appointments-client-create-dialog {
    transform: translateX(0);
    opacity: 1;
}

.appointments-group-modal {
    z-index: 1910;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(7, 12, 22, 0.54);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.appointments-group-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

.appointments-group-modal .appointments-client-create-dialog {
    position: relative;
    width: min(980px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    height: auto;
    border-radius: 24px;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: 0 34px 70px rgba(15, 23, 42, 0.32);
}

.appointments-group-dialog {
    z-index: 1;
}

.appointments-group-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 2rem);
}

.appointments-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.45rem 1.5rem 1.1rem;
    border-bottom: 1px solid #dce6f0;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.appointments-group-kicker {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: #2563eb;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.appointments-group-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.5rem;
    line-height: 1.08;
}

.appointments-group-header p {
    margin: 0.45rem 0 0;
    max-width: 58ch;
    color: #56657a;
    font-size: 0.95rem;
    line-height: 1.5;
}

.appointments-group-close {
    width: 42px;
    height: 42px;
    border: 1px solid #d5dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.appointments-group-close:hover {
    background: #eef5ff;
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

.appointments-group-close .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-group-body {
    display: grid;
    gap: 1rem;
    padding: 1.2rem 1.5rem 1rem;
    overflow: auto;
}

.appointments-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.appointments-group-grid-span-2 {
    grid-column: span 2;
}

.appointments-group-members-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.15rem;
}

.appointments-group-members-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
}

.appointments-group-members-head p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.appointments-group-error {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 16px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.appointments-group-members {
    display: grid;
    gap: 0.9rem;
}

.appointments-group-member {
    border: 1px solid #dce6f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
    padding: 1rem;
}

.appointments-group-member-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.appointments-group-member-head strong {
    color: #0f172a;
    font-size: 1rem;
}

.appointments-group-member-field-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    min-height: 1rem;
    padding-right: 7.25rem;
    margin-bottom: 0;
}

.appointments-group-member-field-head label {
    margin-bottom: 0;
    line-height: 1;
}

.appointments-group-member-field-spacer {
    display: none;
}

.appointments-group-member-create-client {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    color: #4f46e5;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.appointments-group-member-create-client:hover,
.appointments-group-member-create-client:focus-visible {
    color: #312e81;
}

.appointments-group-member-remove {
    border: 0;
    background: transparent;
    color: #dc2626;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-group-member-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.appointments-group-hint {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.appointments-group-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #dce6f0;
    background: #ffffff;
}

.appointments-group-count {
    color: #475569;
    font-size: 0.95rem;
    font-weight: 800;
}

.appointments-group-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .appointments-group-modal {
        padding: 0.7rem;
    }

    .appointments-group-modal .appointments-client-create-dialog {
        width: min(100vw - 1.4rem, 980px);
        max-height: calc(100vh - 1.4rem);
        border-radius: 20px;
    }

    .appointments-group-grid,
    .appointments-group-member-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointments-group-grid-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .appointments-group-header,
    .appointments-group-body,
    .appointments-group-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .appointments-group-members-head,
    .appointments-group-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointments-group-footer-actions {
        width: 100%;
    }

    .appointments-group-footer-actions > * {
        width: 100%;
    }
}

.appointments-sales-summary-tools {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.85rem 0.75rem 0.85rem 0.5rem;
    background: transparent;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-ready .appointments-sales-summary-tools,
.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-ready .appointments-client-create-frame {
    opacity: 1;
    transform: translateX(0);
}

.appointments-sales-summary-tool {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #22324b;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.appointments-sales-summary-loading {
    padding: 2.5rem 2.75rem;
    color: #4b5563;
    font-size: 0.95rem;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-embed-topbar {
    display: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-pro-header,
.appointments-client-create-modal[data-sales-summary-modal] .clients-pro-title-wrap {
    display: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-empty-card,
.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-box {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin-top: 0.8rem;
    box-shadow: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-panel,
.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-layout,
.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-main {
    height: 100%;
    min-height: 100%;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-sticky-head-appointments {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-appointments-shell {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.appointments-client-create-modal[data-sales-summary-modal] .clients-hub-appointments-shell::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.appointments-sales-summary-tool .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.appointments-sales-summary-tool-close {
    cursor: pointer;
}

.appointments-sales-summary-tool:hover,
.appointments-sales-summary-tool:focus-visible {
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.appointments-sales-summary-tool.is-static {
    color: #2a3850;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-client-create-dialog {
    grid-template-columns: minmax(0, 1fr);
    width: min(480px, calc(100vw - 78px));
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -18px 0 44px rgba(15, 23, 42, 0.14);
    overflow: visible;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-client-create-body {
    position: relative;
    min-height: 100%;
    padding: 0;
    overflow: auto;
    background: #ffffff;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-quick-summary-drawer.is-embedded-sale-detail {
    grid-template-columns: 72px minmax(0, 1fr);
    width: 100%;
    min-height: 100%;
    box-shadow: none;
    border-left: 0;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-quick-summary-drawer.is-embedded-sale-detail .appointments-quick-summary-tabs {
    padding: 2rem 0.55rem;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-quick-summary-drawer.is-embedded-sale-detail .appointments-quick-summary-tab {
    justify-content: center;
    padding: 0;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-quick-summary-drawer.is-embedded-sale-detail .appointments-quick-summary-tab > span:not(.material-symbols-outlined) {
    display: none;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-quick-summary-drawer.is-embedded-sale-detail .appointments-quick-summary-body {
    padding: 1.35rem 1.15rem 1.5rem;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-sales-summary-tools {
    position: absolute;
    top: 0.8rem;
    left: -3.4rem;
    z-index: 4;
    display: grid;
    place-items: center;
    padding: 0;
    opacity: 1;
    transform: none;
    background: transparent;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer.is-sale-detail-view .appointments-sales-summary-tool {
    width: 44px;
    height: 44px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    pointer-events: auto;
    cursor: pointer;
}

.appointments-client-create-modal[data-sales-summary-modal].is-drawer .appointments-client-create-close {
    display: none !important;
}

.appointments-client-create-modal.is-drawer.is-open .appointments-client-create-dialog {
    transform: translateX(0);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close {
    position: absolute;
    top: 0.9rem;
    left: -42px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #d8dde6;
    background: #f4f6f8;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    z-index: 6;
    cursor: pointer;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.10),
        0 1px 2px rgba(15, 23, 42, 0.05);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close::before,
.appointments-client-create-modal.is-drawer .appointments-client-create-close::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2.5px;
    border-radius: 999px;
    background: #111827;
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close::before {
    transform: rotate(45deg);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close::after {
    transform: rotate(-45deg);
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close .material-symbols-outlined {
    display: none;
}

.appointments-client-create-modal.is-drawer .appointments-client-create-close:hover {
    background: #ffffff;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.13),
        0 1px 2px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.appointments-service-picker-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    min-height: 42px;
    padding: 0 1rem;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2d43;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-service-picker-back[hidden] {
    display: none !important;
}

.appointments-service-picker-back .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-search-shell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 56px;
    max-width: 450px;
    padding: 0 1.05rem;
    border: 1px solid #6b5bff;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.appointments-service-search-shell .material-symbols-outlined {
    color: #22324b;
    font-size: 1.35rem;
    line-height: 1;
}

.appointments-service-search-shell:focus-within {
    border-color: #6b5bff;
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.1);
}

.appointments-service-search-shell input {
    width: 100%;
    min-height: 52px;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    color: #22324b;
    font-size: 0.96rem;
}

.appointments-service-search-shell input:focus,
.appointments-service-search-shell input:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
}

.appointments-service-groups {
    width: 100%;
    max-width: 450px;
    min-height: 0;
    overflow: auto;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: #b8cbe4 transparent;
}

.appointments-service-groups::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-groups::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-groups::-webkit-scrollbar-thumb {
    background: #b8cbe4;
    border: 1px solid #f8fbff;
    border-radius: 999px;
}

.appointments-service-groups::-webkit-scrollbar-thumb:hover {
    background: #9fb7d7;
}

.appointments-service-client-picker {
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 1rem;
    min-height: 0;
    height: 100%;
    padding-top: 1.25rem;
    background: #ffffff;
    box-shadow: inset -1px 0 0 #e8eef5;
}

.appointments-service-client-picker .appointments-service-selector-head {
    padding: 0 1.6rem;
}

.appointments-service-client-picker .appointments-service-selector-head h2 {
    font-size: 1.28rem;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.appointments-service-client-search-shell {
    width: calc(100% - 3.2rem);
    max-width: 450px;
    margin: 0 1.6rem;
    box-sizing: border-box;
}

.appointments-service-client-list-wrap {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
    padding-top: 0.1rem;
    align-content: start;
}

.appointments-service-client-picker .appointments-service-client-special,
.appointments-service-client-picker .appointments-service-client-option {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 80px;
    margin: 0;
    padding: 0.8rem 1.55rem;
    border: 0;
    border-bottom: 1px solid #e8eef5;
    border-radius: 0 !important;
    background: #ffffff;
    color: #111827;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.18s ease;
}

.appointments-service-client-picker .appointments-service-client-special[hidden],
.appointments-service-client-picker .appointments-service-client-option[hidden] {
    display: none !important;
}

.appointments-service-client-picker .appointments-service-client-special:hover,
.appointments-service-client-picker .appointments-service-client-option:hover {
    background: #f8fafc;
}

.appointments-service-client-picker .appointments-service-client-special.is-empty,
.appointments-service-client-picker .appointments-service-client-option.is-selected {
    background: #f7f8fc;
}

.appointments-service-client-picker .appointments-service-client-special-avatar,
.appointments-service-client-picker .appointments-service-client-avatar--list {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(107, 91, 255, 0.1);
    color: #6b5bff;
    font-size: 1.15rem;
    font-weight: 800;
}

.appointments-service-client-picker .appointments-service-client-special-avatar .material-symbols-outlined {
    font-size: 1.6rem;
    line-height: 1;
}

.appointments-service-client-picker .appointments-service-client-special-copy,
.appointments-service-client-picker .appointments-service-client-option-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.appointments-service-client-picker .appointments-service-client-special-copy strong,
.appointments-service-client-picker .appointments-service-client-option-copy strong {
    color: #111827;
    font-size: 1rem;
    line-height: 1.35;
}

.appointments-service-client-picker .appointments-service-client-option-copy small {
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.45;
}

.appointments-service-client-list {
    display: block;
    min-height: 0;
    height: 100%;
    max-height: none;
    margin-top: 0;
    padding-top: 0.25rem;
    border-top: 1px solid #e8eef5;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd8e6 transparent;
}

.appointments-service-client-list .appointments-service-client-option {
    width: 100%;
}

.appointments-service-client-list::-webkit-scrollbar,
.appointments-service-client-list-wrap::-webkit-scrollbar {
    width: 6px;
}

.appointments-service-client-list::-webkit-scrollbar-track,
.appointments-service-client-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-client-list::-webkit-scrollbar-thumb,
.appointments-service-client-list-wrap::-webkit-scrollbar-thumb {
    background: #cfd8e6;
    border: 1px solid #ffffff;
    border-radius: 999px;
}

.appointments-service-client-list::-webkit-scrollbar-thumb:hover,
.appointments-service-client-list-wrap::-webkit-scrollbar-thumb:hover {
    background: #b8c5d8;
}

.appointments-service-summary {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1.4rem;
    min-height: 0;
}

.appointments-service-summary-head {
    position: relative;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid #e7edf5;
}

.appointments-service-selector.is-editing .appointments-service-summary {
    gap: 1.4rem;
}

.appointments-service-selector.is-editing .appointments-service-summary-head {
    align-self: stretch;
    width: auto;
    margin: -1.95rem -2rem 0;
    padding: 0.95rem 2rem;
    border-radius: 0;
    background: var(--appointment-summary-head-color, #3b73e6);
    border-bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.28rem;
    min-height: 0;
}

.appointments-service-selector.is-editing.is-status-no-show .appointments-service-summary-head {
    background: var(--appointment-summary-head-color, #df173f);
}

.appointments-service-selector.is-editing .appointments-service-summary-head h2 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.12;
}

.appointments-service-selector.is-editing .appointments-service-summary-head h2 .material-symbols-outlined {
    display: none;
}

.appointments-service-selector.is-editing .appointments-service-summary-head > p {
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    min-width: 0;
}

.appointments-service-summary-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    color: #111827;
    font-size: 1.25rem;
    line-height: 1.15;
}

.appointments-service-selector.is-editing .appointments-service-summary-head h2,
.appointments-service-selector.is-editing .appointments-service-summary-head p {
    color: #ffffff;
}

.appointments-service-summary-head .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-summary-head p {
    margin: 0.45rem 0 0;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 600;
}

.appointments-service-summary-status {
    position: absolute;
    top: 1.55rem;
    right: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.appointments-service-selector.is-editing .appointments-service-summary-status-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
}

.appointments-service-selector.is-editing .appointments-service-summary-status {
    min-height: 36px;
    padding: 0 0.92rem;
    font-size: 0.92rem;
    white-space: nowrap;
}

.appointments-service-selector.is-editing .appointments-service-summary-status .material-symbols-outlined {
    font-size: 1rem;
}

/* Responsive tuneups for calendar and summary header */
@media (max-width: 1200px) {
    .appointments-calendar-event-core,
    .appointments-calendar-event-plain {
        padding: 0.22rem 0.52rem 0.2rem 0.26rem;
        gap: 0.13rem;
    }

    .appointments-calendar-event strong {
        font-size: 0.78rem;
    }

    .appointments-calendar-event span {
        font-size: 0.74rem;
    }

    .appointments-calendar-event-price-current {
        font-size: 0.7rem;
    }
}

@media (max-width: 1024px) {
    .appointments-calendar-head-days,
    .appointments-calendar-days {
        grid-template-columns: repeat(7, minmax(126px, 1fr));
    }

    .appointments-calendar-event {
        border-radius: 5px;
    }

    .appointments-calendar-event-core,
    .appointments-calendar-event-plain {
        padding: 0.19rem 0.44rem 0.16rem 0.24rem;
        gap: 0.1rem;
    }

    .appointments-calendar-event strong {
        font-size: 0.72rem;
        line-height: 1.06;
    }

    .appointments-calendar-event-client {
        font-size: 0.69rem;
    }

    .appointments-calendar-event-service {
        font-size: 0.66rem;
    }

    .appointments-calendar-event-price-current {
        font-size: 0.64rem;
    }

    .appointments-calendar-event-price-original {
        font-size: 0.54rem;
    }
}

@media (max-width: 768px) {
    .admin-page-appointments-calendar {
        --appointments-toolbar-sticky-height: 56px;
        --appointments-hour-height: 72px;
    }
    .appointments-toolbar {
        gap: 0.35rem !important;
        flex-wrap: nowrap !important;
    }
    .appointments-toolbar-cluster,
    .appointments-toolbar-nav {
        width: auto;
        flex-wrap: nowrap !important;
    }
    .appointments-toolbar-nav {
        flex: 1 1 auto;
        min-width: 0;
    }
    .appointments-toolbar-cluster {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.25rem !important;
    }
    .appointments-toolbar-chip {
        display: inline-flex !important;
        padding: 0 0.5rem !important;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .appointments-centers-filter,
    .appointments-members-filter {
        display: none !important;
    }
    .appointments-toolbar-icon-prev,
    .appointments-toolbar-icon-next {
        padding: 0 0.35rem !important;
        min-width: 28px;
    }
    .appointments-toolbar-cluster .appointments-centers-trigger,
    .appointments-toolbar-cluster .appointments-members-trigger {
        display: none !important;
    }
    .appointments-toolbar-filters-trigger {
        display: inline-flex !important;
    }
    .appointments-toolbar-date-group {
        flex: 1 1 auto;
        min-width: max-content;
        width: auto !important;
    }
    .appointments-toolbar-range {
        min-width: max-content;
        font-size: 0.75rem !important;
    }
    .appointments-toolbar-date-group-with-picker .appointments-week-picker {
        flex: 1 1 auto !important;
        display: flex;
        min-width: 0;
    }
    .appointments-toolbar-date-group .appointments-toolbar-range-button {
        flex: 1 1 auto;
        min-width: 0;
        width: 100% !important;
        overflow: visible;
        white-space: nowrap;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range-button > span:first-child {
        overflow: visible;
        white-space: nowrap;
        min-width: 0;
    }

    .appointments-calendar-head,
    .appointments-calendar-grid-wrap {
        grid-template-columns: 56px minmax(0, 1fr);
    }
    .appointments-calendar-panel {
        height: calc(100vh - var(--appointments-sticky-top) - var(--appointments-toolbar-sticky-height) - 16px);
        min-height: 0;
    }
    .appointments-calendar-board {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    .appointments-calendar-grid-wrap {
        overflow-y: visible;
    }
    .appointments-calendar-time-rail {
        position: sticky;
        top: 0;
        align-self: start;
    }

    .appointments-calendar-head-days,
    .appointments-calendar-days {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .appointments-calendar-event {
        min-height: 30px;
    }

    .appointments-calendar-event-core,
    .appointments-calendar-event-plain {
        padding: 0.16rem 0.34rem 0.12rem 0.2rem;
        gap: 0.08rem;
    }

    .appointments-calendar-event strong {
        font-size: 0.66rem;
    }

    .appointments-calendar-event span {
        font-size: 0.62rem;
    }

    .appointments-calendar-event-service {
        font-size: 0.6rem;
    }

    .appointments-calendar-event-price-current {
        font-size: 0.58rem;
    }
}

@media (max-width: 640px) {
    .appointments-service-selector.is-editing .appointments-service-summary-head {
        width: min(100%, 34rem);
    }
}

/* Final calendar overflow guards */
.appointments-calendar-panel,
.appointments-calendar-topp,
.appointments-calendar-board {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .appointments-calendar-panel,
    .appointments-calendar-topp,
    .appointments-calendar-board {
        max-width: none;
    }
}

/* Default grid (desktop) � overridden by mobile rules below */
.appointments-calendar-head,
.appointments-calendar-grid-wrap {
    grid-template-columns: 86px minmax(0, 1fr);
}

.appointments-calendar-head-days,
.appointments-calendar-days {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.appointments-calendar-day-title {
    min-width: 0;
    padding: 0 0.85rem;
    gap: 0.5rem;
}

.appointments-calendar-day-title small {
    font-size: 0.82rem;
}

.appointments-calendar-day-title strong {
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .appointments-calendar-head,
    .appointments-calendar-grid-wrap {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .appointments-calendar-day-title {
        padding: 0 0.4rem;
        gap: 0.32rem;
    }

    .appointments-calendar-day-chip {
        width: 32px;
        height: 32px;
        font-size: 0.82rem;
    }

    .appointments-calendar-day-title small {
        font-size: 0.74rem;
    }

    .appointments-calendar-day-title strong {
        font-size: 0.82rem;
    }
}

/* Mobile: horizontally scrollable calendar with proper column widths */
@media (max-width: 768px) {
    .admin-page-appointments-calendar .appointments-calendar-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .appointments-calendar-topp,
    .appointments-calendar-board {
        min-width: 780px;
    }
    .appointments-calendar-head,
    .appointments-calendar-grid-wrap {
        grid-template-columns: 52px repeat(7, minmax(100px, 1fr));
        min-width: 780px;
    }
    .appointments-calendar-head-days,
    .appointments-calendar-days {
        grid-template-columns: repeat(7, minmax(100px, 1fr)) !important;
        min-width: 700px;
    }

    /* Bungee session detail modal � mobile fullscreen */
    .appointments-service-selector {
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    .appointments-service-selector-shell {
        grid-template-columns: 1fr !important;
        width: calc(100vw - 80px) !important;
        max-width: calc(100vw - 80px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        margin-left: auto !important;
        border-radius: 12px 0 0 12px !important;
        overflow: hidden !important;
        transform: none !important;
    }
    .appointments-service-selector.is-bungee-session .appointments-service-selector-shell {
        transform: none !important;
        height: 100dvh !important;
    }
    /* Close button � outside modal, top-left */
    .appointments-service-selector-tools {
        position: absolute !important;
        top: 12px !important;
        right: auto !important;
        left: 8px !important;
        z-index: 10 !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
    }
    .appointments-service-selector-tool {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
        color: #333 !important;
    }
    .appointments-service-selector-tool .material-symbols-outlined {
        font-size: 1.3rem !important;
    }
    .appointments-service-selector-side {
        display: none !important;
    }
    .appointments-service-selector-main {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
    }
    /* Summary head � full width, no border radius */
    .appointments-service-summary-head {
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .appointments-service-selector.is-editing .appointments-service-selector-main {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .appointments-service-selector.is-editing .appointments-service-summary-head {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 0;
    }
    .appointments-service-selector.is-editing .appointments-service-summary-head h2 {
        font-size: 1rem;
    }
    .appointments-service-selector.is-editing .appointments-service-summary-head > p {
        font-size: 0.82rem;
    }
    /* Force full height on all parent containers */
    .admin-body,
    .admin-layout,
    .admin-content {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Attendees table � 2 columns on mobile (hide payment + collect cols, keep name + attendance) */
    .bungee-session-attendees-table-head,
    .bungee-session-attendees-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }
    .bungee-session-attendees-table-head span:nth-child(2) {
        display: none;
    }
    .bungee-session-attendees-payment,
    .bungee-session-attendees-collect {
        display: none;
    }
    .bungee-session-attendees-panel {
        padding: 0 0.75rem;
    }
}
    .appointments-calendar-head-spacer {
        position: sticky;
        left: 0;
        z-index: 5;
        min-height: 52px;
        font-size: 0.7rem;
    }
    .appointments-calendar-time-rail {
        position: sticky;
        left: 0;
        z-index: 4;
    }
    .appointments-calendar-day-title {
        padding: 0 0.5rem;
        gap: 0.4rem;
        min-height: 52px;
    }
    .appointments-calendar-day-title small {
        font-size: 0.72rem;
    }
    .appointments-calendar-day-title strong {
        font-size: 0.82rem;
    }
    .appointments-calendar-day-chip {
        width: 32px;
        height: 32px;
        font-size: 0.82rem;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .appointments-calendar-topp,
    .appointments-calendar-board {
        min-width: 680px;
    }
    .appointments-calendar-head,
    .appointments-calendar-grid-wrap {
        grid-template-columns: 44px repeat(7, minmax(90px, 1fr));
        min-width: 680px;
    }
    .appointments-calendar-head-days,
    .appointments-calendar-days {
        grid-template-columns: repeat(7, minmax(90px, 1fr)) !important;
        min-width: 630px;
    }
    .appointments-calendar-head-spacer {
        min-height: 44px;
        font-size: 0.6rem;
    }
    .appointments-calendar-day-title {
        padding: 0 0.35rem;
        gap: 0.3rem;
        min-height: 44px;
    }
    .appointments-calendar-day-title small {
        font-size: 0.65rem;
    }
    .appointments-calendar-day-title strong {
        font-size: 0.75rem;
    }
    .appointments-calendar-day-chip {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        border-radius: 8px;
    }
}

.appointments-service-summary-status .material-symbols-outlined {
    font-size: 1rem;
}

.appointments-service-summary-status-wrap {
    position: absolute;
    top: 1.55rem;
    right: 2rem;
}

.appointments-service-summary-status-wrap[hidden] {
    display: none !important;
}

.appointments-service-summary-status {
    position: static;
    top: auto;
    right: auto;
    justify-content: center;
    min-width: 160px;
    padding: 0 1.1rem;
    box-shadow: none;
}

.appointments-service-summary-status-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 192px;
    padding: 0.7rem 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    transform: translateY(-25px);
}

.appointments-service-selector.is-editing.is-status-no-show .appointments-service-summary-status-menu {
    top: 100% !important;
    transform: translateY(-25px);
}

.appointments-service-summary-status-menu[hidden] {
    display: none !important;
}

.appointments-service-summary-status-wrap.is-status-readonly .appointments-service-summary-status {
    cursor: default;
    pointer-events: none;
}

.appointments-service-summary-status-wrap.is-status-readonly [data-service-summary-status-chevron] {
    display: none;
}

.appointments-service-summary-status-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 0.85rem;
    min-height: 46px;
    padding: 0 1rem;
    background: transparent;
    border: 0;
    color: #111827;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
}

.appointments-service-summary-status-option[hidden] {
    display: none !important;
}

.appointments-service-summary-status-option:hover {
    background: #f6f8fc;
}

.appointments-service-summary-status-option .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-summary-status-option .appointments-service-summary-status-check {
    display: none;
    justify-self: end;
    font-size: 1.2rem;
}

.appointments-service-summary-status-option.is-danger {
    color: #e11d48;
}

.appointments-service-summary-status-option.is-selected {
    font-weight: 700;
}

.appointments-service-summary-status-option.is-selected .appointments-service-summary-status-check {
    display: inline-flex;
}

.appointments-service-summary-status-undo {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    min-height: 46px;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
}

.appointments-service-summary-status-undo:hover {
    background: #f6f8fc;
}

.appointments-service-summary-status-undo[hidden] {
    display: none !important;
}

.appointments-service-summary-status-undo .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-summary-body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.35rem;
}

.appointments-service-summary-section-head h3 {
    margin: 0 0 1rem;
    color: #111827;
    font-size: 1rem;
    line-height: 1.2;
}

.appointments-service-summary-list {
    display: grid;
    gap: 0.72rem;
}

.appointments-service-summary-add-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.appointments-service-summary-add-row[hidden],
.appointments-service-summary-add[hidden] {
    display: none !important;
}

.appointments-service-summary-duration-total {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.appointments-service-summary-duration-total[hidden] {
    display: none !important;
}

.appointments-service-summary-card {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem 0.95rem 0.8rem 0;
    border-radius: 14px;
    transition: background-color 0.18s ease;
}

.appointments-service-summary-card:hover,
.appointments-service-summary-card:focus-within {
    background: #f6f8fc;
}

.appointments-service-summary-card-accent {
    width: 4px;
    min-height: 72px;
    border-radius: 999px;
    background: var(--service-accent, #9ad9f5);
}

.appointments-service-summary-card-copy strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    line-height: 1.35;
    order: 1;
}

.appointments-service-summary-card-copy small {
    display: block;
    margin-top: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    order: 2;
}

.appointments-service-summary-card-copy {
    display: grid;
    gap: 0.28rem;
}

.appointments-service-summary-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    order: 3;
}

.appointments-service-summary-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.78rem;
    border: 1px solid #d8dfe9;
    border-radius: 999px;
    background: #ffffff;
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.1;
}

.appointments-service-summary-card-price {
    align-self: flex-start;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
}

.appointments-service-summary-card-side {
    display: grid;
    justify-items: end;
    gap: 0.65rem;
}

.appointments-service-summary-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.appointments-service-summary-card:hover .appointments-service-summary-card-actions,
.appointments-service-summary-card:focus-within .appointments-service-summary-card-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.appointments-service-summary-card-action {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #111827;
    border-radius: 999px;
}

.appointments-service-summary-card-action:hover {
    background: rgba(15, 23, 42, 0.06);
}

.appointments-service-summary-card-action .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-service-summary-card-action.is-danger {
    color: #111827;
}

.appointments-service-summary-add {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    margin-top: 0;
    padding: 0 1rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-service-summary-add .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointments-service-summary-comments {
    margin-top: 1.6rem;
}

.appointments-service-summary-comments-box {
    display: block;
    width: 100%;
    padding: 1rem 1.1rem;
    border: 0;
    border-radius: 12px;
    background: #eef0ff;
    color: #111827;
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
    white-space: pre-wrap;
    cursor: pointer;
}

.appointments-service-summary-comments-box.is-clickable:hover {
    background: #e7eafe;
}

.appointments-service-summary-footer {
    display: grid;
    gap: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e7edf5;
}

.appointments-service-summary-totals {
    display: grid;
    gap: 0.28rem;
}

.appointments-service-summary-total-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.appointments-service-summary-total-row strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.appointments-service-summary-total-row span {
    justify-self: end;
    color: #334155;
    font-size: 0.98rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.appointments-service-summary-total-row[data-summary-checkout-only][hidden] {
    display: none !important;
}

.appointments-service-summary-total-row.is-discount strong,
.appointments-service-summary-total-row.is-discount span {
    color: #15803d;
}

.appointments-service-summary-total-row.is-total span,
.appointments-service-summary-total-row.is-total strong {
    color: #111827;
    font-weight: 900;
}

.appointments-service-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appointments-service-summary-total strong,
.appointments-service-summary-total span {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.appointments-service-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.appointments-service-summary-actions.is-checkout-only .appointments-service-summary-secondary {
    flex: 1 1 auto;
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-service-summary-actions.is-no-show-state .appointments-service-summary-secondary {
    flex: 1 1 auto;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-more,
.appointments-service-summary-secondary,
.appointments-service-summary-primary {
    min-height: 44px;
    border-radius: 999px;
    font-size: 0.96rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-service-summary-more {
    width: 40px;
    min-width: 40px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-secondary,
.appointments-service-summary-primary {
    min-width: 0;
    padding: 0 1.55rem;
}

.appointments-service-summary-actions:not(.is-checkout-only) .appointments-service-summary-secondary,
.appointments-service-summary-actions:not(.is-checkout-only) .appointments-service-summary-primary {
    flex: 1 1 0;
}

.appointments-service-summary-secondary {
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-secondary.is-primary-action {
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-service-summary-primary {
    border: 0;
    background: #111111;
    color: #ffffff;
}

.appointments-service-summary-more[hidden] {
    display: none !important;
}

.appointments-service-summary-secondary[hidden],
.appointments-service-summary-primary[hidden] {
    display: none !important;
}

.appointments-service-summary-more-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    z-index: 28;
    display: grid;
    width: min(320px, calc(100vw - 2rem));
    padding: 1rem 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
    border: 1px solid #e8eef6;
    overflow: hidden;
    isolation: isolate;
}

.appointments-service-summary-more-menu[hidden] {
    display: none !important;
}

.appointments-service-summary-more-title {
    display: block;
    margin: 0;
    padding: 0 1.2rem 0.8rem;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.appointments-service-summary-more-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.68rem 1.2rem;
    border: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.35;
}

.appointments-service-summary-more-item[hidden] {
    display: none !important;
}

.appointments-service-summary-more-item:hover {
    background: #f7f9fc;
}

.appointments-service-summary-more-item.is-section-start {
    position: relative;
    margin-top: 0.45rem;
    padding-top: 1rem;
}

.appointments-service-summary-more-item.is-section-start::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.2rem;
    right: 1.2rem;
    height: 1px;
    background: #e7edf5;
}

.appointments-service-summary-more-item > span {
    min-width: 0;
    white-space: normal;
}

.appointments-service-summary-more-item > span:only-child {
    grid-column: 1 / -1;
}

.appointments-service-summary-more-item .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
    margin-top: 0.08rem;
}

.appointments-service-summary-more-item.is-danger {
    color: #e11d48;
}

.appointments-service-summary-more-divider {
    height: 1px;
    margin: 0.55rem 1.2rem;
    background: #e7edf5;
}

.appointments-service-summary-more-divider[hidden] {
    display: none !important;
}

.appointments-comment-modal {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.3);
}

.appointments-comment-modal[hidden] {
    display: none !important;
}

body.has-appointments-comment-modal {
    overflow: hidden;
}

body.has-appointments-tip-modal {
    overflow: hidden;
}

.appointments-comment-dialog {
    position: relative;
    width: min(720px, calc(100vw - 2rem));
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
    padding: 2rem 2rem 1.9rem;
    isolation: isolate;
}

.appointments-discard-modal {
    position: fixed;
    inset: 0;
    z-index: 5300;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(7px);
}

.appointments-tip-modal {
    position: fixed;
    inset: 0;
    z-index: 5400;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.28);
}

.appointments-tip-modal[hidden] {
    display: none !important;
}

.appointments-tip-dialog {
    position: relative;
    width: min(720px, calc(100vw - 2rem));
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
    padding: 2rem 2rem 1.8rem;
}

.appointments-tip-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-tip-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
}

.appointments-tip-body {
    display: grid;
    justify-items: center;
    gap: 1.15rem;
    padding: 1.9rem 0 1.2rem;
}

.appointments-tip-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: min(100%, 320px);
    min-height: 56px;
    padding: 0.65rem 1rem;
    border: 1px solid #d8dfea;
    border-radius: 12px;
    background: #f8fafc;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.appointments-tip-display:focus-within {
    border-color: #d8dfea;
    background: #f8fafc;
    box-shadow: none;
}

.appointments-tip-display-prefix {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.appointments-tip-display-value {
    flex: 1 1 auto;
    min-width: 0;
    color: #111827;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: right;
}

.appointments-tip-display-value.is-empty {
    color: #94a3b8;
}

.appointments-tip-kind-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    background: #f3f5f9;
}

.appointments-tip-kind {
    display: grid;
    place-items: center;
    width: 60px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 1.35rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-tip-kind.is-active {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #d8dfeb;
}

.appointments-tip-kind .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.appointments-tip-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    width: min(390px, 100%);
}

.appointments-tip-key {
    display: grid;
    place-items: center;
    min-height: 58px;
    border: 1px solid #d8dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.appointments-tip-key .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

.appointments-tip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.2rem;
}

.appointments-tip-summary {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.appointments-tip-submit {
    min-width: 120px;
    min-height: 48px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-tip-submit[disabled] {
    background: #bdbdbd;
    cursor: not-allowed;
}

.appointments-discard-modal[hidden] {
    display: none !important;
}

body.has-appointments-discard-modal {
    overflow: hidden;
}

.appointments-discard-dialog {
    position: relative;
    width: min(560px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    overflow: hidden;
}

.appointments-discard-dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #f59e0b 0%, #fb7185 48%, #7c3aed 100%);
}

.appointments-discard-close {
    position: absolute;
    top: 1.05rem;
    right: 1.05rem;
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.72);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

.appointments-discard-close:hover,
.appointments-discard-close:focus-visible {
    border-color: #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
}

.appointments-discard-close .material-symbols-outlined {
    font-size: 1.55rem;
}

.appointments-discard-head {
    padding: 1.95rem 4.4rem 1.45rem 2rem;
    border-bottom: 1px solid #eef2f7;
    background:
        radial-gradient(circle at 20% 0%, rgba(245, 158, 11, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.appointments-discard-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.85rem;
    padding: 0.34rem 0.7rem;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.appointments-discard-head-main {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.appointments-discard-icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.32);
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.18);
}

.appointments-discard-icon .material-symbols-outlined {
    font-size: 1.75rem;
}

.appointments-discard-head-copy p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.45;
}

.appointments-discard-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.appointments-discard-body {
    max-width: none;
    padding: 1.35rem 2rem 0;
}

.appointments-discard-body p {
    margin: 0;
    color: #334155;
    font-size: 1rem;
    line-height: 1.5;
}

.appointments-discard-note {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    margin-top: 1.05rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.45;
}

.appointments-discard-note .material-symbols-outlined {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.18rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.appointments-discard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0;
    padding: 1.35rem 2rem 1.85rem;
}

.appointments-discard-keep,
.appointments-discard-cancel,
.appointments-discard-confirm {
    min-width: 156px;
    min-height: 46px;
    padding: 0 1.45rem;
    border-radius: 999px;
    font-size: 0.96rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.appointments-discard-keep,
.appointments-discard-cancel {
    border: 0;
    background: linear-gradient(135deg, #111827 0%, #020617 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.22);
}

.appointments-discard-confirm {
    border: 1px solid #fecaca;
    background: #ffffff;
    color: #b91c1c;
    box-shadow: none;
}

.appointments-discard-keep:hover,
.appointments-discard-keep:focus-visible,
.appointments-discard-cancel:hover,
.appointments-discard-cancel:focus-visible {
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.28);
    transform: translateY(-1px);
}

.appointments-discard-confirm:hover,
.appointments-discard-confirm:focus-visible {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .appointments-discard-modal {
        padding: 1rem;
    }

    .appointments-discard-head {
        padding: 1.55rem 3.8rem 1.2rem 1.25rem;
    }

    .appointments-discard-head-main {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .appointments-discard-icon {
        width: 40px;
        height: 40px;
    }

    .appointments-discard-body {
        padding: 1.15rem 1.25rem 0;
    }

    .appointments-discard-actions {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .appointments-discard-keep,
    .appointments-discard-cancel,
    .appointments-discard-confirm {
        width: 100%;
        min-width: 0;
    }
}

.appointments-comment-close {
    position: absolute;
    top: 1.15rem;
    right: 1.2rem;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointments-comment-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 800;
}

.appointments-comment-body {
    margin-top: 2rem;
}

.appointments-comment-body textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem 1.05rem;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    resize: vertical;
    color: #111827;
    font-size: 1rem;
    line-height: 1.5;
}

.appointments-comment-body p {
    margin: 0.45rem 0 0;
    color: #6b7280;
    font-size: 0.92rem;
}

.appointments-comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.9rem;
}

.appointments-comment-delete,
.appointments-comment-submit {
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
}

.appointments-comment-delete {
    border: 1px solid #f3c3cf;
    background: #ffffff;
    color: #e11d48;
}

.appointments-comment-submit {
    border: 0;
    background: #0f1014;
    color: #ffffff;
}

.appointments-service-summary-secondary {
    padding: 0 1.4rem;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #111827;
}

.appointments-service-summary-primary {
    flex: 1 1 auto;
    padding: 0 1.5rem;
    border: 0;
    background: #0f1014;
    color: #ffffff;
}

.appointments-service-group + .appointments-service-group {
    margin-top: 1.95rem;
}

.appointments-service-group[hidden],
.appointments-service-option[hidden] {
    display: none !important;
}

.appointments-service-group-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.95rem;
}

.appointments-service-group-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    line-height: 1.3;
}

.appointments-service-group-head span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #f0f3f8;
    color: #66758b;
    font-size: 0.82rem;
    font-weight: 700;
}

.appointments-service-group-list {
    display: grid;
    gap: 0.75rem;
}

.appointments-service-option {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding: 0.95rem 1rem 0.95rem 0.5rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.appointments-service-option:hover {
    background: #f8fafc;
}

.appointments-service-option.is-selected {
    background: #f3f4f6;
}

.appointments-service-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(107, 91, 255, 0.22);
}

.appointments-service-option-accent {
    width: 4px;
    height: 100%;
    min-height: 70px;
    border-radius: 999px;
    background: var(--service-accent, #9ad9f5);
}

.appointments-service-option-copy strong {
    display: block;
    color: #1b2940;
    font-size: 0.94rem;
    line-height: 1.32;
}

.appointments-service-option-copy small {
    display: block;
    margin-top: 0.2rem;
    color: #6c788d;
    font-size: 0.88rem;
}

.appointments-service-option-price {
    display: flex;
    justify-content: flex-end;
    color: #1f2d43;
    align-self: center;
    font-size: 0.98rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.appointments-service-price-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.14rem;
    max-width: 100%;
    white-space: normal;
}

.appointments-service-price-stack.is-checkout,
.appointments-service-price-stack.is-summary {
    gap: 0.1rem;
}

.appointments-service-price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 0.48rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #eef7ff 0%, #ecfdf3 100%);
    color: #166534;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.appointments-service-price-original,
.appointments-service-price-current {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointments-service-price-original {
    color: #7b8798;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.appointments-service-price-current {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.appointments-service-price-current.is-offer {
    color: #166534;
}

.appointments-service-price-stack.is-option .appointments-service-price-original {
    font-size: 0.72rem;
}

.appointments-service-price-stack.is-option .appointments-service-price-current {
    font-size: 0.98rem;
}

.appointments-service-price-stack.is-checkout .appointments-service-price-original,
.appointments-service-price-stack.is-summary .appointments-service-price-original {
    font-size: 0.7rem;
}

.appointments-service-price-stack.is-checkout .appointments-service-price-current,
.appointments-service-price-stack.is-summary .appointments-service-price-current {
    font-size: 0.92rem;
}

@media (max-width: 1180px) {
    .appointments-page-head,
    .appointments-calendar-summary,
    .appointments-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointments-toolbar-cluster {
        width: 100%;
    }

    .appointments-toolbar-cluster-right {
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .admin-page-appointments-calendar {
        --appointments-hour-height: 88px;
        --appointments-sticky-top: 76px;
        --appointments-toolbar-sticky-height: 74px;
    }

    .appointments-toolbar {
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }
    .appointments-toolbar-nav,
    .appointments-toolbar-cluster {
        width: auto;
        flex-wrap: nowrap !important;
    }
    .appointments-toolbar-nav {
        flex: 1 1 auto;
        min-width: 0;
    }
    .appointments-toolbar-cluster {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.25rem !important;
    }
    .appointments-toolbar-chip {
        display: inline-flex !important;
        padding: 0 0.5rem !important;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .appointments-centers-filter,
    .appointments-members-filter {
        display: none !important;
    }
    .appointments-toolbar-icon-prev,
    .appointments-toolbar-icon-next {
        padding: 0 0.35rem !important;
        min-width: 28px;
    }
    .appointments-toolbar-cluster .appointments-centers-trigger,
    .appointments-toolbar-cluster .appointments-members-trigger {
        display: none !important;
    }
    .appointments-toolbar-cluster-right .appointments-toolbar-icon,
    .appointments-toolbar-cluster-right .appointments-toolbar-view-select {
        display: none !important;
    }
    .appointments-toolbar-filters-trigger {
        display: inline-flex !important;
    }
    .appointments-toolbar-cluster {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem !important;
    }
    .appointments-toolbar-date-group {
        width: auto !important;
        flex: 1 1 auto;
        min-width: max-content;
    }
    .appointments-toolbar-range {
        width: 100% !important;
        flex: 1 1 auto;
        min-width: max-content;
        font-size: 0.75rem !important;
    }
    .appointments-toolbar-date-group .appointments-toolbar-range-button {
        flex: 1 1 auto;
        min-width: 0;
        width: 100% !important;
        overflow: visible;
        white-space: nowrap;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range-button > span:first-child {
        overflow: visible;
        white-space: nowrap;
        min-width: 0;
    }

    .appointments-toolbar-date-group-with-picker .appointments-toolbar-range-button {
        width: 100% !important;
    }
    .appointments-toolbar-chip {
        width: auto !important;
        flex: 0 0 auto;
        padding: 0 0.75rem;
        font-size: 0.8rem;
    }
    .appointments-toolbar-actions {
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        width: 100%;
    }
    .appointments-toolbar-add-trigger {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding: 0.55rem 0.5rem;
        font-size: 0.8rem;
        gap: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range-button {
        overflow: visible;
        white-space: nowrap;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range-button > span:first-child {
        overflow: visible;
        white-space: nowrap;
        min-width: 0;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range-button .material-symbols-outlined {
        flex: 0 0 auto;
    }
    .appointments-toolbar-add-trigger::before {
        font-size: 0.8rem;
    }
    .appointments-toolbar-bungee-trigger {
        font-size: 0.8rem !important;
        color: #fff !important;
    }
    .appointments-toolbar-bungee-trigger::before,
    .appointments-toolbar-bungee-trigger::after {
        display: none !important;
        content: none !important;
    }

    .appointments-centers-filter,
    .appointments-members-filter {
        width: 100%;
    }

    .appointments-centers-menu,
    .appointments-members-menu {
        right: 0;
        left: 0;
        width: 100%;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range {
        min-width: 0;
        flex: 1 1 auto;
    }

    .appointments-toolbar-date-group .appointments-toolbar-icon {
        flex: 0 0 42px;
        width: 42px;
        min-height: 42px;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range {
        font-size: 0.78rem !important;
        min-height: 42px;
    }

    .appointments-toolbar-date-group .appointments-toolbar-range-button .material-symbols-outlined {
        font-size: 0.95rem !important;
    }

    .appointments-calendar-head,
    .appointments-calendar-grid-wrap {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .appointments-calendar-head-days,
    .appointments-calendar-days {
        grid-template-columns: repeat(7, minmax(90px, 1fr));
    }

    .appointments-editor-time-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointments-service-selector {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        justify-content: flex-start;
        background: rgba(12, 18, 29, 0.16);
    }

    .appointments-service-selector-shell {
        grid-template-columns: minmax(0, 1fr);
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        background: #ffffff;
    }

    .appointments-service-selector-tools {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.85rem 1rem;
        border-right: 0;
        border-bottom: 1px solid #e7edf5;
    }

    .appointments-service-selector-side {
        padding: 1rem 1.25rem 1.2rem;
        background: #f7f8fb;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid #e4eaf2;
    }

    .appointments-service-selector-sidecopy {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 0;
        text-align: left;
    }

    .appointments-service-selector-icon {
        margin: 0;
        flex: 0 0 auto;
    }

    .appointments-service-selector-sidecopy p {
        margin-left: 0;
        max-width: none;
    }

    .appointments-service-selector-main {
        padding: 1.35rem 1.25rem 1.25rem;
        background: #ffffff;
    }

    .appointments-service-selector.is-checkout .appointments-service-selector-shell {
        grid-template-columns: 1fr;
        width: 100vw;
    }

    .appointments-service-checkout {
        grid-template-columns: 1fr;
    }

    .appointments-service-checkout-main,
    .appointments-service-checkout-side {
        padding: 1.35rem 1.25rem;
    }

    .appointments-service-checkout-main {
        border-right: 0;
        border-bottom: 1px solid #e6ecf3;
    }

    .appointments-service-checkout-tip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointments-service-search-shell {
        max-width: none;
    }

    .appointments-service-groups {
        max-width: none;
    }

    .appointments-service-option {
        grid-template-columns: 4px minmax(0, 1fr);
    }

    .appointments-service-option-price {
        grid-column: 2;
        font-size: 1.05rem;
    }

    .appointments-bottom-grid {
        top: 68px;
        width: 100vw;
    }

    .appointments-editor-panel {
        border-radius: 0;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--lh-bg);
    color: var(--lh-text);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

p {
    margin-top: 0;
}

.container {
    width: min(1180px, calc(100% - 2.2rem));
    margin-inline: auto;
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #cfd6df;
    border-radius: 8px;
    background: #fff;
    color: #18212b;
    padding: 0.7rem 0.8rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(31, 198, 215, 0.7);
    box-shadow: 0 0 0 3px rgba(31, 198, 215, 0.18);
}

textarea {
    min-height: 92px;
    resize: vertical;
}

.btn,
button,
[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn,
button.btn,
[type='submit'].btn {
    color: #fff;
    background: var(--lh-cyan);
    font-weight: 700;
}

.btn:hover,
.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible,
[type='submit'].btn:hover,
[type='submit'].btn:focus-visible {
    background: var(--lh-cyan-2);
}

.btn-outline {
    background: #fff;
    color: #12343a;
    border-color: rgba(18, 52, 58, 0.34);
}

.btn-outline:hover {
    background: rgba(18, 52, 58, 0.08);
}

.btn-danger {
    background: #b23a3a;
}

.btn-danger:hover {
    background: #8f2f2f;
}

.w-full {
    width: 100%;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.panel {
    border-radius: 12px;
    border: 1px solid var(--lh-line);
    background: #fff;
    box-shadow: 0 10px 24px rgba(22, 33, 48, 0.07);
    padding: 1.2rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    color: #556172;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.flash-wrap {
    margin-top: 1rem;
    display: grid;
    gap: 0.6rem;
}

.flash {
    border-radius: 10px;
    border: 1px solid;
    padding: 0.72rem 0.85rem;
    font-size: 0.9rem;
}

.flash-success {
    color: #215139;
    background: #e8f4ec;
    border-color: #bedbc9;
}

.flash-warning {
    color: #7a4f1d;
    background: #fceddf;
    border-color: #efcc9d;
}

.flash-danger {
    color: #7d2e2e;
    background: #faecec;
    border-color: #e6bcbc;
}

.flash-info {
    color: #1f4860;
    background: #eaf3fa;
    border-color: #bdd3e4;
}

.empty {
    border: 1px dashed #cad2dc;
    border-radius: 10px;
    padding: 0.85rem;
    color: #586576;
    font-size: 0.9rem;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 0.62rem;
    border-bottom: 1px solid #dfe5ec;
    font-size: 0.88rem;
    vertical-align: top;
}

th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #4f5d6f;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.48rem;
    font-weight: 700;
}

.badge-pending {
    background: #faecd9;
    color: #8a5920;
}

.badge-confirmed {
    background: #dff4f6;
    color: #1c6a73;
}

.badge-completed {
    background: #e2f2e5;
    color: #255b3d;
}

.badge-canceled {
    background: #f7e3e3;
    color: #8b3333;
}

.badge-channel {
    background: #e7f7fb;
    color: #1e6170;
}

.lh-scroll-up {
    position: fixed;
    right: 22px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid rgba(127, 214, 224, 0.55);
    background: linear-gradient(160deg, #27d1df 0%, #17b0c2 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(11, 28, 38, 0.34);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.92);
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s ease, box-shadow 0.2s ease;
    z-index: 145;
    cursor: pointer;
}

.admin-body.admin-page-team-staff .clients-pro-main {
    display: grid;
    gap: 1.2rem;
}

.admin-body.admin-page-team-staff .team-staff-header {
    margin: 0.25rem 0 0;
}

.admin-body.admin-page-team-staff .team-staff-list-panel,
.admin-body.admin-page-team-staff .team-staff-form-panel {
    border-radius: 18px;
    border: 1px solid #d9e1ec;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-toolbar {
    grid-template-columns: minmax(0, 1.45fr) auto minmax(250px, 0.6fr);
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-table {
    min-width: 980px;
}

.admin-body.admin-page-team-staff .team-staff-contact-copy,
.admin-body.admin-page-team-staff .team-staff-state-copy,
.admin-body.admin-page-team-staff .team-staff-centers {
    display: grid;
    gap: 0.28rem;
}

.admin-body.admin-page-team-staff .team-staff-contact-copy strong {
    color: #23344c;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-contact-copy small,
.admin-body.admin-page-team-staff .team-staff-state-copy small,
.admin-body.admin-page-team-staff .team-staff-center-muted {
    color: #708199;
    font-size: 0.88rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-name-cell {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.42rem 0.9rem;
}

.admin-body.admin-page-team-staff .team-staff-list-open-target {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.admin-body.admin-page-team-staff .team-staff-list-open-target:focus-visible {
    outline: 2px solid rgba(109, 87, 255, 0.45);
    outline-offset: 3px;
    border-radius: 10px;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    position: relative;
    isolation: isolate;
    pointer-events: auto;
    user-select: none;
    cursor: default;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-blocker {
    position: absolute;
    inset: -3px;
    z-index: 6;
    display: block;
    cursor: default;
    background: transparent;
    pointer-events: auto;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-indicator,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #d8dee8;
    background: #ffffff;
    color: #8b95a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-indicator .material-symbols-outlined,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut .material-symbols-outlined {
    font-size: 0.82rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-indicator.is-active,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut.is-active {
    border-color: #cfd7e5;
    background: #f7f9fc;
    color: #2f3a49;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-indicator::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-indicator::after,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::after,
.team-staff-hub-pay-indicator::before,
.team-staff-hub-pay-indicator::after,
.team-staff-hub-pay-shortcut::before,
.team-staff-hub-pay-shortcut::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 30;
}

.admin-body.admin-page-team-staff .team-staff-list-pay-indicator::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::before,
.team-staff-hub-pay-indicator::before,
.team-staff-hub-pay-shortcut::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    transform: translate(-50%, 6px);
    padding: 0.42rem 0.62rem;
    border-radius: 10px;
    background: #06080f;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(6, 8, 15, 0.24);
}

.admin-body.admin-page-team-staff .team-staff-list-pay-indicator::after,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut::after,
.team-staff-hub-pay-indicator::after,
.team-staff-hub-pay-shortcut::after {
    content: '';
    bottom: calc(100% + 4px);
    transform: translate(-50%, 6px);
    width: 10px;
    height: 10px;
    background: #06080f;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.admin-body.admin-page-team-staff .team-staff-list-pay-indicator:hover::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-indicator:hover::after,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:hover::before,
.admin-body.admin-page-team-staff .team-staff-list-pay-shortcut:hover::after,
.team-staff-hub-pay-indicator:hover::before,
.team-staff-hub-pay-indicator:hover::after,
.team-staff-hub-pay-shortcut:hover::before,
.team-staff-hub-pay-shortcut:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.admin-body.admin-page-team-staff .team-staff-centers {
    gap: 0.42rem;
}

.admin-body.admin-page-team-staff .team-staff-center-chip {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #d8e0ec;
    background: #f7f9fc;
    color: #24344a;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-body.admin-page-team-staff .team-staff-state-copy {
    justify-items: start;
}

.admin-body.admin-page-team-staff .team-staff-actions-cell {
    text-align: right;
    position: relative;
    overflow: visible;
}

.admin-body.admin-page-team-staff .team-staff-row-menu {
    position: relative;
    z-index: 2;
}

.admin-body.admin-page-team-staff .team-staff-row-menu[open] {
    z-index: 24;
}

.admin-body.admin-page-team-staff .team-staff-row-menu summary {
    min-height: 44px;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    user-select: none;
}

.admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-options-menu {
    min-width: 180px;
    top: auto;
    bottom: calc(100% + 0.42rem);
    right: 0;
}

.admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-options-menu form {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-option-item {
    display: flex;
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-list-row:focus-visible {
    outline: 2px solid #6358e7;
    outline-offset: -2px;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav-spaced {
    gap: 0.55rem;
    padding: 0.95rem 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav-spaced > a {
    border: 1px solid #e4e8f1;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav-spaced > a.is-active {
    border-color: #ddd9ff;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-shell {
    align-content: start;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane {
    display: grid;
    gap: 1.55rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-head h2 {
    margin: 0;
    color: #101a2b;
    font-size: 1.55rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-edit-btn {
    min-height: 46px;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    font-size: 0.96rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-hub-edit-btn .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section {
    display: grid;
    gap: 1rem;
    padding-top: 1.55rem;
    border-top: 1px solid #e6ebf2;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section h3 {
    margin: 0;
    color: #101a2a;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 850;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-subsection {
    display: grid;
    gap: 0.78rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-subsection h4 {
    margin: 0;
    color: #101a2a;
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section-head a {
    color: #5f56ff;
    font-size: 0.92rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-pane-section-head a:hover {
    text-decoration: underline;
}

.admin-body.admin-page-team-staff .team-staff-hub-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.8rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card {
    display: grid;
    gap: 0.28rem;
    align-content: start;
    min-width: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card small {
    color: #101a2a;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card strong {
    color: #5f6f84;
    font-size: 0.98rem;
    line-height: 1.45;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-fact-card span {
    color: #6a7b91;
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-color-value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--staff-hub-color, #dfe6ef);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 1px rgba(18, 28, 43, 0.08);
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-centers-list {
    display: grid;
    gap: 0.9rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.88rem;
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.admin-body.admin-page-team-staff .team-staff-hub-center-card.is-empty {
    grid-template-columns: minmax(0, 1fr);
}

.admin-body.admin-page-team-staff .team-staff-hub-center-media {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: #eef3fb;
    color: #1c2d45;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-media.is-photo {
    background: #ffffff;
    color: transparent;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-copy strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #132033;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 850;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-copy span {
    color: #5f6f84;
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-center-badge {
    min-height: 24px;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #edf1ff;
    color: #445fc0;
    font-size: 0.76rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-form-panel {
    padding: 1.5rem;
}

.admin-body.admin-page-team-staff .team-staff-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.admin-body.admin-page-team-staff .team-staff-form-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.admin-body.admin-page-team-staff .team-staff-form-head p {
    margin: 0.38rem 0 0;
    color: #66768c;
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-body.admin-page-team-staff .team-staff-editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 0.35rem;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 3400;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 1rem 7rem;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-panel {
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-header {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 -1rem 1rem;
    padding: 0.9rem 1.35rem 0.95rem;
    align-items: center;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #e5e7eb;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-title h1 {
    font-size: clamp(1.35rem, 1.6vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-title p,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-actions-float {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-actions {
    gap: 0.8rem;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-options summary,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-close,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save {
    min-height: 48px;
    padding: 0.72rem 1.25rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-close {
    border-color: #d5dde9;
    background: #ffffff;
    color: #101828;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save:hover {
    background: #000000;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save.is-disabled-save,
.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-editor-save[disabled] {
    opacity: 0.45;
    background: #111111;
    color: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-panel {
    margin-bottom: 0;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-nav {
    position: sticky;
    top: 5.35rem;
    max-height: calc(100vh - 6.4rem);
    overflow-y: auto;
    overflow-x: visible;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.admin-body.admin-page-team-staff .team-staff-editor-modal-shell .team-staff-profile-actions-float {
    z-index: 3401;
}

.admin-body.admin-page-team-staff .team-staff-editor-header {
    align-items: flex-start;
}

.admin-body.admin-page-team-staff .team-staff-editor-title h1 {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-editor-title h1.clients-pro-title-edit small {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    margin-top: 0.25rem;
    padding: 0.34rem 0.9rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f1f5ff 0%, #e5eeff 100%);
    border: 1px solid #ccdafb;
    color: #34548e;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 24px rgba(74, 110, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.admin-body.admin-page-team-staff .team-staff-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.admin-body.admin-page-team-staff .team-staff-editor-options summary,
.admin-body.admin-page-team-staff .team-staff-editor-close,
.admin-body.admin-page-team-staff .team-staff-editor-save {
    min-height: 42px;
    padding: 0.58rem 1rem;
    font-size: 0.9rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-panel {
    padding: 1rem 1.05rem 1.15rem;
    border-radius: 18px;
    border: 1px solid #d9e1ec;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-profile-shell {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.45rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav h3 {
    margin-top: 0.45rem;
    font-size: 0.86rem;
    text-transform: none;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav h3:first-child {
    margin-top: 0;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav a {
    justify-content: space-between;
    gap: 0.65rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-nav {
    position: sticky;
    top: calc(68px + 1rem);
    max-height: calc(100vh - 84px);
    overflow-y: auto;
}

.admin-body.admin-page-team-staff .team-staff-profile-section {
    display: grid;
    gap: 0.78rem;
    scroll-margin-top: 84px;
}

.admin-body.admin-page-team-staff .team-staff-profile-section[hidden],
.admin-body.admin-page-team-staff .team-staff-editor-avatar-wrap[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-profile-form {
    gap: 0.85rem;
    max-width: 980px;
}

.admin-body.admin-page-team-staff .team-staff-profile-span-2 {
    grid-column: 1 / -1;
}

.admin-body.admin-page-team-staff .team-staff-profile-basic-grid {
    align-items: start;
}

.admin-body.admin-page-team-staff .team-staff-profile-form textarea {
    min-height: 122px;
}

.admin-body.admin-page-team-staff .team-staff-date-display {
    cursor: pointer;
}

.admin-body.admin-page-team-staff .team-staff-phone-group {
    grid-template-columns: 92px minmax(0, 1fr);
}

.admin-body.admin-page-team-staff .team-staff-profile-form .clients-pro-divider {
    margin: 1.3rem 0 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-form h3 {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-profile-form .clients-pro-muted {
    max-width: 720px;
}

.admin-body.admin-page-team-staff .team-staff-profile-form .clients-pro-field-help {
    margin-top: 0.34rem;
}

.admin-body.admin-page-team-staff .team-staff-nav-link-label {
    min-width: 0;
}

.admin-body.admin-page-team-staff .team-staff-nav-count {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #25354d;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-services-pane {
    display: grid;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-services-search {
    position: relative;
    display: block;
}

.admin-body.admin-page-team-staff .team-staff-services-search .material-symbols-outlined {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #737d8d;
    pointer-events: none;
}

.admin-body.admin-page-team-staff .team-staff-services-search input {
    min-height: 48px;
    padding-left: 3.15rem;
    border-radius: 12px;
}

.admin-body.admin-page-team-staff .team-staff-services-list {
    display: grid;
}

.admin-body.admin-page-team-staff .team-staff-service-group[hidden],
.admin-body.admin-page-team-staff .team-staff-service-row[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-service-group {
    display: grid;
}

.admin-body.admin-page-team-staff .team-staff-service-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e7ebf1;
}

.admin-body.admin-page-team-staff .team-staff-service-row.is-group {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
}

.admin-body.admin-page-team-staff .team-staff-service-row.is-readonly {
    grid-template-columns: minmax(0, 1fr) auto;
    cursor: default;
}

.admin-body.admin-page-team-staff .team-staff-services-pane.is-readonly .team-staff-service-row.is-group {
    background: #f8fafc;
    padding-inline: 0.85rem;
    border-radius: 10px;
    border-bottom: 0;
    margin-top: 0.35rem;
}

.admin-body.admin-page-team-staff .team-staff-services-pane.is-readonly .team-staff-service-option.is-readonly {
    padding-inline: 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-services-pane.is-readonly .team-staff-service-check {
    display: none;
}

.admin-body.admin-page-team-staff .team-staff-service-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-check input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #6a5af9;
}

.admin-body.admin-page-team-staff .team-staff-service-check input:focus,
.admin-body.admin-page-team-staff .team-staff-service-check input:focus-visible {
    box-shadow: none;
    border-color: transparent;
}

.admin-body.admin-page-team-staff .team-staff-service-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.admin-body.admin-page-team-staff .team-staff-service-copy strong {
    color: #141d2b;
    font-size: 0.98rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-copy small {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-service-price {
    color: #141d2b;
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-services-empty {
    margin-top: 0.25rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-section {
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-card {
    max-width: 860px;
    display: grid;
    gap: 0.9rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid #dde4ee;
    border-radius: 14px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-lead {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-lead .material-symbols-outlined {
    margin-top: 0.02rem;
    color: #293140;
    font-size: 1.12rem;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-lead p,
.admin-body.admin-page-team-staff .team-staff-payroll-copy-empty {
    margin: 0;
    color: #273444;
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-empty {
    color: #667085;
    font-size: 0.86rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls {
    max-width: 680px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .form-group {
    margin: 0;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .btn .material-symbols-outlined {
    font-size: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card {
    max-width: 860px;
    display: grid;
    gap: 1.05rem;
    padding: 0.1rem 0 0;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card.is-disabled {
    opacity: 0.78;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card .team-payroll-form-grid,
.admin-body.admin-page-team-staff .team-staff-payroll-editor-card .team-payroll-section {
    max-width: 860px;
}

.admin-body.admin-page-team-staff .team-staff-payroll-editor-card .sales-tips-divider {
    margin: 0.1rem 0 0;
}

.admin-body.admin-page-team-staff .team-staff-payroll-note {
    max-width: 860px;
    padding: 1rem 1.05rem;
    border: 1px solid #e3e7ef;
    border-radius: 12px;
    background: #fafbfc;
}

.admin-body.admin-page-team-staff .team-staff-payroll-note .team-commissions-copy {
    gap: 0.28rem;
}

.admin-body.admin-page-team-staff .team-staff-payroll-note .team-commissions-copy small {
    font-size: 0.87rem;
}

.admin-body.admin-page-team-staff .team-staff-commissions-section {
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-commissions-date-card,
.admin-body.admin-page-team-staff .team-staff-commissions-editor-card {
    max-width: 860px;
}

.admin-body.admin-page-team-staff .team-staff-commissions-date-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.admin-body.admin-page-team-staff .team-staff-commissions-date-card strong[data-staff-commission-effective-label] {
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-commissions-editor-card {
    gap: 0;
}

.admin-body.admin-page-team-staff .team-staff-commission-row-services {
    padding-bottom: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-row {
    padding: 1.55rem 0;
}

.admin-body.admin-page-team-staff .team-staff-commission-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-row .sales-tips-switch {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-body {
    display: grid;
    gap: 1.55rem;
    padding: 0.32rem 0 1.6rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-body[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-editor[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields[hidden],
.admin-body.admin-page-team-staff [data-staff-service-commission-summary-secondary][hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.55rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.95rem;
    border: 1px solid #d5dbe7;
    border-radius: 12px;
    background: #fff;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell span {
    color: #506174;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell input {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.admin-body.admin-page-team-staff .team-staff-commission-value-shell input:focus {
    outline: none;
    box-shadow: none;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 0.28rem;
    padding: 0.22rem;
    border: 1px solid #dde3ec;
    border-radius: 12px;
    background: #f3f5f8;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.72rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #161f2f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn .material-symbols-outlined {
    font-size: 1.18rem;
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn.is-active {
    border-color: #d8dde7;
    background: #ffffff;
    color: #171f30;
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

.admin-body.admin-page-team-staff .team-staff-commission-type-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary {
    display: grid;
    gap: 0.85rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-copy {
    display: grid;
    gap: 0.75rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-copy > strong,
.admin-body.admin-page-team-staff .team-staff-service-commission-calculation > strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.95rem;
    padding: 1.05rem 1.25rem;
    border: 1px solid #dde3ee;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-card:disabled {
    cursor: default;
    opacity: 0.7;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-card .material-symbols-outlined {
    color: #1f2937;
    font-size: 1.45rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-text span {
    color: #1f2937;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-text small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-summary-action {
    color: #635bff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-editor {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid #e4e9f1;
    border-radius: 14px;
    background: #fbfcfe;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
    gap: 1rem;
    padding: 0.85rem 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row + .team-staff-service-commission-row {
    border-top: 1px solid #e7edf5;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy {
    display: grid;
    gap: 0.18rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
    display: grid;
    gap: 0.75rem;
    justify-items: end;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #1f2937;
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation {
    display: grid;
    gap: 0.38rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation > small {
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-options {
    display: grid;
    gap: 0.82rem;
    margin-top: 0.28rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: #1f2937;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option input {
    width: 24px;
    height: 24px;
    margin: 0.08rem 0 0;
    accent-color: #6a5af9;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option span {
    display: grid;
    gap: 0.18rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option strong {
    color: #111827;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-calculation-option small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-commissions-help-link {
    color: #635bff;
    font-weight: 600;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-category-group[hidden],
.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100vw - 2.5rem));
    height: calc(100vh - 2rem);
    margin: 1rem auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem 0;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-close {
    width: 48px;
    height: 48px;
    border: 1px solid #d4d9e2;
    border-radius: 999px;
    background: #ffffff;
    color: #101828;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-close .material-symbols-outlined {
    font-size: 1.5rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-apply {
    min-height: 48px;
    padding: 0.85rem 1.45rem;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-shell {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 1.35rem;
    padding: 1rem 2.4rem 2rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-head h3 {
    margin: 0;
    color: #111827;
    font-size: clamp(2rem, 3vw, 2.45rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-empty {
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 2rem 0 3rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 18px;
    background: #f7f7f8;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-search {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-search .material-symbols-outlined {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #697586;
    font-size: 1.18rem;
    pointer-events: none;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-search input {
    min-height: 46px;
    padding-left: 3rem;
    border-radius: 999px;
    border-color: #d0d5dd;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-filter-toggle {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-filter-pill {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #171a20;
    font-size: 0.97rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-filter-pill.is-active {
    background: #111111;
    color: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-editor {
    min-height: 0;
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-table-head {
    display: grid;
    grid-template-columns: 48px minmax(260px, 1.1fr) 170px minmax(420px, 0.95fr);
    align-items: center;
    gap: 1rem;
    padding: 0 1rem 1rem;
    border-bottom: 1px solid #e7ebf1;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-table-body {
    min-height: 0;
    overflow: auto;
    padding-right: 0.4rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-group {
    display: grid;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-row,
.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row {
    display: grid;
    grid-template-columns: 48px minmax(260px, 1.1fr) 170px minmax(420px, 0.95fr);
    align-items: center;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-row {
    padding: 1.3rem 1rem 1rem;
    border-bottom: 1px solid #e7ebf1;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-title strong {
    color: #101828;
    font-size: 1rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-category-count {
    min-width: 28px;
    height: 28px;
    padding: 0 0.55rem;
    border: 1px solid #d8dee8;
    border-radius: 999px;
    background: #ffffff;
    color: #344054;
    font-size: 0.84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check span {
    display: none;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:checked,
.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:indeterminate {
    border-color: #6a5af9;
    background: #6a5af9;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-check input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 10px;
    width: 12px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row {
    padding: 1.6rem 1rem;
    border-bottom: 1px solid #e7ebf1;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy {
    display: grid;
    gap: 0.18rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-copy small {
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-price {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
    justify-items: stretch;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(0, 140px) auto;
    align-items: center;
    gap: 0.75rem;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields.is-using-default {
    opacity: 0.72;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-row-fields select {
    min-height: 46px;
    border-radius: 12px;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row .team-staff-commission-value-shell {
    min-height: 46px;
}

.admin-body.admin-page-team-staff .team-staff-service-commission-modal-row .team-staff-commission-type-toggle {
    justify-self: start;
}

@media (max-width: 920px) {
    .admin-body.admin-page-team-staff .team-staff-service-commission-grid,
    .admin-body.admin-page-team-staff .team-staff-service-commission-row {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
        justify-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-fields,
    .admin-body.admin-page-team-staff .team-staff-service-commission-rate {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-commission-type-toggle {
        justify-content: flex-start;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-dialog {
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        margin: 0.5rem auto;
        border-radius: 24px;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-shell {
        padding: 0.6rem 1rem 1rem;
        gap: 1rem;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-table-head {
        display: none;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-category-row,
    .admin-body.admin-page-team-staff .team-staff-service-commission-modal-row {
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-price,
    .admin-body.admin-page-team-staff .team-staff-service-commission-row-controls {
        grid-column: 2;
    }

    .admin-body.admin-page-team-staff .team-staff-service-commission-row-fields {
        grid-template-columns: 1fr;
    }
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-field {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-grid {
    max-width: 620px;
    gap: 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-option {
    width: 34px;
    height: 34px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-body.admin-page-team-staff .team-staff-calendar-color-option:hover {
    transform: translateY(-1px);
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint {
    position: fixed;
    left: 50%;
    bottom: 7.2rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(169, 189, 216, 0.68);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 34px rgba(15, 23, 36, 0.18);
    color: #2f6df6;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
    transform: translateX(-50%);
    animation: teamStaffScrollHintFloat 1.8s ease-in-out infinite;
    cursor: pointer;
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint:hover {
    background: #ffffff;
    border-color: rgba(116, 155, 227, 0.9);
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint-icon {
    width: 16px;
    height: 16px;
    position: relative;
    flex: 0 0 16px;
    animation: teamStaffScrollHintArrow 1.1s ease-in-out infinite;
}

.admin-body.admin-page-team-staff .team-staff-scroll-hint-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #2f6df6;
    border-bottom: 2px solid #2f6df6;
    transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes teamStaffScrollHintFloat {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-8px);
    }
}

@keyframes teamStaffScrollHintArrow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

.admin-body.admin-page-team-staff .team-staff-editor-avatar-wrap {
    margin-bottom: 1rem;
    overflow-anchor: none;
}

.admin-body.admin-page-team-staff .team-staff-avatar-label {
    position: relative;
}

.admin-body.admin-page-team-staff .team-staff-avatar-label::after {
    content: 'photo_camera';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d7deea;
    background: #ffffff;
    color: #324154;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined';
    font-size: 0.95rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    box-shadow: 0 6px 14px rgba(26, 38, 54, 0.14);
}

.admin-body.admin-page-team-staff .team-staff-avatar-fallback {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.admin-body.admin-page-team-staff .team-staff-inline-note {
    margin: 0;
    padding: 0.82rem 0.95rem;
    border: 1px solid #e2e7ef;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.48;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-settings-password-only {
    max-width: 520px;
    display: grid;
    gap: 1.1rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-password-lead {
    margin: 0;
    color: #66768c;
    font-size: 0.94rem;
    line-height: 1.5;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-profile-password-form {
    display: grid;
    gap: 1.35rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-password-form .form-group {
    gap: 0.55rem;
}

.admin-body.admin-page-team-staff .team-staff-profile-password-form .form-group label {
    color: #1f2a39;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.admin-body.admin-page-team-staff .team-staff-password-field {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1px solid #d8dbe3;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-body.admin-page-team-staff .team-staff-password-field:focus-within {
    border-color: #6358e7;
    box-shadow: 0 0 0 3px rgba(99, 88, 231, 0.1);
}

.admin-body.admin-page-team-staff .team-staff-password-field > .material-symbols-outlined {
    color: #5f6f84;
    font-size: 1.15rem;
}

.admin-body.admin-page-team-staff .team-staff-password-field input {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.98rem;
    font-weight: 600;
    color: #1f2a39;
}

.admin-body.admin-page-team-staff .team-staff-password-field input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.admin-body.admin-page-team-staff .team-staff-password-field input:focus {
    outline: 0;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-body.admin-page-team-staff .team-staff-password-field button,
.admin-body.admin-page-team-staff .team-staff-password-field-spacer {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-password-field button {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.admin-body.admin-page-team-staff .team-staff-password-field button:hover,
.admin-body.admin-page-team-staff .team-staff-password-field button:focus-visible {
    background: #f1f5f9;
    color: #111827;
}

.admin-body.admin-page-team-staff .team-staff-password-field button .material-symbols-outlined {
    font-size: 1.18rem;
}

.admin-body.admin-page-team-staff .team-staff-password-rules {
    display: grid;
    gap: 0.38rem;
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
}

.admin-body.admin-page-team-staff .team-staff-password-rules li,
.admin-body.admin-page-team-staff .team-staff-password-match-note {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-password-match-note[hidden] {
    display: none !important;
}

.admin-body.admin-page-team-staff .team-staff-password-rules li::before,
.admin-body.admin-page-team-staff .team-staff-password-match-note::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #cbd5e1;
    flex-shrink: 0;
}

.admin-body.admin-page-team-staff .team-staff-password-rules li.is-valid,
.admin-body.admin-page-team-staff .team-staff-password-match-note.is-valid {
    color: #15803d;
}

.admin-body.admin-page-team-staff .team-staff-password-rules li.is-valid::before,
.admin-body.admin-page-team-staff .team-staff-password-match-note.is-valid::before {
    background: #22c55e;
}

@media (max-width: 720px) {
    .admin-body.admin-page-team-staff .team-staff-settings-password-only {
        max-width: none;
    }
}

.admin-body.admin-page-team-staff .team-staff-toggle-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-toggle-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 0.18rem;
    accent-color: #6358e7;
}

.admin-body.admin-page-team-staff .team-staff-toggle-copy {
    display: grid;
    gap: 0.14rem;
}

.admin-body.admin-page-team-staff .team-staff-toggle-copy strong {
    color: #131b2a;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
}

.admin-body.admin-page-team-staff .team-staff-toggle-copy small {
    color: #6a7b90;
    font-size: 0.86rem;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-hub-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #d9e1ec;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: calc(100vh - 190px);
}

.admin-body.admin-page-team-staff .team-staff-hub-sidebar {
    border-right: 1px solid #e5e8f0;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-profile-card {
    position: relative;
    padding: 1.35rem 1.2rem 1rem;
    border-bottom: 1px solid #e5e8f0;
    display: grid;
    gap: 0.95rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-back {
    position: absolute;
    top: 0.8rem;
    right: 0.85rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d7dfeb;
    background: #ffffff;
    color: #1a2333;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-profile-copy h2 {
    margin: 0;
    color: #121c2d;
    font-size: 1.05rem;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.admin-body.admin-page-team-staff .team-staff-hub-profile-copy p {
    margin: 0.26rem 0 0;
    color: #617089;
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-hub-avatar {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    border-radius: 50%;
    border: 0;
    background: #0f5ea2;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-body.admin-page-team-staff .team-staff-hub-avatar.is-photo {
    background: transparent;
    color: transparent;
}

.admin-body.admin-page-team-staff .team-staff-hub-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.admin-body.admin-page-team-staff .team-staff-hub-actions summary {
    min-height: 44px;
    padding: 0.58rem 1rem;
    border-radius: 999px;
    justify-content: center;
    font-size: 0.95rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta li {
    display: grid;
    gap: 0.14rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta strong {
    color: #111a2a;
    font-size: 0.84rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-meta span {
    color: #63728a;
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav {
    padding: 1rem;
    display: grid;
    gap: 0.45rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav a {
    padding: 0.78rem 0.9rem;
    border-radius: 12px;
    color: #162031;
    font-size: 0.96rem;
    font-weight: 750;
    line-height: 1.25;
}

.admin-body.admin-page-team-staff .team-staff-hub-nav a.is-active,
.admin-body.admin-page-team-staff .team-staff-hub-nav a:hover {
    background: #ecebff;
    color: #171f31;
}

.admin-body.admin-page-team-staff .team-staff-hub-main {
    padding: 1.55rem 1.4rem 1.4rem;
    background: #ffffff;
    display: grid;
    gap: 1rem;
    align-content: start;
}

.admin-body.admin-page-team-staff .team-staff-hub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-head h1 {
    margin: 0;
    color: #111a2a;
    font-size: clamp(1.8rem, 2.2vw, 2.5rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.admin-body.admin-page-team-staff .team-staff-hub-head h2 {
    margin: 0.9rem 0 0;
    color: #121c2d;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-link {
    display: inline-block;
    margin-top: 0.35rem;
    color: #5f56ff;
    font-size: 0.96rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-link:hover {
    text-decoration: underline;
}

.admin-body.admin-page-team-staff .team-staff-hub-range-form select {
    min-height: 44px;
    padding: 0.65rem 2.75rem 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid #d6dfeb;
    background: #ffffff;
    color: #121b2b;
    font-size: 0.95rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-main-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-card,
.admin-body.admin-page-team-staff .team-staff-hub-activity,
.admin-body.admin-page-team-staff .team-staff-hub-empty {
    border: 1px solid #dce3ef;
    border-radius: 16px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-card {
    padding: 1.2rem 1.15rem;
    display: grid;
    gap: 0.72rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-card-wide,
.admin-body.admin-page-team-staff .team-staff-hub-activity {
    grid-column: 1 / -1;
}

.admin-body.admin-page-team-staff .team-staff-hub-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-card-head h3 {
    margin: 0;
    color: #121b2c;
    font-size: 0.98rem;
    line-height: 1.2;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-info {
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: 1px solid #d9e1eb;
    color: #7b8799;
    font-size: 0.74rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-value {
    margin: 0;
    color: #091322;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change span {
    min-height: 30px;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #d7deeb;
    background: #ffffff;
    color: #131c2b;
    font-size: 0.9rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change.is-negative span {
    color: #c03b56;
}

.admin-body.admin-page-team-staff .team-staff-hub-metric-change small {
    color: #65758c;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart {
    margin-top: 0.3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 0.9rem;
    align-items: end;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-col {
    display: grid;
    gap: 0.45rem;
    align-items: end;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-amount {
    color: #6b7a90;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-bar-shell {
    height: 132px;
    border-bottom: 1px solid #d8e1ec;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.1rem;
    background-image: linear-gradient(to top, transparent 24%, rgba(220, 227, 239, 0.9) 24%, rgba(220, 227, 239, 0.9) 25%, transparent 25%, transparent 49%, rgba(220, 227, 239, 0.9) 49%, rgba(220, 227, 239, 0.9) 50%, transparent 50%, transparent 74%, rgba(220, 227, 239, 0.9) 74%, rgba(220, 227, 239, 0.9) 75%, transparent 75%);
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-bar {
    width: 100%;
    height: calc(var(--staff-bar-ratio, 0.04) * 100%);
    min-height: 6px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #9fd3f6 0%, #0f5ea2 100%);
}

.admin-body.admin-page-team-staff .team-staff-hub-chart-col small {
    color: #5f6f87;
    font-size: 0.83rem;
    line-height: 1.35;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity {
    padding: 1.1rem 1.15rem;
    display: grid;
    gap: 0.9rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-empty {
    padding: 1rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-empty h4 {
    margin: 0;
    color: #101a2a;
    font-size: 1rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-empty p {
    margin: 0.35rem 0 0;
    color: #66768d;
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-list {
    display: grid;
    gap: 0.78rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid #e2e8f1;
    border-radius: 14px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-item strong {
    color: #131b2b;
    font-size: 0.98rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-item p {
    margin: 0.2rem 0 0;
    color: #66768d;
    font-size: 0.9rem;
    line-height: 1.45;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-meta {
    display: grid;
    justify-items: end;
    gap: 0.32rem;
}

.admin-body.admin-page-team-staff .team-staff-hub-activity-meta small {
    color: #6e7d93;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 700;
}

.admin-body.admin-page-team-staff .team-staff-hub-status {
    min-height: 28px;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-pending {
    background: #f3eaff;
    color: #6c52df;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-confirmed {
    background: #e7f4ff;
    color: #1f6fbb;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-completed {
    background: #e8f8ef;
    color: #268154;
}

.admin-body.admin-page-team-staff .team-staff-hub-status.is-canceled {
    background: #ffecef;
    color: #be3553;
}

@media (max-width: 980px) {
    .admin-body.admin-page-team-staff .team-staff-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-form-head {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-row-menu {
        width: 100%;
    }

    .admin-body.admin-page-team-staff .team-staff-row-menu summary {
        width: 100%;
        justify-content: center;
    }

    .admin-body.admin-page-team-staff .team-staff-row-menu .clients-pro-options-menu {
        position: static;
        right: auto;
        bottom: auto;
        top: auto;
        width: 100%;
        min-width: 0;
        margin-top: 0.45rem;
    }

    .admin-body.admin-page-team-staff .team-staff-editor-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-editor-actions {
        justify-content: flex-start;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-pane-head,
    .admin-body.admin-page-team-staff .team-staff-hub-pane-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-facts-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .admin-body.admin-page-team-staff .team-staff-profile-shell {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-shell,
    .admin-body.admin-page-team-staff .team-staff-hub-main-grid {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-sidebar {
        border-right: 0;
        border-bottom: 1px solid #e5e8f0;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-head,
    .admin-body.admin-page-team-staff .team-staff-hub-activity-item {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-body.admin-page-team-staff .team-staff-hub-activity-meta {
        justify-items: start;
    }
}

.lh-lang-fab {
    display: block;
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 146;
}

.lh-lang-fab-toggle {
    min-width: 62px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(116, 205, 218, 0.56);
    background: linear-gradient(160deg, #27d1df 0%, #17b0c2 100%);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    box-shadow: 0 12px 24px rgba(11, 28, 38, 0.3);
    padding: 0 0.9rem;
    cursor: pointer;
}

.lh-lang-fab-code {
    font-size: 0.82rem;
    line-height: 1;
}

.lh-lang-fab-toggle .lh-lang-flag,
.lh-lang-fab-menu .lh-lang-flag {
    width: 14px;
    height: 10px;
    box-shadow: 0 0 0 1px rgba(7, 19, 31, 0.35);
}

.lh-lang-fab-caret {
    font-size: 0.78rem;
    line-height: 1;

/* Location FAB button — floating swap sucursal — HIDDEN */
.lh-center-fab {
    display: none !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 22px;
    bottom: 140px;
    z-index: 146;
    animation: lh-center-fab-float 2.5s ease-in-out infinite;
}
@keyframes lh-center-fab-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.lh-center-fab:hover {
    animation-play-state: paused;
}
.lh-center-fab-label {
    white-space: nowrap;
    background: #000;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.lh-center-fab-toggle {
    min-width: 52px;
    min-height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 8px 24px rgba(29,78,216,.45);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.lh-center-fab-toggle::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(59,130,246,.3);
    animation: lh-center-fab-ring 2.5s ease-in-out infinite;
}
@keyframes lh-center-fab-ring {
    0%, 100% { transform: scale(1); opacity: .6; }
    50% { transform: scale(1.15); opacity: 0; }
}
.lh-center-fab-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(59,130,246,.35), 0 12px 32px rgba(29,78,216,.55);
}
.lh-center-fab-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(11, 28, 38, 0.25);
    padding: 8px;
    animation: lh-fab-pop 0.25s ease-out;
}
.lh-center-fab-menu.is-open {
    display: flex;
}
@keyframes lh-fab-pop {
    0% { opacity: 0; transform: translateY(8px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lh-center-fab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.15s ease;
}
.lh-center-fab-item:hover {
    background: #f1f5f9;
}
.lh-center-fab-item.is-active {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
}
.lh-center-fab-item.is-active:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}
.lh-center-fab-check {
    margin-left: auto;
    opacity: 0.7;
}
    transform: translateY(1px);
    transition: transform 0.2s ease;
}

.lh-lang-fab.is-open .lh-lang-fab-caret {
    transform: rotate(180deg) translateY(-1px);
}

.lh-lang-fab-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.45rem);
    display: none;
    flex-direction: column;
    gap: 0.32rem;
    background: rgba(10, 21, 33, 0.94);
    border: 1px solid rgba(122, 150, 178, 0.4);
    border-radius: 10px;
    padding: 0.34rem;
    min-width: 84px;
    box-shadow: 0 12px 24px rgba(8, 19, 29, 0.3);
}

.lh-lang-fab.is-open .lh-lang-fab-menu {
    display: flex;
}

.lh-lang-fab-menu a {
    min-height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #d2e4fb;
    letter-spacing: 0.03em;
    padding: 0 0.56rem;
}

.lh-lang-fab-menu a:hover {
    background: rgba(49, 74, 103, 0.42);
}

.lh-lang-fab-menu a.is-active {
    background: rgba(31, 198, 215, 0.24);
    color: #8af1ff;
}

.lh-scroll-up svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-scroll-up.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.lh-scroll-up:hover {
    box-shadow: 0 16px 30px rgba(10, 24, 34, 0.42);
    transform: translateY(-2px) scale(1.02);
}

.lh-retell-assistant {
    position: fixed;
    left: 22px;
    bottom: 24px;
    z-index: 148;
    --lh-retell-accent: #111111;
}

.lh-retell-launcher {
    position: relative;
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    border: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
    transform-origin: left bottom;
    cursor: pointer;
}

.lh-retell-launcher:hover {
    transform: translateY(-1px) scale(1.01);
}

.lh-retell-launcher:focus-visible {
    outline: none;
}

.lh-retell-launcher-hovertext {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px) scale(0.92);
    transform-origin: left center;
    display: block;
    width: max-content;
    max-width: min(360px, calc(100vw - 128px));
    border-radius: 14px;
    border: 1px solid rgba(235, 224, 248, 0.95);
    background: linear-gradient(170deg, #ffffff 0%, #f8f3ff 100%);
    color: #7a2b9a;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    padding: 0.72rem 0.9rem;
    box-shadow: 0 14px 28px rgba(39, 16, 50, 0.28);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.lh-retell-launcher-hovertext::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 10px solid #fbf6ff;
}

.lh-retell-launcher:hover .lh-retell-launcher-hovertext,
.lh-retell-launcher:focus-visible .lh-retell-launcher-hovertext {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.lh-retell-assistant.is-intro-open .lh-retell-launcher-hovertext {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.lh-retell-assistant.is-open .lh-retell-launcher-hovertext {
    opacity: 0;
    visibility: hidden;
}

.lh-retell-launcher-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 28% 20%, #f9edff 0%, rgba(249, 237, 255, 0.2) 35%, rgba(249, 237, 255, 0) 62%),
        linear-gradient(155deg, #b14ee2 0%, #722ca2 64%, #521e76 100%);
    border: 4px solid rgba(255, 255, 255, 0.93);
    box-shadow: 0 16px 28px rgba(38, 11, 56, 0.42);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: retellAvatarFloat 2.8s ease-in-out infinite;
}

.lh-retell-launcher-avatar::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(230, 175, 255, 0.56) 0%, rgba(230, 175, 255, 0.2) 45%, rgba(230, 175, 255, 0) 72%);
    filter: blur(1.1px);
    opacity: 0.75;
    z-index: 0;
    animation: retellAvatarGlow 2.4s ease-in-out infinite;
}

.lh-retell-launcher-avatar::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #8cffcf;
    border: 2px solid #64278c;
    box-shadow: 0 0 0 0 rgba(140, 255, 207, 0.65);
    animation: retellPulse 1.9s ease infinite;
}

.lh-retell-bot-svg {
    width: 94%;
    height: 94%;
    position: relative;
    z-index: 1;
}

.lh-retell-bot-svg .bot-bg {
    fill: #ede6ff;
}

.lh-retell-bot-svg .bot-hair {
    fill: #6f2f9d;
}

.lh-retell-bot-svg .bot-face {
    fill: #f9f6ff;
}

.lh-retell-bot-svg .bot-eye {
    fill: #6b2f97;
}

.lh-retell-bot-svg .bot-line {
    fill: none;
    stroke: #6d3299;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-retell-bot-svg .bot-neck {
    fill: #ede6ff;
}

.lh-retell-bot-svg .bot-shoulders {
    fill: none;
    stroke: #ab72d1;
    stroke-width: 3;
    stroke-linecap: round;
}

.lh-retell-bot-svg .bot-ear {
    fill: #ba8bde;
}

@keyframes retellPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(140, 255, 207, 0.55);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(140, 255, 207, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(140, 255, 207, 0);
    }
}

@keyframes retellAvatarFloat {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 16px 28px rgba(38, 11, 56, 0.42);
    }
    50% {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 22px 34px rgba(38, 11, 56, 0.5);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 16px 28px rgba(38, 11, 56, 0.42);
    }
}

@keyframes retellAvatarGlow {
    0% {
        transform: scale(0.94);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.95;
    }
    100% {
        transform: scale(0.94);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lh-retell-launcher-avatar,
    .lh-retell-launcher-avatar::before,
    .lh-retell-launcher-avatar::after {
        animation: none !important;
    }
}

.lh-retell-panel {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 0.66rem);
    width: min(360px, calc(100vw - 1.2rem));
    max-height: min(560px, calc(100vh - 2.2rem));
    border-radius: 16px;
    border: 1px solid rgba(124, 149, 178, 0.32);
    background: rgba(246, 249, 253, 0.98);
    box-shadow: 0 20px 45px rgba(7, 17, 28, 0.28);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.lh-retell-assistant.is-open .lh-retell-panel {
    display: flex;
}

.lh-retell-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.9rem 0.95rem 0.78rem;
    background: linear-gradient(150deg, rgba(17, 33, 50, 0.98) 0%, rgba(10, 20, 33, 0.95) 100%);
    color: #f2f6ff;
}

.lh-retell-head-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.62rem;
}

.lh-retell-head-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(199, 220, 248, 0.86);
    background: linear-gradient(145deg, #edf4ff, #dce9fd);
    box-shadow: 0 7px 13px rgba(5, 15, 24, 0.28);
}

.lh-retell-head-copy {
    min-width: 0;
}

.lh-retell-kicker {
    margin: 0;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(161, 210, 255, 0.9);
}

.lh-retell-panel-head h3 {
    margin: 0.18rem 0 0;
    font-size: 1.02rem;
    line-height: 1.1;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lh-retell-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(159, 181, 206, 0.42);
    background: rgba(255, 255, 255, 0.06);
    color: #e6efff;
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lh-retell-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.65rem 0.75rem 0.32rem;
    background: #f8fbff;
    border-bottom: 1px solid rgba(212, 220, 233, 0.88);
}

.lh-retell-tabs button {
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid #d7deeb;
    background: #ffffff;
    color: #1b2b42;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0.45rem 0.82rem;
}

.lh-retell-tabs button.is-active {
    border-color: rgba(31, 198, 215, 0.68);
    background: rgba(31, 198, 215, 0.16);
    color: #113651;
}

.lh-retell-view {
    display: none;
}

.lh-retell-view.is-active {
    display: block;
}

.lh-retell-messages {
    height: 278px;
    overflow-y: auto;
    padding: 0.8rem 0.75rem 0.65rem;
    background: #f2f6fb;
    display: grid;
    gap: 0.5rem;
}

.lh-retell-message {
    max-width: calc(100% - 1rem);
    border-radius: 12px;
    box-sizing: border-box;
    padding: 0.64rem 0.82rem;
    font-size: 0.84rem;
    line-height: 1.55;
    box-shadow: 0 6px 12px rgba(11, 21, 34, 0.06);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: pretty;
    text-align: left;
}

.lh-retell-message strong {
    font-weight: 700;
    color: inherit;
}

.lh-retell-message-paragraph {
    margin: 0;
}

.lh-retell-message-paragraph + .lh-retell-message-paragraph {
    margin-top: 0.5rem;
}

.lh-retell-option-list {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.48rem;
}

.lh-retell-message-paragraph + .lh-retell-option-list {
    margin-top: 0.7rem;
}

.lh-retell-option-item {
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    align-items: start;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    background: rgba(31, 198, 215, 0.08);
    border: 1px solid rgba(31, 198, 215, 0.18);
}

.lh-retell-option-badge {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.22);
}

.lh-retell-option-text {
    min-width: 0;
}

.lh-retell-message.is-assistant {
    justify-self: start;
    background: #ffffff;
    border: 1px solid rgba(210, 220, 233, 0.92);
    color: #132338;
}

.lh-retell-message.is-user {
    justify-self: end;
    background: rgba(31, 198, 215, 0.22);
    border: 1px solid rgba(31, 198, 215, 0.42);
    color: #0f2d45;
}

.lh-retell-wa-inline {
    justify-self: start;
    max-width: min(94%, 320px);
    display: grid;
    gap: 0.46rem;
    padding: 0.58rem 0.62rem;
    background: linear-gradient(160deg, #ffffff 0%, #f6fbf8 100%);
    border: 1px solid rgba(141, 209, 172, 0.66);
    box-shadow: 0 10px 18px rgba(16, 50, 34, 0.11);
}

.lh-retell-wa-inline p {
    margin: 0;
    color: #173329;
    font-size: 0.82rem;
    line-height: 1.38;
    font-weight: 650;
}

.lh-retell-inline-wa-btn {
    justify-self: start;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(37, 182, 124, 0.68);
    background: linear-gradient(156deg, #2acf80 0%, #16a765 100%);
    color: #ffffff;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0.32rem 0.82rem;
    box-shadow: 0 8px 14px rgba(14, 87, 53, 0.22);
}

.lh-retell-inline-wa-btn:hover,
.lh-retell-inline-wa-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.lh-retell-form {
    padding: 0.58rem 0.7rem 0.72rem;
    border-top: 1px solid rgba(213, 221, 233, 0.88);
    background: #f9fbff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.52rem;
}

.lh-retell-form input {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid #cfd8e6;
    background: #ffffff;
    padding: 0.62rem 0.72rem;
    font-size: 0.86rem;
}

.lh-retell-form button {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 0.9rem;
    white-space: nowrap;
}

.lh-retell-chat-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.7rem 0.78rem;
    border-top: 1px solid rgba(213, 221, 233, 0.88);
    background: #f9fbff;
}

.lh-retell-chat-actions button {
    flex: 1 1 0;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.77rem;
    font-weight: 780;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.lh-retell-chat-actions button:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

.lh-retell-end-btn {
    background: linear-gradient(160deg, #fff5f5 0%, #ffe9e9 100%);
    border-color: rgba(219, 77, 77, 0.4);
    color: #8f1f2c;
    box-shadow: 0 8px 14px rgba(155, 38, 51, 0.12);
}

.lh-retell-end-btn:hover,
.lh-retell-end-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.01);
    box-shadow: 0 12px 18px rgba(155, 38, 51, 0.18);
}

.lh-retell-exit-btn {
    background: linear-gradient(165deg, #ffffff 0%, #edf3fb 100%);
    border-color: rgba(177, 194, 216, 0.86);
    color: #18324c;
    box-shadow: 0 8px 14px rgba(24, 50, 76, 0.11);
}

.lh-retell-exit-btn:hover,
.lh-retell-exit-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 12px 18px rgba(24, 50, 76, 0.16);
}

.lh-retell-voice-status {
    margin: 0;
    padding: 0.88rem 0.8rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #18314a;
}

.lh-retell-voice-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.8rem 0.72rem;
}

.lh-retell-voice-actions button {
    flex: 1 1 auto;
    min-height: 41px;
    border-radius: 10px;
}

.lh-retell-voice-wa {
    margin: 0 0.8rem 0.8rem;
    padding: 0.58rem 0.62rem;
    border-radius: 12px;
    border: 1px solid rgba(141, 209, 172, 0.66);
    background: linear-gradient(160deg, #ffffff 0%, #f6fbf8 100%);
    box-shadow: 0 10px 18px rgba(16, 50, 34, 0.11);
    display: grid;
    gap: 0.5rem;
}

.lh-retell-voice-wa[hidden] {
    display: none !important;
}

.lh-retell-voice-wa p {
    margin: 0;
    color: #173329;
    font-size: 0.82rem;
    line-height: 1.38;
    font-weight: 650;
}

.lh-retell-voice-wa .lh-retell-inline-wa-btn {
    width: 100%;
    min-height: 36px;
}

.lh-retell-inline-wa-btn.is-suggested {
    animation: retellWhatsappPulse 0.95s ease-in-out 2;
}

@keyframes retellWhatsappPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 14px rgba(14, 87, 53, 0.22);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 6px rgba(42, 207, 128, 0.2), 0 10px 18px rgba(14, 87, 53, 0.28);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 8px 14px rgba(14, 87, 53, 0.22);
    }
}

.lh-retell-transcript {
    border-top: 1px solid rgba(214, 221, 233, 0.88);
    background: #f4f8fd;
    padding: 0.7rem 0.75rem 0.8rem;
}

.lh-retell-transcript-title {
    margin: 0 0 0.45rem;
    color: #4e5f77;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.lh-retell-transcript-body {
    max-height: 162px;
    overflow-y: auto;
    display: grid;
    gap: 0.42rem;
}

.lh-retell-transcript-line {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    border-radius: 9px;
    padding: 0.42rem 0.52rem;
}

.lh-retell-transcript-line.is-assistant {
    background: #ffffff;
    border: 1px solid rgba(210, 220, 234, 0.95);
    color: #1f3148;
}

.lh-retell-transcript-line.is-user {
    background: rgba(169, 216, 246, 0.24);
    border: 1px solid rgba(150, 203, 236, 0.52);
    color: #1d3f5e;
}

@media (max-width: 980px) {
    .lh-retell-assistant {
        left: 18px;
        bottom: 20px;
    }

    .lh-lang-fab {
        right: 18px;
        bottom: 82px;
    }
}

@media (max-width: 760px) {
    .site-body.page-home .lh-hero {
        min-height: auto;
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        min-height: auto;
    }

    .lh-scroll-up {
        width: 50px;
        height: 50px;
        right: 14px;
        bottom: 14px;
    }

    .lh-retell-assistant {
        left: 14px;
        bottom: 12px;
    }

    .lh-retell-launcher {
        width: 54px;
        height: 54px;
        min-width: 54px;
        min-height: 54px;
    }

    .lh-retell-launcher-hovertext {
        display: none;
    }

    .lh-retell-assistant.is-intro-open .lh-retell-launcher-hovertext {
        display: block;
        max-width: min(250px, calc(100vw - 96px));
        left: calc(100% + 9px);
        font-size: 0.8rem;
        padding: 0.62rem 0.74rem;
    }

    .lh-retell-panel {
        width: min(340px, calc(100vw - 1rem));
    }

    .lh-retell-messages {
        height: 250px;
    }

    .lh-lang-fab {
        right: 14px;
        bottom: 74px;
    }

    .lh-lang-fab-toggle {
        min-width: 58px;
        height: 42px;
        padding: 0 0.82rem;
    }

    .lh-scroll-up svg {
        width: 21px;
        height: 21px;
    }
}

/* Hide third-party floating "back to top" buttons */
#toTop,
.to-top,
.back-to-top,
.scroll-top,
.scrollToTop,
.go-top,
a[href="#top"],
a[aria-label*="top" i],
a[aria-label*="arriba" i],
button[aria-label*="top" i],
button[aria-label*="arriba" i],
[title*="back to top" i],
[title*="volver arriba" i] {
    display: none !important;
}

/* Public template */

.site-body {
    --lh-header-offset: calc(var(--lh-topline-h) + var(--lh-nav-h));
    background: #f6f6f6;
    padding-top: var(--lh-header-offset);
    transition: padding-top 0.68s cubic-bezier(0.16, 0.72, 0.24, 1);
}

.site-body main {
    display: flex;
    flex-direction: column;
}

.site-body.page-home .lh-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
    min-height: calc(660px + var(--lh-header-offset));
}

.site-body.page-home .lh-hero .lh-hero-inner {
    min-height: calc(574px + var(--lh-header-offset));
}

section[id] {
    scroll-margin-top: calc(var(--lh-topline-h) + var(--lh-nav-h) + 14px);
}

.site-body.topline-hidden section[id] {
    scroll-margin-top: calc(var(--lh-nav-h) + 14px);
}

.lh-topline {
    background: linear-gradient(90deg, var(--lh-topline-start) 0%, var(--lh-topline-end) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #d8deea;
    font-size: 0.84rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    border-bottom: 0;
    box-shadow: none;
    transition: transform 0.68s ease, opacity 0.5s ease, filter 0.5s ease;
    transform-origin: top center;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.lh-topline-inner {
    min-height: var(--lh-topline-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.lh-topline-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1 1 auto;
    min-width: 0;
}

.lh-topline p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: #dce4f3;
    flex: 1 1 auto;
    min-width: 0;
}

.lh-topline-copy {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lh-topline-icon {
    width: 22px;
    height: 22px;
    color: var(--lh-cyan);
    flex: 0 0 auto;
    display: inline-flex;
}

.lh-topline-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-topline-social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: 0.25rem;
}

.lh-topline-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: rgba(18, 34, 52, 0.66);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(4, 12, 22, 0.32);
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.lh-topline-social a::after {
    content: none;
}

.lh-topline-social a:hover {
    transform: translateY(-2px) scale(1.04);
    filter: saturate(1.08) brightness(1.05);
    box-shadow: 0 10px 18px rgba(3, 14, 25, 0.42);
}

.lh-topline-social svg {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
}

.lh-topline-social a[aria-label='Instagram'] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.lh-topline-social a[aria-label='Facebook'] svg {
    fill: currentColor;
    stroke: none;
}

.lh-topline-social a[aria-label='Facebook'] {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
}

.lh-topline-social a[aria-label='Facebook']:hover {
    background: #166fe5;
    border-color: #166fe5;
}

.lh-topline-social a[aria-label='Instagram'] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.lh-topline-social a[aria-label='Instagram']:hover {
    filter: saturate(1.15) brightness(1.06);
}

.lh-topline-social a[aria-label='Google'] {
    background: #ffffff;
    border-color: #d5deea;
}

.lh-topline-social a[aria-label='Google'] svg {
    width: 17px;
    height: 17px;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(1) {
    fill: #4285f4;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(2) {
    fill: #34a853;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(3) {
    fill: #fbbc05;
}

.lh-topline-social a[aria-label='Google'] svg path:nth-child(4) {
    fill: #ea4335;
}

.lh-topline-social a[aria-label='Google']:hover {
    background: #f9fbff;
}

.lh-topline-contact {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.lh-topline-contact a {
    color: #d4dced;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    font-size: 0.9rem;
    line-height: 1.1;
    white-space: nowrap;
}

.lh-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(77, 89, 106, 0.72);
    border: 1px solid rgba(131, 153, 182, 0.36);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 980px) {
    .lh-hero-slide[data-mobile-skip="1"] {
        display: none !important;
    }
}

.lh-lang-switch a {
    min-width: 50px;
    min-height: 26px;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #c9d2e0;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    line-height: 1;
}

.lh-lang-switch a.is-active {
    border-color: rgba(46, 230, 246, 0.95);
    background: rgba(8, 43, 63, 0.48);
    color: #89f3ff;
    box-shadow: 0 0 0 1px rgba(46, 230, 246, 0.16) inset;
}

.lh-lang-flag {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(11, 25, 42, 0.35);
}

.lh-lang-flag-es {
    background: linear-gradient(to bottom, #c63232 0 25%, #f6d050 25% 75%, #c63232 75% 100%);
}

.lh-lang-flag-en {
    background:
        linear-gradient(to bottom, #cf3f3f 0 14%, #fff 14% 28%, #cf3f3f 28% 42%, #fff 42% 56%, #cf3f3f 56% 70%, #fff 70% 84%, #cf3f3f 84% 100%);
    position: relative;
}

.lh-lang-flag-en::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 38%;
    height: 57%;
    background: #264b9f;
    border-top-left-radius: 2px;
}

.site-header {
    background: linear-gradient(90deg, var(--lh-header-start) 0%, var(--lh-header-end) 100%);
    color: #fff;
    position: fixed;
    top: var(--lh-topline-h);
    left: 0;
    right: 0;
    z-index: 115;
    backdrop-filter: blur(9px) saturate(110%);
    -webkit-backdrop-filter: blur(9px) saturate(110%);
    border-bottom: 1px solid rgba(117, 149, 182, 0.34);
    transition: top 0.26s ease, transform 0.68s ease, box-shadow 0.24s ease, background 0.24s ease, opacity 0.5s ease, filter 0.5s ease;
    transform-origin: top center;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.site-body.topline-hidden .lh-topline {
    transform: translateY(-112%);
    opacity: 0;
    filter: blur(1.6px);
    pointer-events: none;
}

.site-body.topline-hidden .site-header {
    top: 0;
}

.site-header.is-scrolled {
    background: linear-gradient(90deg, var(--lh-header-scrolled-start) 0%, var(--lh-header-scrolled-end) 100%);
    box-shadow: 0 10px 22px rgba(6, 11, 18, 0.35);
}

.site-body.nav-is-hidden .lh-topline {
    transform: translateY(-110%) scale(0.84) rotateX(18deg);
    opacity: 0;
    filter: blur(1.8px);
    pointer-events: none;
}

.site-body.nav-is-hidden .site-header {
    transform: translateY(calc(-1 * (var(--lh-topline-h) + var(--lh-nav-h) + 12px))) scale(0.8) rotateX(16deg);
    opacity: 0;
    filter: blur(2px);
    pointer-events: none;
}

.site-body.nav-is-hidden {
    padding-top: 0;
}

.site-body.nav-is-showing .site-header {
    animation: nav-forward 0.82s cubic-bezier(0.17, 0.84, 0.28, 1.08);
}

.site-body.nav-is-showing:not(.topline-hidden) .lh-topline {
    animation: nav-forward 0.82s cubic-bezier(0.17, 0.84, 0.28, 1.08);
}

@keyframes nav-forward {
    0% {
        transform: translateY(-14px) scale(0.82) rotateX(16deg);
        opacity: 0.18;
        filter: blur(1.8px);
    }
    70% {
        transform: translateY(2px) scale(1.02) rotateX(0deg);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0) scale(1) rotateX(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

.lh-nav-shell {
    min-height: var(--lh-nav-h);
    display: grid;
    grid-template-columns: 240px 1fr 210px;
    align-items: stretch;
    gap: 0;
}

.lh-logo-wrap {
    background: transparent;
    padding: 0.24rem 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand {
    font-family: 'Great Vibes', cursive;
    font-size: 2.35rem;
    line-height: 0.9;
    color: #d8aa4d;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.lh-logo-wrap .brand-logo {
    max-height: 52px;
}

.lh-logo-wrap .lh-brand-tagline,
.lh-logo-wrap p.lh-brand-tagline {
    margin: 0.1rem 0 0;
    font-size: clamp(0.68rem, 1.1vw, 0.78rem);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-wrap: balance;
}

.lh-nav-mobile-tagline {
    display: none;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 42px;
    margin: auto 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2.4px;
    border-radius: 999px;
    background: #f6f9ff;
    margin: 0;
    box-shadow: 0 0 0 0.2px rgba(255, 255, 255, 0.75);
}

.menu-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(6.4px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-6.4px) rotate(-45deg);
}

.menu-toggle span {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.site-nav a {
    color: #e2e8f4;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0 0.68rem;
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
    background: rgba(46, 82, 117, 0.55);
    color: #fff;
}

.site-nav a.is-active {
    background: linear-gradient(160deg, var(--lh-nav-active-start) 0%, var(--lh-nav-active-end) 100%);
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.28);
}

.lh-nav-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-right: 0.35rem;
}

.lh-nav-cta-title {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
    line-height: 1;
}

.lh-nav-cta-label {
    font-size: 0.73rem;
    color: #d3dced;
    font-weight: 700;
}

.lh-nav-cta-icon {
    width: 31px;
    height: 31px;
    color: var(--lh-cyan);
    display: inline-flex;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 7px rgba(42, 209, 228, 0.28));
}

.lh-nav-cta-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-nav-cta a {
    font-size: 1.02rem;
    color: var(--lh-cyan);
    font-weight: 800;
    line-height: 1.05;
}

.lh-hero {
    min-height: 660px;
    position: relative;
    isolation: isolate;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 1.2rem;
    overflow: hidden;
}

.lh-hero-slides {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.lh-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.75s ease, transform 6s linear;
    pointer-events: none;
}

.lh-hero-slide img {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.lh-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.lh-hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
}

.lh-hero-slide.is-contain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    filter: blur(10px) saturate(0.9);
    transform: scale(1.06);
    opacity: 0.36;
}

.lh-hero-slide.is-contain::before {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.lh-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(45, 50, 62, 0.76), rgba(57, 67, 84, 0.72));
    z-index: -1;
}

.lh-hero-controls {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.65rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
    .lh-hero:hover .lh-hero-controls,
    .lh-hero:focus-within .lh-hero-controls {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 980px) {
    .site-body.page-home .lh-hero .lh-hero-controls {
        top: var(--lh-hero-mobile-top-offset, 0px);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h, clamp(320px, 62vw, 420px));
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        padding: 0 0.5rem;
    }

    .site-body.page-home .lh-hero:hover .lh-hero-controls,
    .site-body.page-home .lh-hero:focus-within .lh-hero-controls,
    .site-body.page-home .lh-hero.lh-hero-controls-visible .lh-hero-controls {
        opacity: 1;
        visibility: visible;
    }
}

.lh-hero-control {
    width: 40px;
    height: 72px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.56);
    background: linear-gradient(90deg, var(--lh-nav-active-start) 0%, var(--lh-nav-active-end) 100%);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
        0 10px 24px rgba(37, 99, 235, 0.34),
        inset 0 1px 0 rgba(147, 197, 253, 0.24);
    text-shadow: 0 1px 2px rgba(30, 58, 138, 0.38);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.lh-hero-control-prev {
    border-radius: 0 12px 12px 0;
    margin-left: -0.65rem;
}

.lh-hero-control-next {
    border-radius: 12px 0 0 12px;
    margin-right: -0.65rem;
}

.lh-hero-control:not(:disabled):not(.is-disabled):hover,
.lh-hero-control:not(:disabled):not(.is-disabled):focus-visible {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    border-color: rgba(147, 197, 253, 0.92);
    color: #ffffff;
    box-shadow:
        0 12px 24px rgba(37, 99, 235, 0.36),
        0 0 0 2px rgba(59, 130, 246, 0.28);
    transform: scale(1.03);
}

.lh-hero-control:not(:disabled):not(.is-disabled):active {
    background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%);
    border-color: rgba(96, 165, 250, 0.84);
    color: #ffffff;
    box-shadow:
        0 6px 14px rgba(30, 64, 175, 0.33),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: scale(0.97);
}

.lh-hero-control:focus-visible {
    outline: none;
}

.lh-hero-control.is-disabled,
.lh-hero-control:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow:
        0 6px 12px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: none;
}

.lh-hero-inner {
    min-height: 574px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f5f7fb;
    max-width: 700px;
    margin-left: auto;
}

.lh-hero .lh-script {
    margin: 0;
    font-family: 'Great Vibes', cursive;
    font-size: clamp(4rem, 11vw, 8rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #d8aa4d;
    background: linear-gradient(180deg, #f6df9b 0%, #e2bf6c 48%, #b8862b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 2px 10px rgba(20, 16, 8, 0.35),
        0 1px 0 rgba(255, 238, 180, 0.35);
}

.lh-hero h1 {
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: clamp(2.05rem, 5.2vw, 3.5rem);
    line-height: 1;
    color: var(--lh-cyan);
}

.lh-hero p {
    margin-bottom: 1.35rem;
    font-size: 1.06rem;
    color: #f0f5ff;
}

.lh-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    border-radius: 999px;
    padding: 0.88rem 1.25rem;
    background: var(--lh-cyan);
    color: #fff;
    font-weight: 800;
    transition: background 0.2s ease;
}

.lh-btn-primary:hover {
    background: var(--lh-cyan-2);
}

.lh-hero-center-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    max-width: 100%;
}
.lh-hero-center-badge svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 1;
    color: #dc2626;
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6));
    animation: bounce-location 1.5s ease-in-out infinite;
}
@keyframes bounce-location {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
    60% { transform: translateY(1px); }
}
.lh-hero-center-badge .lh-hero-center-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lh-hero-center-select {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.lh-hero-center-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1.3;
    box-shadow: 0 0 0 2px #fff, 0 6px 20px rgba(59, 130, 246, 0.35);
    max-width: 320px;
}
.lh-hero-center-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 0 0 2px #fff, 0 8px 28px rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}
.lh-hero-center-btn svg:first-child {
    flex-shrink: 0;
    color: #ef4444;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
    animation: bounce-location 1.5s ease-in-out infinite;
}
@keyframes bounce-location {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
    60% { transform: translateY(1px); }
}
.lh-hero-center-btn .lh-hero-center-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.lh-hero-center-hint {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    letter-spacing: 0.02em;
}
@media (max-width: 768px) {
    .lh-hero-center-hint {
        color: #0066cc !important;
    }
}
/* ── Cambiar de estudio link ── */
.bk-change-study-link,
.bk-pill-change-study,
.bk-change-branch-link,
.bk-change-branch-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit;
    cursor: default;
}
/* Only hide pseudo-elements on spans inside bk-cambiar-estudio-text */
.bk-cambiar-estudio-text span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.bk-cambiar-estudio-text span::before,
.bk-cambiar-estudio-text span::after {
    display: none !important;
}
.bk-cambiar-estudio-text::before,
.bk-cambiar-estudio-text::after,
.lh-booking-head .bk-cambiar-estudio-text::before,
.lh-booking-head .bk-cambiar-estudio-text::after {
    display: none !important;
}
.bk-cambiar-estudio-text {
    display: block;
    text-align: center;
    margin-top: 0.3rem;
    font-size: 1rem;
    color: #1a2537;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: color 0.25s ease;
}
.bk-cambiar-estudio-text:hover {
    color: #0a1520;
}
.bk-change-study-finger {
    font-size: 1rem;
    line-height: 1;
}
@media (max-width: 768px) {
    .bk-change-study-link,
    .bk-pill-change-study,
    .bk-change-branch-link,
    .bk-pill-tooltip {
        color: #0066cc !important;
    }
    .bk-cambiar-estudio-text {
        color: #4a6fa5 !important;
    }
    .bk-cambiar-estudio-text:hover {
        color: #1a2537 !important;
    }
}
.bk-change-study-link:hover,
.bk-pill-change-study:hover,
.bk-change-branch-link:hover {
    opacity: 0.8;
}
.bk-change-study-finger,
.bk-pill-change-study .bk-finger-icon,
.bk-change-branch-link .bk-change-study-finger {
    display: inline-block;
    animation: fingerBounce 0.8s ease-in-out infinite;
    font-size: 2em;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(255,200,0,0.7)) drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    margin-left: 2px;
}
.bk-pill-tooltip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}
@keyframes fingerBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.lh-center-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px;
}
.lh-center-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.lh-center-modal {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 32px 28px 28px;
    max-width: 380px;
    width: 100%;
    position: relative;
    transform: translateY(16px);
    transition: transform 0.25s ease;
}
.lh-center-modal-overlay.is-open .lh-center-modal {
    transform: translateY(0);
}
.lh-center-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    color: #dc2626;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 10;
    line-height: 1;
}
.lh-center-modal-close:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}
.lh-center-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d83f87, #9333ea);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.lh-center-modal-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}
.lh-center-modal-subtitle {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 22px;
}
.lh-center-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lh-center-modal-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #9333ea 0%, #d83f87 100%);
    text-decoration: none;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lh-center-modal-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35);
}
.lh-center-modal-card.is-active {
    background: linear-gradient(135deg, #ec4899, #a855f7);
    box-shadow: 0 0 0 3px #fff, 0 6px 20px rgba(168, 85, 247, 0.4);
}
.lh-center-modal-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lh-center-modal-card-icon svg {
    color: #fff;
}
.lh-center-modal-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lh-center-modal-card-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lh-center-modal-card-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}
.lh-center-modal-card.is-active .lh-center-modal-card-sub {
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
}
.lh-center-modal-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-check 2s ease-in-out infinite;
}
@keyframes pulse-check {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.lh-center-modal-card-arrow {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}
.lh-center-modal-card-arrow svg {
    color: inherit;
}
.lh-center-modal-card-badge {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.site-body.page-about .lh-about-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
    min-height: calc(320px + var(--lh-header-offset));
}

.lh-about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 320px;
    background-image: var(--about-hero-bg);
    background-size: cover;
    background-position: center 38%;
}

.lh-about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(22, 31, 46, 0.78) 0%, rgba(25, 36, 54, 0.7) 46%, rgba(25, 38, 57, 0.58) 100%);
    z-index: -1;
}

.lh-about-hero-inner {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 1rem 0 1.1rem;
    color: #f4f8ff;
    max-width: 760px;
}

.lh-about-hero h1 {
    margin: 0 0 0.42rem;
    color: #ffffff;
    font-size: clamp(2.18rem, 4.5vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
}

.lh-about-hero p {
    margin: 0.08rem 0 0;
    color: rgba(238, 245, 255, 0.92);
    font-size: clamp(0.94rem, 1.45vw, 1.13rem);
    max-width: 640px;
    line-height: 1.45;
}

.lh-about-hero .lh-contact-breadcrumb {
    margin-top: 0.74rem;
    justify-content: flex-start;
    color: #e6efff;
}

.lh-about-overview {
    background: #f2f4f8;
    padding: 0;
}

.lh-about-overview .container {
    width: 100%;
    max-width: none;
    margin: 0;
}

.lh-about-overview-grid {
    margin-top: 0;
    border-radius: 0;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 660px;
}

.lh-about-overview-image {
    margin: 0;
    min-height: 660px;
    position: relative;
}

.lh-about-overview-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 30, 44, 0.5) 0%, rgba(20, 30, 44, 0.22) 38%, rgba(20, 30, 44, 0) 100%),
        linear-gradient(180deg, rgba(11, 20, 34, 0.12) 0%, rgba(11, 20, 34, 0.34) 100%);
}

.lh-about-overview-image img {
    width: 100%;
    height: 100%;
    min-height: 660px;
    object-fit: cover;
}

.lh-about-overview-play {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.46);
    background: rgba(23, 33, 50, 0.24);
    box-shadow: 0 12px 26px rgba(11, 21, 35, 0.36);
    pointer-events: none;
}

.lh-about-overview-play::before,
.lh-about-overview-play::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lh-about-overview-play::after {
    left: 39px;
    top: 31px;
    border: 0;
    width: 0;
    height: 0;
    border-left: 18px solid #f555a7;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transform: none;
}

.lh-about-overview-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.6rem 5vw 3.1rem;
    max-width: 760px;
    margin-inline: auto;
}

.lh-about-overview-card h2 {
    margin: 0;
    color: #101b2d;
    font-size: clamp(2.25rem, 4.2vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.lh-about-overview-card p {
    margin: 0.95rem 0 0;
    color: #3f4e64;
    font-size: 1.03rem;
    line-height: 1.58;
    font-weight: 600;
}

.lh-about-why-list {
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.62rem;
}

.lh-about-why-list li {
    position: relative;
    padding-left: 1.55rem;
    color: #4a5a71;
    font-size: 1rem;
    line-height: 1.38;
}

.lh-about-why-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #1bbfd1;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

.lh-about-stats {
    margin-top: 1.55rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

.lh-about-stat {
    border-top: 0;
    padding-top: 0;
    text-align: center;
}

.lh-about-stat strong {
    color: #121b2b;
    display: inline-flex;
    align-items: baseline;
    gap: 0.04rem;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lh-about-stat > span {
    display: block;
    margin-top: 0.22rem;
    color: #56657a;
    font-size: clamp(0.92rem, 1.12vw, 1.03rem);
    font-weight: 500;
    line-height: 1.25;
}

.lh-about-stat-number {
    font: inherit;
}

.lh-about-stat-suffix {
    display: inline-block;
    font-size: 0.6em;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-0.12em);
}

.lh-about-team {
    background: #f2f4f8;
    padding: 2.4rem 0 4.8rem;
}

.lh-about-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.lh-about-member-card {
    border: 1px solid #d8e1ed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 22px rgba(18, 29, 43, 0.11);
}

.lh-about-member-photo {
    margin: 0;
    background: #bec2c8;
    min-height: 0;
}

.lh-about-member-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lh-about-member-body {
    background: #f0f2f4;
    padding: 0.95rem 1.05rem 1.05rem;
}

.lh-about-member-body h3 {
    margin: 0;
    color: #1ebfd1;
    font-size: 1.6rem;
    line-height: 1.14;
}

.lh-about-member-body p {
    margin: 0.2rem 0 0;
    color: #616f80;
    font-size: 0.98rem;
    line-height: 1.35;
}

.site-body.page-contact .lh-contact-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
}

.lh-contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 360px;
    background-image: var(--contact-hero-bg);
    background-size: cover;
    background-position: center;
}

.lh-contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(17, 24, 36, 0.78) 0%, rgba(20, 31, 48, 0.66) 52%, rgba(24, 37, 57, 0.48) 100%);
    z-index: -1;
}

.lh-contact-hero-inner {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.4rem 0 2.2rem;
    color: #f4f8ff;
    max-width: 760px;
}

.lh-contact-hero h1 {
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1.02;
    color: #ffffff;
}

.lh-contact-hero p {
    margin: 0.56rem 0 0;
    font-size: clamp(0.95rem, 1.65vw, 1.15rem);
    color: rgba(238, 245, 255, 0.92);
    max-width: 620px;
}

.lh-contact-breadcrumb {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #e6efff;
}

.lh-contact-breadcrumb a {
    color: #65deec;
    font-weight: 700;
}

.lh-contact-breadcrumb strong {
    font-weight: 700;
    color: #ffffff;
}

.lh-terms-doc {
    padding: 2.35rem 0 3.4rem;
}

.lh-terms-paper {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.35rem;
}

.lh-terms-item + .lh-terms-item {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #dce3ec;
}

.lh-terms-item h3 {
    margin: 0 0 0.45rem;
    color: #132033;
    font-size: 1.14rem;
    line-height: 1.25;
    font-weight: 800;
}

.lh-terms-item p {
    margin: 0 0 0.42rem;
    color: #4c5d73;
    font-size: 0.96rem;
    line-height: 1.65;
}

.lh-terms-item p:last-child {
    margin-bottom: 0;
}

.lh-terms-document-html h1,
.lh-terms-document-html h2,
.lh-terms-document-html h3,
.lh-terms-document-html h4,
.lh-terms-document-html h5,
.lh-terms-document-html h6 {
    margin: 0 0 0.45rem;
    color: #132033;
    line-height: 1.25;
}

.lh-terms-document-html p,
.lh-terms-document-html li {
    color: #4c5d73;
    font-size: 0.96rem;
    line-height: 1.65;
}

.lh-terms-document-html p {
    margin: 0 0 0.42rem;
}

.lh-terms-document-html ul,
.lh-terms-document-html ol {
    margin: 0 0 0.8rem 1.3rem;
    padding: 0;
}

.lh-terms-document-html a {
    color: #0daec0;
    text-decoration: underline;
}

.lh-terms-document-html hr {
    border: 0;
    border-top: 1px solid #cfd9e5;
    margin: 1rem 0 1.1rem;
}

/* Unified hero for internal pages (everything except home) */
.site-body:not(.page-home) .lh-page-hero {
    margin-top: calc(-1 * var(--lh-header-offset));
    padding-top: var(--lh-header-offset);
    min-height: calc(320px + var(--lh-header-offset));
}

.lh-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 320px;
    background-image: var(--lh-page-hero-bg);
    background-size: cover;
    background-position: center 38%;
    margin-bottom: 0;
}

.lh-page-hero > .container {
    width: min(1180px, calc(100% - 2.2rem));
    margin-inline: auto;
}

.lh-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(22, 31, 46, 0.78) 0%, rgba(25, 36, 54, 0.7) 46%, rgba(25, 38, 57, 0.58) 100%);
    z-index: -1;
}

.lh-page-hero-inner {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0.4rem 0;
    color: #f4f8ff;
    max-width: 760px;
}

.lh-page-hero h1 {
    margin: 0 0 0.42rem;
    color: #ffffff;
    font-size: clamp(2.18rem, 4.5vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
}

.lh-page-hero p {
    margin: 0.08rem 0 0;
    color: rgba(238, 245, 255, 0.92);
    font-size: clamp(0.94rem, 1.45vw, 1.13rem);
    max-width: 640px;
    line-height: 1.45;
}

.lh-page-hero .lh-contact-breadcrumb {
    margin-top: 0.74rem;
    justify-content: flex-start;
    color: #e6efff;
}

.lh-contact-map-section {
    padding: 1rem 0 2rem;
    background: #eef2f7;
}

.lh-contact-map-frame {
    border-radius: 12px;
    border: 1px solid #d3e1ef;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(14, 28, 44, 0.12);
    background: linear-gradient(180deg, #f8fcff 0%, #eef5fb 100%);
    position: relative;
    isolation: isolate;
}

.lh-contact-map-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}

.lh-contact-map-frame iframe {
    width: 100%;
    height: clamp(310px, 45vw, 430px);
    border: 0;
    display: block;
    filter: brightness(1.06) saturate(1.04) contrast(1.01);
}

.lh-contact-main {
    background: #eef2f7;
    padding: 0 0 4.2rem;
}

.lh-contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.lh-contact-form-card,
.lh-contact-info-panel {
    border-radius: 8px;
    border: 1px solid #d3dbe7;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 33, 49, 0.1);
    padding: 1.2rem 1.2rem 1.25rem;
}

.lh-contact-head h2 {
    margin: 0;
    color: #162338;
    font-size: clamp(1.35rem, 2.1vw, 1.95rem);
    line-height: 1.06;
}

.lh-contact-head p {
    margin: 0.55rem 0 0;
    color: #5f6d81;
    font-size: 0.94rem;
    line-height: 1.5;
}

.lh-contact-form {
    margin-top: 1rem;
    display: grid;
    gap: 0.72rem;
}

.lh-contact-form .form-group {
    gap: 0.3rem;
}

.lh-contact-form .form-group label {
    color: #546274;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.lh-contact-form input,
.lh-contact-form textarea {
    border-radius: 4px;
    border-color: #c8d2df;
    min-height: 48px;
    padding: 0.68rem 0.78rem;
}

.lh-contact-form textarea {
    min-height: 145px;
}

.lh-contact-submit {
    margin-top: 0.15rem;
    min-height: 44px;
    min-width: 170px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
}

.lh-contact-info-list {
    margin-top: 0.95rem;
    display: grid;
    gap: 0.72rem;
}

.lh-contact-info-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.7rem;
    border: 1px solid #d8e0eb;
    border-radius: 4px;
    padding: 0.85rem 0.9rem;
    background: #f9fbfe;
}

.lh-contact-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(31, 198, 215, 0.13);
    color: #1ab9cb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.05rem;
}

.lh-contact-info-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-contact-info-copy h3 {
    margin: 0;
    color: #132035;
    font-size: 1.3rem;
    line-height: 1.08;
}

.lh-contact-info-copy p {
    margin: 0.38rem 0 0;
    color: #5d6c82;
    font-size: 0.93rem;
    line-height: 1.47;
}

.lh-contact-info-copy a {
    color: #365684;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lh-contact-info-copy a:hover {
    color: var(--lh-cyan);
}

.lh-contact-cards {
    margin-top: 0.9rem;
    position: relative;
    z-index: 10;
}

.lh-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.lh-card {
    --lh-card-tint: rgba(129, 157, 196, 0.2);
    --lh-card-border: #dbe4ef;
    --lh-card-hover-border: #9ab5d8;
    --lh-card-glow: rgba(22, 39, 64, 0.2);
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem;
    min-height: 205px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lh-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,245,255,0.5) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lh-card > * {
    position: relative;
    z-index: 1;
}

.lh-card:hover,
.lh-card:focus-within {
    transform: translateY(-6px);
    border-color: var(--lh-card-hover-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 20px var(--lh-card-glow);
}

.lh-card:hover::before,
.lh-card:focus-within::before {
    opacity: 1;
}

.lh-card img {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid #fff;
}

.lh-card:hover img,
.lh-card:focus-within img {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.lh-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bungee-plum, #5d2b9b);
    letter-spacing: -0.01em;
    transition: color 0.28s ease;
    text-shadow: 0 1px 2px rgba(93, 43, 155, 0.08);
}

.lh-card p {
    margin: 0;
    color: #374151;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.6;
    transition: color 0.28s ease;
}

.lh-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.8rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--bungee-rose, #d83f87), var(--bungee-plum, #9333ea));
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lh-card a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(216, 63, 135, 0.3);
}

.lh-card:hover h3,
.lh-card:focus-within h3 {
    color: var(--bungee-plum, #5d2b9b);
}

.lh-card:hover p,
.lh-card:focus-within p {
    color: #475569;
}

@media (min-width: 981px) {
    .site-body.page-home .lh-hero {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        gap: clamp(0.55rem, 1.3vh, 0.95rem);
        padding-bottom: clamp(0.85rem, 1.6vh, 1.4rem);
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        flex: 1 1 auto;
        min-height: clamp(250px, calc(100dvh - 27rem), calc(455px + var(--lh-header-offset)));
        max-width: min(700px, 56vw);
        padding-top: clamp(3rem, 5vh, 4rem);
        padding-bottom: 0;
    }

    .site-body.page-home .lh-hero .lh-script {
        margin-bottom: 0;
        font-size: clamp(2.5rem, min(6vw, 10dvh), 5rem);
        line-height: 1.1;
    }

    .site-body.page-home .lh-hero h1 {
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
        font-size: clamp(1.5rem, min(3.5vw, 4.5dvh), 2.8rem);
    }

    .site-body.page-home .lh-hero p {
        margin-bottom: clamp(1.5rem, 3vh, 2rem);
        font-size: clamp(0.94rem, min(1.08vw, 2.05dvh), 1.06rem);
        line-height: 1.4;
        max-width: 36ch;
    }

    .site-body.page-home .lh-hero .lh-contact-cards {
        margin-top: 0;
    }

    .site-body.page-home .lh-hero .lh-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.65rem, 1vw, 0.9rem);
    }

    .site-body.page-home .lh-hero .lh-card {
        min-height: clamp(150px, 19vh, 205px);
        gap: clamp(0.75rem, 1vw, 1.05rem);
        padding: clamp(0.95rem, 1.25vw, 1.25rem);
    }

    .site-body.page-home .lh-hero .lh-card > div {
        min-width: 0;
    }

    .site-body.page-home .lh-hero .lh-card img {
        width: clamp(70px, 5vw, 90px);
        height: clamp(70px, 5vw, 90px);
        border-radius: 14px;
    }

    .site-body.page-home .lh-hero .lh-card h3 {
        margin-bottom: 0.3rem;
        font-size: clamp(1.08rem, 1.45vw, 1.28rem);
    }

    .site-body.page-home .lh-hero .lh-card p {
        margin-bottom: 0;
        font-size: clamp(0.88rem, 0.98vw, 0.96rem);
        line-height: 1.38;
        overflow-wrap: anywhere;
    }

    .site-body.page-home .lh-hero .lh-card a {
        margin-top: 0.55rem;
        padding: 0.4rem 0.95rem;
    }
}

.lh-services {
    --parallax-y: 0px;
    position: relative;
    overflow: hidden;
    padding: 4.25rem 0 5rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(116, 226, 228, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(255, 201, 218, 0.22) 0%, transparent 28%),
        linear-gradient(180deg, #f8fbfd 0%, #edf4f7 100%);
}

.lh-services::before,
.lh-services::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.lh-services::before {
    top: 88px;
    left: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(87, 217, 226, 0.16) 0%, rgba(87, 217, 226, 0) 72%);
}

.lh-services::after {
    right: -100px;
    bottom: 44px;
    width: 290px;
    height: 290px;
    background: radial-gradient(circle, rgba(255, 182, 206, 0.16) 0%, rgba(255, 182, 206, 0) 70%);
}

.lh-services-bg {
    position: absolute;
    inset: -140px 0 -120px;
    z-index: 0;
    transform: translate3d(0, var(--parallax-y), 0) scale(1.05);
    transform-origin: center;
    transition: transform 0.09s linear;
    background-image:
        linear-gradient(180deg, rgba(252, 253, 255, 0.6), rgba(247, 250, 252, 0.64)),
        var(--services-bg),
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18) 0%, transparent 38%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, cover, cover;
    background-position: center center, center center, center center;
}

.lh-services .container {
    position: relative;
    z-index: 1;
}

.lh-services .lh-section-header {
    max-width: 940px;
    margin-inline: auto;
}

.lh-services .lh-section-header h2 {
    color: #162236;
    text-shadow: 0 3px 14px rgba(255, 255, 255, 0.36);
}

.lh-services .lh-section-header p {
    margin: 0.25rem auto 0;
    max-width: min(760px, 100%);
    padding: 0.7rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(161, 180, 204, 0.46);
    background: rgba(252, 254, 255, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 10px 24px rgba(23, 38, 58, 0.12);
    color: #2e3e56;
    font-weight: 600;
    line-height: 1.45;
}

.lh-section-header {
    text-align: center;
    margin-bottom: 2.2rem;
}

.lh-section-header h2 {
    margin-bottom: 0.25rem;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    color: #1c2737;
    font-weight: 700;
}

.lh-section-header span,
.lh-calm-head span,
.lh-booking-head span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(160px, 14vw, 220px);
    height: 22px;
    margin: 0.45rem 0 0.75rem;
    background: transparent;
}

.lh-section-header span::before,
.lh-calm-head span::before,
.lh-booking-head span::before {
    content: '';
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(31, 198, 215, 0) 0%,
        rgba(31, 198, 215, 0.2) 14%,
        rgba(31, 198, 215, 0.8) 50%,
        rgba(31, 198, 215, 0.2) 86%,
        rgba(31, 198, 215, 0) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: lh-separator-flow 4.8s ease-in-out infinite;
}

.lh-section-header span::after,
.lh-calm-head span::after,
.lh-booking-head span::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: linear-gradient(135deg, #4be0eb, #18b4c2);
    border: 2px solid #f8fbff;
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px rgba(31, 198, 215, 0.24);
    animation: lh-separator-pulse 2.6s ease-in-out infinite;
}

@keyframes lh-separator-flow {
    0% {
        background-position: 0% 50%;
        opacity: 0.62;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.62;
    }
}

@keyframes lh-separator-pulse {
    0%,
    100% {
        transform: rotate(45deg) scale(1);
        box-shadow: 0 0 0 2px rgba(31, 198, 215, 0.24);
    }
    50% {
        transform: rotate(45deg) scale(1.16);
        box-shadow: 0 0 0 4px rgba(31, 198, 215, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lh-section-header span::before,
    .lh-calm-head span::before,
    .lh-booking-head span::before,
    .lh-section-header span::after,
    .lh-calm-head span::after,
    .lh-booking-head span::after {
        animation: none;
    }

    .lh-circle-card {
        animation: none;
        transform: none;
    }
}

.lh-section-header p {
    margin: 0;
    color: #5a6778;
    font-size: 0.96rem;
}

.lh-service-circles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 1.8vw, 1.7rem);
    align-items: center;
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0.75rem 0 0.8rem;
}

.lh-service-circles::before {
    content: '';
    position: absolute;
    inset: 18% 10% 4% 10%;
    z-index: 0;
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 50%, rgba(101, 223, 228, 0.16) 0%, transparent 24%),
        radial-gradient(circle at 80% 40%, rgba(255, 202, 219, 0.14) 0%, transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    pointer-events: none;
    opacity: 0.8;
}

.lh-service-circles::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0.45rem;
    height: 26px;
    z-index: 0;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(28, 51, 77, 0.08) 0%, rgba(28, 51, 77, 0.02) 44%, transparent 72%);
    filter: blur(9px);
    pointer-events: none;
}

.lh-circle-card {
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    --lh-service-size: 294px;
    width: min(var(--lh-service-size), 100%);
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 8px solid rgba(247, 251, 255, 0.98);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    z-index: 1;
    background: #ffffff;
    box-shadow:
        0 20px 34px rgba(23, 38, 58, 0.12),
        0 8px 18px rgba(23, 38, 58, 0.08);
    animation: lh-service-float 6.6s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.lh-circle-card::before {
    content: '';
    position: absolute;
    inset: 7%;
    z-index: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.lh-circle-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(165deg, rgba(19, 185, 210, 0.98) 0%, rgba(20, 122, 179, 0.98) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.42s ease;
}

.lh-circle-card:nth-child(1) {
    --lh-service-size: 294px;
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    animation-delay: -0.9s;
}

.lh-circle-card:nth-child(2) {
    --lh-service-size: 294px;
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    animation-delay: -2.4s;
}

.lh-circle-card:nth-child(3) {
    --lh-service-size: 294px;
    --lh-service-float-start: 0px;
    --lh-service-float-mid: -6px;
    --lh-service-float-tilt-start: 0deg;
    --lh-service-float-tilt-mid: 0deg;
    animation-delay: -1.6s;
}

.lh-circle-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
    transform: scale(1);
    opacity: 1;
    filter: saturate(0.98) contrast(1.02);
    transition: transform 0.55s ease, filter 0.55s ease, opacity 0.42s ease;
    backface-visibility: hidden;
}

.lh-circle-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(22, 44, 68, 0.02) 0%, rgba(22, 44, 68, 0.16) 14%, rgba(32, 194, 212, 0.86) 44%, rgba(20, 156, 182, 0.94) 100%);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding: 0.95rem 0.95rem 1rem;
    z-index: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.34s ease, transform 0.34s ease;
    overflow: hidden;
}

.lh-circle-caption h3 {
    margin: 0;
    font-size: clamp(1.08rem, 1.45vw, 1.28rem);
    line-height: 1.1;
    font-weight: 700;
    text-wrap: balance;
    text-shadow: 0 8px 18px rgba(13, 31, 54, 0.24);
}

.lh-circle-hover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.15rem 1.15rem 1rem;
    gap: 0.55rem;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
    transition: opacity 0.42s ease, transform 0.42s ease;
    backface-visibility: hidden;
}

.lh-circle-hover h3 {
    margin: 0;
    font-size: clamp(1.18rem, 1.7vw, 1.46rem);
    line-height: 1.12;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.lh-circle-hover p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    max-width: 210px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
    position: relative;
    z-index: 1;
}

.lh-circle-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 0.2rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.98);
    color: #19adc2;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 24px rgba(18, 44, 66, 0.18);
    position: relative;
    z-index: 1;
}

.lh-circle-card:hover img,
.lh-circle-card:focus-within img {
    transform: scale(1.03);
    opacity: 0;
    filter: saturate(1.02) contrast(1);
}

.lh-circle-card:hover .lh-circle-caption,
.lh-circle-card:focus-within .lh-circle-caption {
    opacity: 0;
    transform: translateY(16px);
}

.lh-circle-card:hover .lh-circle-hover,
.lh-circle-card:focus-within .lh-circle-hover {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.lh-circle-card:hover::after,
.lh-circle-card:focus-within::after {
    opacity: 1;
}

.lh-circle-card:hover,
.lh-circle-card:focus-within {
    animation-play-state: paused;
    box-shadow:
        0 28px 48px rgba(19, 38, 58, 0.16),
        0 12px 24px rgba(19, 38, 58, 0.11);
}

@keyframes lh-service-float {
    0%,
    100% {
        transform: translate3d(0, var(--lh-service-float-start), 0) rotate(var(--lh-service-float-tilt-start));
    }
    50% {
        transform: translate3d(0, var(--lh-service-float-mid), 0) rotate(var(--lh-service-float-tilt-mid));
    }
}

@media (max-width: 1080px) {
    .lh-service-circles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .lh-circle-card:nth-child(n) {
        --lh-service-size: 276px;
        --lh-service-float-start: 0px;
        --lh-service-float-mid: -5px;
        --lh-service-float-tilt-start: 0deg;
        --lh-service-float-tilt-mid: 0deg;
    }
}

@media (max-width: 767px) {
    .lh-services {
        padding: 3.6rem 0 4.2rem;
    }

    .lh-service-circles {
        padding-top: 0.3rem;
    }

    .lh-service-circles::after {
        display: none;
    }

    .lh-circle-card:nth-child(n) {
        --lh-service-size: min(320px, 100%);
        --lh-service-float-start: 0px;
        --lh-service-float-mid: -8px;
        --lh-service-float-tilt-start: 0deg;
        --lh-service-float-tilt-mid: 0deg;
    }
}

.lh-catalog-strip {
    margin: 2rem auto 0;
    max-width: 1140px;
    border-radius: 16px;
    border: 1px solid rgba(181, 198, 218, 0.54);
    background: linear-gradient(118deg, rgba(247, 251, 255, 0.95) 0%, rgba(238, 246, 254, 0.93) 58%, rgba(229, 240, 252, 0.95) 100%);
    box-shadow: 0 16px 30px rgba(14, 32, 51, 0.12);
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 540px);
    gap: 1.2rem;
    align-items: center;
    padding: 1.05rem;
}

.lh-catalog-copy {
    padding: 0.55rem 0.3rem 0.55rem 0.6rem;
}

.lh-catalog-copy h3 {
    margin: 0;
    color: #14253a;
    font-size: clamp(1.24rem, 2.05vw, 1.9rem);
    line-height: 1.12;
    font-weight: 800;
}

.lh-catalog-copy p {
    margin: 0.55rem 0 0;
    color: #4b617b;
    font-size: 0.96rem;
    line-height: 1.55;
    max-width: 650px;
}

.lh-catalog-open-btn {
    margin-top: 0.9rem;
    min-width: 190px;
}

.lh-catalog-preview {
    margin: 0;
    position: relative;
    padding: 0.12rem;
}

.lh-catalog-preview::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 18px;
    background: radial-gradient(circle at 70% 18%, rgba(74, 148, 214, 0.2), rgba(74, 148, 214, 0.02) 60%, rgba(74, 148, 214, 0) 75%);
    z-index: 0;
    pointer-events: none;
}

.lh-catalog-preview-btn {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 0;
    background: linear-gradient(155deg, #ffffff 0%, #f2f8ff 100%);
    padding: 0.42rem;
    cursor: zoom-in;
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(164, 190, 220, 0.62);
    overflow: hidden;
    box-shadow: 0 18px 30px rgba(13, 30, 50, 0.28);
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.lh-catalog-preview-btn img {
    width: 100%;
    height: clamp(280px, 36vw, 410px);
    object-fit: contain;
    display: block;
    border-radius: 10px;
    background: #ffffff;
    filter: contrast(1.08) saturate(1.05) brightness(1.01);
    transition: transform 0.38s ease, filter 0.38s ease;
}

.lh-catalog-preview-btn:hover img,
.lh-catalog-preview-btn:focus-visible img {
    transform: scale(1.035);
    filter: contrast(1.12) saturate(1.1) brightness(1.03);
}

.lh-catalog-preview-btn:hover,
.lh-catalog-preview-btn:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(96, 151, 207, 0.7);
    box-shadow: 0 24px 38px rgba(9, 26, 44, 0.36);
}

body.is-modal-open,
.admin-body.admin-page-team-staff.is-staff-editor-modal-open .admin-content,
.site-body.is-modal-open {
    overflow: hidden;
}

.lh-catalog-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: clamp(0.8rem, 2vw, 1.6rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
    background: rgba(15, 23, 42, 0.14);
}

.lh-catalog-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lh-catalog-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.lh-catalog-dialog {
    position: relative;
    z-index: 1;
    width: min(1280px, 96vw);
    max-height: calc(100vh - 2rem);
    border-radius: 14px;
    border: 1px solid rgba(194, 208, 226, 0.5);
    background: #f8fbff;
    box-shadow: 0 24px 44px rgba(3, 12, 22, 0.45);
    padding: 0.8rem;
    overflow: auto;
}

.lh-catalog-dialog h3 {
    margin: 0 2.5rem 0.6rem 0;
    color: #12243a;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.2;
}

.lh-catalog-dialog img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border: 1px solid #d8e3f0;
    background: #fff;
}

.lh-catalog-close {
    position: absolute;
    top: 0.52rem;
    right: 0.52rem;
    width: 36px;
    height: 36px;
    border: 1px solid #cad8e9;
    border-radius: 999px;
    background: #ffffff;
    color: #16314e;
    font-size: 1.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lh-catalog-close:hover {
    background: #eef6ff;
}

.lh-portfolio {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 4.2rem;
    background:
        radial-gradient(920px 460px at -10% 18%, rgba(221, 188, 205, 0.44) 0%, transparent 70%),
        radial-gradient(860px 440px at 110% 24%, rgba(230, 196, 214, 0.4) 0%, transparent 68%),
        linear-gradient(180deg, #faeff4 0%, #f6e8f0 100%);
}

.lh-portfolio::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url('https://images.unsplash.com/photo-1463320898484-cdee8141c787?auto=format&fit=crop&w=1200&q=80'),
        url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=1200&q=80');
    background-repeat: no-repeat, no-repeat;
    background-size: 560px auto, 620px auto;
    background-position: left -140px top -70px, right -150px bottom -120px;
    opacity: 0.12;
    filter: saturate(0.82);
    pointer-events: none;
}

.lh-portfolio::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 16% 34%, rgba(255, 255, 255, 0.34) 0 10px, transparent 11px),
        radial-gradient(circle at 83% 72%, rgba(255, 255, 255, 0.22) 0 10px, transparent 11px);
    opacity: 0.52;
    pointer-events: none;
}

.lh-portfolio-shell {
    width: 100%;
    padding-inline: 0.65rem;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.lh-portfolio-head {
    text-align: center;
    margin-bottom: 1rem;
}

.lh-portfolio-head h2 {
    margin: 0;
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(2.5rem, 4.9vw, 4.2rem);
    line-height: 1;
    color: #c16d98;
}

.lh-portfolio-canvas {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.lh-portfolio-marquee {
    width: 100%;
    overflow: hidden;
}

/* Marquee drag — replaces CSS animation with JS-driven scroll */
.lh-portfolio-marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
}

.lh-portfolio-marquee:hover .lh-portfolio-marquee-track {
    animation-play-state: paused;
}

@keyframes portfolio-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Keep the original grid look inside each "set" of images */
.lh-portfolio-marquee-track .lh-portfolio-set {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-auto-rows: 275px;
    gap: 1rem;
    align-items: stretch;
    flex: 0 0 auto;
    padding-right: 1rem;
}

.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(1) {
    grid-column: 1 / span 6;
    grid-row: 1;
}
.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(2) {
    grid-column: 7 / span 4;
    grid-row: 1;
}
.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(3) {
    grid-column: 11 / span 3;
    grid-row: 1;
}
.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(4) {
    grid-column: 14 / span 3;
    grid-row: 1;
}
.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(5) {
    grid-column: 1 / span 5;
    grid-row: 2;
}
.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(6) {
    grid-column: 6 / span 5;
    grid-row: 2;
}
.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(7) {
    grid-column: 11 / span 6;
    grid-row: 2;
}
.lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(n + 8) {
    display: none;
}

.lh-portfolio-shot {
    margin: 0;
    background: #e9dee5;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 22px rgba(38, 32, 45, 0.12);
}


.lh-portfolio-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.56s ease, filter 0.36s ease;
}

.lh-portfolio-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.lh-portfolio-shot:hover img,
.lh-portfolio-shot:focus-within img {
    transform: scale(1.07);
    filter: saturate(1.05);
}

.lh-portfolio-shot:hover::after,
.lh-portfolio-shot:focus-within::after {
    opacity: 1;
}

.lh-facebook-showcase {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 4.2rem;
    background:
        radial-gradient(920px 460px at -12% 18%, rgba(78, 127, 227, 0.38) 0%, transparent 72%),
        radial-gradient(860px 440px at 112% 24%, rgba(112, 163, 248, 0.3) 0%, transparent 70%),
        linear-gradient(180deg, #eaf2ff 0%, #dce9ff 100%);
    border-top: 1px solid #c3d5f7;
    border-bottom: 1px solid #c3d5f7;
}

.lh-facebook-showcase::before {
    content: 'f';
    position: absolute;
    left: -54px;
    top: -210px;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(320px, 42vw, 560px);
    font-weight: 800;
    line-height: 1;
    color: rgba(24, 119, 242, 0.11);
    pointer-events: none;
}

.lh-facebook-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 34%, rgba(255, 255, 255, 0.42) 0 10px, transparent 11px),
        radial-gradient(circle at 83% 72%, rgba(255, 255, 255, 0.28) 0 10px, transparent 11px);
    opacity: 0.58;
    pointer-events: none;
}

.lh-facebook-showcase-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 500px);
    gap: 1.1rem 2rem;
    align-items: start;
}

.lh-facebook-showcase-copy {
    padding: 0.55rem 0 0;
}

.lh-facebook-showcase-copy h2 {
    margin: 0 0 0.42rem;
    color: #10408f;
    font-size: clamp(1.75rem, 3.1vw, 2.65rem);
    line-height: 1.08;
}

.lh-facebook-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    margin: 0 0 0.45rem;
    color: #2f4f7f;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.lh-facebook-brand-mark {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1877f2;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(24, 119, 242, 0.25);
}

.lh-facebook-showcase-copy p {
    margin: 0 0 1rem;
    max-width: 42ch;
    color: #3e5f93;
    font-size: 1rem;
    line-height: 1.5;
}

.lh-facebook-showcase-frame {
    justify-self: end;
    width: min(100%, 500px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(96, 135, 198, 0.44);
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(26, 57, 107, 0.22);
}

.lh-facebook-showcase-frame iframe {
    width: 100%;
    height: 700px;
    border: 0;
    display: block;
}

.lh-facebook-video-grid {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 108px;
    gap: 0.82rem;
}

.lh-facebook-video-card {
    position: relative;
    grid-column: span 4;
    grid-row: span 3;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid rgba(96, 135, 198, 0.36);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(26, 57, 107, 0.16);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.lh-facebook-video-card:nth-of-type(1) {
    grid-column: span 5;
}

.lh-facebook-video-card:nth-of-type(2) {
    grid-column: span 4;
}

.lh-facebook-video-card:nth-of-type(3) {
    grid-column: span 3;
}

.lh-facebook-video-card:nth-of-type(4) {
    grid-column: span 7;
}

.lh-facebook-video-card:nth-of-type(5) {
    grid-column: span 5;
}

.lh-facebook-video-card:nth-of-type(6) {
    grid-column: span 6;
}

.lh-facebook-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(22, 50, 98, 0.24);
}

.lh-facebook-video-card::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.lh-facebook-video-card:hover::after {
    opacity: 1;
}

.lh-facebook-video-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #ffffff;
    min-height: 240px;
}

.lh-facebook-video-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0.56rem;
    right: 0.56rem;
    bottom: 0.56rem;
    min-height: 36px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(181, 207, 247, 0.46);
    background: rgba(18, 53, 109, 0.86);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    backdrop-filter: blur(2px);
    z-index: 1;
}

.lh-facebook-video-card:hover .lh-facebook-video-link {
    opacity: 1;
    transform: translateY(0);
}

.lh-facebook-video-link:hover {
    background: rgba(24, 119, 242, 0.94);
    color: #ffffff;
}

@media (max-width: 1040px) {
    .lh-facebook-showcase-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lh-facebook-showcase-frame {
        justify-self: center;
        width: min(100%, 500px);
    }

    .lh-facebook-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 148px;
        gap: 0.78rem;
    }

    .lh-facebook-video-card,
    .lh-facebook-video-card:nth-of-type(n) {
        grid-column: span 1;
        grid-row: span 2;
    }

    .lh-facebook-video-card:nth-of-type(1),
    .lh-facebook-video-card:nth-of-type(4) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .lh-facebook-showcase {
        padding: 2.5rem 0 2.9rem;
    }

    .lh-facebook-showcase-copy p {
        max-width: none;
        font-size: 0.94rem;
    }

    .lh-facebook-showcase-frame iframe {
        height: 560px;
    }

    .lh-facebook-video-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .lh-facebook-video-card,
    .lh-facebook-video-card:nth-of-type(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .lh-facebook-video-card iframe {
        height: 246px;
        min-height: 246px;
    }

    .lh-facebook-video-link {
        opacity: 1;
        transform: translateY(0);
        min-height: 34px;
        font-size: 0.76rem;
    }
}

.lh-calm {
    position: relative;
    isolation: isolate;
    background-image: var(--calm-image);
    background-size: cover;
    background-position: center;
    padding: 4.8rem 0;
    color: #fff;
}

.lh-calm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: -1;
}

.lh-calm-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 1.95rem;
}

.lh-calm-head h2 {
    margin-bottom: 0.2rem;
    font-size: clamp(1.95rem, 4.1vw, 3.2rem);
}

.lh-calm-head p {
    margin: 0;
    font-size: 1.15rem;
    color: #f4f8ff;
}

.lh-calm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.lh-calm-card {
    text-align: center;
    color: #fff;
}

.lh-icon {
    margin-inline: auto;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 800;
    color: #ff8bd3;
}

.lh-calm-card h3 {
    margin: 0.85rem 0 0.5rem;
    font-size: 2.2rem;
    line-height: 1.12;
}

.lh-calm-card p {
    margin: 0;
    color: #eef3ff;
    font-size: 1.05rem;
}

.lh-proof {
    --parallax-y: 0px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #eceff3;
}

.lh-proof::before,
.lh-proof::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(52vw, 760px);
    min-width: 460px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.98;
    filter: saturate(1.06) contrast(1.03);
    transition: transform 0.09s linear;
}

.lh-proof::before {
    left: -20vw;
    background-image: var(--proof-deco-left);
    transform: translate3d(0, calc(var(--parallax-y) * 0.8), 0);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
}

.lh-proof::after {
    right: -20vw;
    background-image: var(--proof-deco-right);
    transform: translate3d(0, calc(var(--parallax-y) * 0.8), 0);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, #000 0%, #000 44%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0) 100%);
}

.lh-proof-bg {
    position: absolute;
    inset: -170px 0 -160px;
    z-index: 0;
    transform: translate3d(0, var(--parallax-y), 0) scale(1.06);
    transform-origin: center;
    transition: transform 0.09s linear;
    background: linear-gradient(180deg, #eceff3, #eceff3);
    filter: none;
}

.lh-proof-stats,
.lh-proof-testimonials {
    position: relative;
    z-index: 2;
}

.lh-proof-stats {
    background: #eceff3;
    border-top: 1px solid #e4e8ef;
    border-bottom: 1px solid #e4e8ef;
}

.lh-proof-stats-grid {
    max-width: 780px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 205px;
}

.lh-proof-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.55rem 1rem;
}

.lh-proof-stat + .lh-proof-stat {
    border-left: 1px solid #dde3ec;
}

.lh-proof-icon {
    width: 38px;
    height: 38px;
    color: #ee64a7;
}

.lh-proof-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-proof-value {
    margin: 0.14rem 0 0;
    color: #111b2c;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(2.9rem, 5.4vw, 4.2rem);
    line-height: 1;
}

.lh-proof-label {
    margin: 0.27rem 0 0;
    font-size: 1.04rem;
    color: #5c6678;
}

.lh-proof-testimonials {
    position: relative;
    overflow: hidden;
    padding: 3.9rem 0 3.4rem;
    background: #eceff3;
}

.lh-proof-testimonials .container {
    position: relative;
    z-index: 2;
}

.lh-proof-slides {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    min-height: 286px;
    border-radius: 24px;
    border: 1px solid rgba(214, 223, 236, 0.9);
    background: #f7f9fc;
    box-shadow: 0 16px 30px rgba(24, 33, 47, 0.1);
}

.lh-proof-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.42s ease, transform 0.42s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.4rem;
}

.lh-proof-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.lh-proof-quote {
    margin: 0 auto;
    max-width: 760px;
    color: #586275;
    font-size: clamp(1.4rem, 2.65vw, 2.18rem);
    line-height: 1.48;
}

.lh-proof-slide h3 {
    margin: 1rem 0 0.2rem;
    font-size: clamp(1.35rem, 2.2vw, 1.82rem);
    color: #121b2a;
}

.lh-proof-role {
    margin: 0;
    color: #6a7485;
    font-size: 1rem;
}

.lh-proof-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.45rem;
}

.lh-proof-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #d2d9e5;
    background: rgba(255, 255, 255, 0.95);
    color: #5e697d;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.lh-proof-arrow:hover {
    background: #fff;
    color: #ea5ca2;
    transform: translateY(-1px);
}

.lh-proof-dots {
    display: flex;
    align-items: center;
    gap: 0.52rem;
}

.lh-proof-dot {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: transparent;
    opacity: 0.72;
    transition: transform 0.24s ease, opacity 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.lh-proof-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lh-proof-dot.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px #d9e0ed;
    opacity: 1;
    transform: translateY(-2px);
}

.lh-team {
    padding: 4rem 0 4.6rem;
    background: #ffffff;
}

.lh-team-header {
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.lh-team-header h2 {
    font-size: clamp(2rem, 3.8vw, 3rem);
}

.lh-team-header p {
    font-size: 1.08rem;
}

.lh-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.lh-team-card {
    position: relative;
    min-height: 380px;
    perspective: 1300px;
    background: transparent;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    cursor: pointer;
}

.lh-team-card-inner {
    position: relative;
    min-height: 380px;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.lh-team-card:hover .lh-team-card-inner,
.lh-team-card:focus-within .lh-team-card-inner,
.lh-team-card.is-flipped .lh-team-card-inner {
    transform: rotateY(180deg);
}

.lh-team-face {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}

.lh-team-front {
    background: #fff;
    display: flex;
    flex-direction: column;
}

.lh-team-back {
    transform: rotateY(180deg);
    background: linear-gradient(162deg, #31384d 0%, #262d3e 100%);
    color: #f5f8ff;
    padding: 1.5rem 1.3rem 1.2rem;
    justify-content: center;
}

.lh-team-photo {
    position: relative;
    height: 300px;
    background: #e8e8e8;
    overflow: hidden;
}

.lh-team-photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.lh-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.5s ease;
}

.lh-team-card:hover .lh-team-photo img {
    transform: scale(1.04);
}

.lh-team-body {
    padding: 0.8rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.lh-team-front .lh-team-body {
    background: #fff;
    border-top: 0;
    padding: 0.6rem 1.2rem 1.2rem;
    justify-content: center;
}

.lh-team-body h3,
.lh-team-name {
    margin: 0;
    color: #b88334;
    background: linear-gradient(180deg, #e3c27b 0%, #c39243 46%, #8e6220 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(1.25rem, 1.3vw, 1.6rem);
    font-weight: 700;
    line-height: 1.15;
    display: grid;
    align-content: start;
    gap: 0.02em;
}

.lh-team-name-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-team-body p {
    margin: 0.15rem 0 0;
    color: #6b7a8d;
    font-size: clamp(0.82rem, 0.85vw, 0.95rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.lh-team-back-copy h3,
.lh-team-back-name {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 1.95rem);
    color: #fff;
    line-height: 1.16;
}

.lh-team-role {
    margin: 0.28rem 0 0.62rem;
    color: #7de6f1;
    font-size: 1rem;
    font-weight: 600;
}

.lh-team-bio {
    margin: 0;
    color: #e9eefb;
    font-size: 0.98rem;
    line-height: 1.55;
}

.lh-team-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.lh-team-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(219, 229, 245, 0.72);
    background: #fff;
    color: #243147;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lh-team-socials a:hover {
    transform: translateY(-2px);
    background: var(--lh-cyan);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.9);
}

.lh-team-socials svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.4;
}

.lh-booking {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 5rem 0;
    background-image: var(--booking-bg);
    background-size: cover;
    background-position: center;
}

.lh-booking-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(17, 22, 30, 0.58), rgba(17, 22, 30, 0.46));
}

.lh-booking-shell {
    position: relative;
    z-index: 1;
}

.lh-booking-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
}

.lh-booking-hours {
    display: none;
}

.lh-booking-card {
    width: min(1220px, 100%);
    margin-inline: auto;
    border-radius: 28px;
    border: 1px solid rgba(220, 228, 239, 0.98);
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(9, 14, 24, 0.18);
    padding: 1.8rem 1.8rem 2rem;
}

.lh-booking-head {
    text-align: center;
    margin-bottom: 1.3rem;
}

.lh-booking-head h2 {
    margin: 0;
    color: #1a2537;
    font-size: clamp(1.9rem, 2.8vw, 2.75rem);
    text-align: center;
}

.lh-booking-head p {
    margin: 18px auto 0;
    max-width: 640px;
    color: #5f6c7d;
    font-size: 0.98rem;
    line-height: 1.6;
}

.lh-booking-card .form-grid {
    gap: 1.05rem;
}

.lh-booking-stage-controls {
    order: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lh-booking-stage-controls.is-stage-hidden,
.lh-booking-stage-agenda.is-stage-hidden,
.lh-booking-stage-checkout.is-stage-hidden {
    display: none;
}

.lh-booking-stage-controls.is-stage-open,
.lh-booking-stage-agenda.is-stage-open,
.lh-booking-stage-checkout.is-stage-open {
    display: block;
}

.lh-booking-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.lh-booking-progress-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.lh-booking-progress-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: rgba(198, 208, 222, 0.9);
}

.lh-booking-progress-step-number {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #17253d;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 800;
}

.lh-booking-progress-step-copy {
    min-width: 0;
}

.lh-booking-progress-step-copy p {
    margin: 0 0 0.14rem;
    color: #7f8fa4;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lh-booking-progress-step-copy strong {
    display: block;
    color: #1b2942;
    font-size: 0.98rem;
    line-height: 1.2;
}

.lh-booking-progress-step.is-active {
    border-color: rgba(121, 140, 184, 0.34);
    box-shadow: 0 10px 18px rgba(53, 187, 204, 0.08);
}

.lh-booking-progress-step.is-active::before {
    background: linear-gradient(90deg, #1cc8d4 0%, #7be5ea 100%);
}

.lh-booking-progress-step.is-active .lh-booking-progress-step-number {
    background: linear-gradient(135deg, #15233c 0%, #274368 100%);
}

.lh-booking-progress-step.is-complete {
    border-color: rgba(29, 199, 139, 0.28);
    box-shadow: 0 10px 18px rgba(29, 199, 139, 0.08);
}

.lh-booking-progress-step.is-complete::before {
    background: linear-gradient(90deg, #1fc98b 0%, #8ae5ba 100%);
}

.lh-booking-progress-step.is-complete .lh-booking-progress-step-number {
    background: linear-gradient(135deg, #17b97d 0%, #31d698 100%);
}

.lh-booking-progress-step.is-locked {
    opacity: 0.62;
    background: #f8fafc;
    box-shadow: none;
}

.lh-booking-service-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.lh-booking-service-group {
    margin-bottom: 0;
}

.lh-booking-service-native {
    display: none;
}

.lh-booking-center-native,
.lh-booking-center-native[hidden] {
    display: none !important;
}

.lh-booking-center-native select[multiple] {
    width: 100%;
    min-height: 168px;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(186, 198, 212, 0.98);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    color: #1b2942;
    font-size: 0.95rem;
    line-height: 1.45;
}

.lh-booking-center-native select[multiple]:focus-visible {
    outline: none;
    border-color: rgba(53, 187, 204, 0.72);
    box-shadow: 0 0 0 4px rgba(53, 187, 204, 0.16);
}

.lh-booking-center-native option {
    padding: 0.45rem 0.35rem;
}

.lh-booking-center-help {
    margin: 0;
    color: #6a7a90;
    font-size: 0.83rem;
    line-height: 1.45;
}

.lh-booking-service-picker-wrap {
    position: relative;
    display: grid;
    gap: 0.75rem;
    text-align: left;
}

.lh-booking-service-picker-wrap.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(4px);
    z-index: 29;
}

.lh-booking-service-picker-label {
    margin: 0;
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 700;
}

.lh-booking-service-trigger {
    min-height: 62px;
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(186, 198, 212, 0.98);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.lh-booking-service-trigger:hover,
.lh-booking-service-trigger.is-open {
    border-color: rgba(53, 187, 204, 0.52);
    box-shadow: 0 16px 30px rgba(17, 32, 58, 0.09);
}

.lh-booking-service-trigger:focus-visible {
    outline: 2px solid rgba(36, 53, 70, 0.18);
    outline-offset: 2px;
}

.lh-booking-service-trigger-copy {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
    justify-items: start;
    text-align: left;
}

.lh-booking-service-trigger-copy strong {
    color: #1b2942;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.lh-booking-service-trigger-copy strong.is-compact {
    font-size: 0.88rem;
    line-height: 1.18;
}

.lh-booking-service-trigger-copy span {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.lh-booking-service-trigger-icon {
    color: #4a5c75;
    font-size: 1.1rem;
    transition: transform 0.18s ease;
}

.lh-booking-service-trigger.is-open .lh-booking-service-trigger-icon {
    transform: rotate(180deg);
}

.lh-booking-service-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 2rem));
    max-height: min(78vh, 760px);
    border: 1px solid rgba(214, 224, 236, 0.98);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 34px 70px rgba(15, 23, 42, 0.26);
    overflow: hidden;
    z-index: 30;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.lh-booking-service-popover[hidden] {
    display: none !important;
}

.lh-booking-service-popover-head {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    justify-items: stretch;
}

.lh-booking-service-popover-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lh-booking-service-popover-title {
    margin: 0;
    color: #1b2942;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: left;
}

.lh-booking-service-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(206, 216, 229, 0.98);
    border-radius: 12px;
    background: #ffffff;
    color: #41536d;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lh-booking-service-close:hover,
.lh-booking-service-close:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.35);
    box-shadow: 0 10px 22px rgba(27, 41, 66, 0.12);
    color: #1b2942;
}

.lh-booking-service-search-wrap {
    position: relative;
    display: block;
}

.lh-booking-service-search-icon {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    color: #7b8796;
    font-size: 0.98rem;
}

.lh-booking-service-search {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 6.6rem 0.75rem 2.25rem;
    border: 1px solid rgba(206, 216, 229, 0.98);
    border-radius: 14px;
    background: #ffffff;
    color: #1b2942;
    font-size: 0.92rem;
}

.lh-booking-service-search-button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    min-width: 88px;
    min-height: 36px;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(53, 187, 204, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, #35bbcc 0%, #289daf 100%);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.lh-booking-service-search-button:hover,
.lh-booking-service-search-button:focus-visible {
    transform: translateY(calc(-50% - 1px));
    box-shadow: 0 10px 20px rgba(40, 157, 175, 0.2);
    filter: brightness(1.02);
}

.lh-booking-service-options {
    max-height: none;
    overflow: auto;
    padding: 0.9rem 1rem 1rem;
    display: grid;
    gap: 0.9rem;
    overscroll-behavior: contain;
    text-align: left;
}

.lh-booking-service-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem 1rem;
    border-top: 1px solid rgba(223, 231, 241, 0.98);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.lh-booking-service-selection-count {
    margin: 0;
    color: #4b5870;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.lh-booking-service-confirm-button {
    min-width: 132px;
    min-height: 42px;
    padding: 0.72rem 1.15rem;
    border: 1px solid rgba(29, 199, 139, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, #1fc98b 0%, #17b97d 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.lh-booking-service-confirm-button:hover,
.lh-booking-service-confirm-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(23, 185, 125, 0.24);
    filter: brightness(1.02);
}

@media (max-width: 768px) {
    .lh-booking-service-popover {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1.5rem);
        border-radius: 18px;
    }

    .lh-booking-service-popover-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .lh-booking-service-confirm-button {
        width: 100%;
    }
}

.lh-booking-service-category {
    display: grid;
    gap: 0.65rem;
    text-align: left;
}

.lh-booking-service-category[hidden] {
    display: none !important;
}

.lh-booking-service-category-title {
    margin: 0;
    color: #53657d;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lh-booking-service-category-list {
    display: grid;
    gap: 0.55rem;
}

.lh-booking-service-empty {
    margin: 0;
    padding: 1rem;
    border: 1px dashed rgba(206, 216, 229, 0.98);
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.lh-booking-service-empty[hidden] {
    display: none !important;
}

.lh-booking-service-option {
    width: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(220, 228, 239, 0.98);
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-service-option[hidden] {
    display: none !important;
}

.lh-booking-service-option:hover,
.lh-booking-service-option.is-selected {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.52);
    box-shadow: 0 14px 26px rgba(17, 32, 58, 0.08);
}

.lh-booking-service-option.is-selected {
    background: linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%);
}

.lh-booking-service-option-check {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(186, 198, 212, 0.98);
    background: #ffffff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0;
    font-weight: 900;
    line-height: 1;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.lh-booking-service-option-check::before {
    content: "\2713";
    font-size: 0.82rem;
    line-height: 1;
    color: inherit;
}

.lh-booking-service-option.is-selected .lh-booking-service-option-check {
    border-color: #17b97d;
    background: #17b97d;
    color: #ffffff;
    transform: scale(1.04);
}

.lh-booking-service-option-copy {
    width: 100%;
    display: grid;
    gap: 0.28rem;
    justify-items: start;
    text-align: left;
}

.lh-booking-service-option-name {
    color: #1b2942;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.3;
}

.lh-booking-service-option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

.lh-booking-member-group {
    margin-bottom: 0;
}

.lh-booking-member-native {
    display: none;
}

.lh-booking-member-picker-wrap {
    display: grid;
    gap: 0.75rem;
}

.lh-booking-selected-services {
    display: grid;
    gap: 0.72rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(214, 224, 236, 0.98);
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.lh-booking-selected-services[hidden] {
    display: none !important;
}

.lh-booking-selected-services-label {
    margin: 0;
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.lh-booking-selected-services-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.lh-booking-selected-service {
    min-height: 78px;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(210, 220, 232, 0.92);
    border-radius: 18px;
    background: #ffffff;
    display: grid;
    gap: 0.32rem;
    align-content: start;
    box-shadow: 0 10px 22px rgba(23, 37, 61, 0.05);
}

.lh-booking-selected-service-name {
    color: #18284a;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.25;
}

.lh-booking-selected-service-meta {
    color: #64748b;
    font-size: 0.81rem;
    line-height: 1.45;
}

.lh-booking-center-picker-wrap {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.lh-booking-center-picker-wrap[hidden] {
    display: none !important;
}

.lh-booking-center-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.lh-booking-member-picker-label {
    margin: 0;
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 700;
}

.lh-booking-member-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.lh-booking-member-picker.is-disabled {
    opacity: 0.7;
}

.lh-booking-member-picker-empty {
    margin: 0;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px dashed rgba(186, 198, 212, 0.98);
    background: #f8fafc;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.5;
}

.lh-booking-member-card {
    min-height: 94px;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(210, 220, 232, 0.98);
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-member-card:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.48);
    box-shadow: 0 14px 26px rgba(17, 32, 58, 0.08);
}

.lh-booking-member-card:disabled {
    cursor: not-allowed;
}

.lh-booking-member-card.is-selected {
    border-color: rgba(36, 53, 70, 0.72);
    background: linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%);
    box-shadow: 0 16px 28px rgba(32, 60, 97, 0.12);
}

.lh-booking-member-card.is-selected .lh-booking-member-card-name {
    color: #18284a;
}

.lh-booking-member-card.is-selected .lh-booking-member-card-meta {
    color: #365a86;
}

.lh-booking-center-card.is-any .lh-booking-member-card-avatar {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}

.lh-booking-center-chip {
    min-height: 52px;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(210, 220, 232, 0.98);
    border-radius: 999px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-center-chip:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(53, 187, 204, 0.48);
    box-shadow: 0 12px 24px rgba(17, 32, 58, 0.08);
}

.lh-booking-center-chip:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.lh-booking-center-chip.is-selected {
    border-color: rgba(36, 53, 70, 0.72);
    background: linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%);
    box-shadow: 0 14px 26px rgba(32, 60, 97, 0.1);
}

.lh-booking-center-chip-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(186, 198, 212, 0.98);
    background: #ffffff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex: 0 0 auto;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lh-booking-center-chip.is-selected .lh-booking-center-chip-check {
    border-color: #243546;
    background: #243546;
    color: #ffffff;
}

.lh-booking-center-chip-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.lh-booking-center-chip-name {
    color: #1b2942;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.15;
}

.lh-booking-center-chip-meta {
    color: #64748b;
    font-size: 0.77rem;
    line-height: 1.35;
}

.lh-booking-member-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex: 0 0 auto;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2937 0%, #44546c 100%);
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 22px rgba(31, 41, 55, 0.18);
}

.lh-booking-member-card-avatar.has-photo {
    background: #e2e8f0;
    box-shadow: none;
}

.lh-booking-member-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lh-booking-member-card-copy {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.lh-booking-member-card-name {
    color: #1b2942;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.2;
}

.lh-booking-member-card-meta {
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.45;
}

.lh-booking-service-note {
    margin: 0;
    color: #6a7a90;
    font-size: 0.85rem;
    line-height: 1.5;
}

.lh-booking-stage-card {
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(223, 231, 241, 0.98);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.lh-booking-stage-card.is-stage-hidden {
    display: none;
}

.lh-booking-stage-card .lh-booking-stage-head {
    margin-bottom: 0.9rem;
}

.lh-booking-stage-card .form-group {
    margin-bottom: 0;
}

.bk-flow .form-group {
    gap: 0.2rem;
}

.lh-booking-stage-note {
    margin: 0.75rem 0 0;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.lh-booking-stage-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.lh-booking-stage-button {
    min-height: 46px;
    padding: 0.82rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: #243546;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(36, 53, 70, 0.16);
}

.lh-booking-stage-button.is-secondary {
    background: #ffffff;
    color: #243546;
    border: 1px solid rgba(186, 198, 212, 0.98);
    box-shadow: none;
}

.lh-booking-stage-agenda {
    order: 2;
}

.lh-booking-stage-checkout {
    order: 3;
}

.lh-booking-stage-details {
    order: 4;
}

.lh-booking-client-field {
    order: 5;
}

.lh-booking-stage-details,
.lh-booking-client-field {
    align-self: start;
}

.lh-booking-card .form-group label {
    color: #4b5870;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

.lh-booking-card input,
.lh-booking-card select,
.lh-booking-card textarea {
    border-color: #bac6d4;
    background: #fff;
    min-height: 48px;
}

.lh-booking-readonly-display {
    background: #eef5fb;
    border-color: #c4d3e4;
    color: #23324b;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.lh-booking-readonly-display::placeholder {
    color: #8393aa;
}

.lh-booking-card textarea {
    min-height: 92px;
}

.lh-booking-card .empty {
    border-style: solid;
    border-color: #cfdae7;
    background: #f5f9fc;
    color: #4f5e74;
}

.lh-booking-submit {
    margin-top: 0.95rem;
    min-width: 170px;
    min-height: 48px;
    border: 1px solid #1c9b5f;
    background: linear-gradient(180deg, #2dcf80 0%, #1fa966 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(31, 169, 102, 0.22);
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.lh-booking-submit:hover,
.lh-booking-submit:focus-visible {
    background: linear-gradient(180deg, #34d889 0%, #229f63 100%);
    border-color: #1b8c56;
    box-shadow: 0 18px 32px rgba(31, 169, 102, 0.28);
    color: #ffffff;
}

.lh-booking-submit:hover {
    transform: translateY(-1px);
}

.lh-booking-submit:focus-visible {
    outline: 3px solid rgba(52, 216, 137, 0.24);
    outline-offset: 2px;
}

.lh-booking-submit:disabled,
.lh-booking-submit[disabled] {
    border-color: #b9d8c7;
    background: linear-gradient(180deg, #d7efe1 0%, #c8e5d4 100%);
    box-shadow: none;
    color: #6b8a76;
    cursor: not-allowed;
    transform: none;
}

.lh-booking-card .form-group-full {
    grid-column: 1 / -1;
}

.lh-booking-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    padding: 0 0 0.7rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-steps.is-legacy-hidden {
    display: none;
}

.lh-booking-step-card.is-step-hidden {
    display: none;
}

.lh-booking-step-card {
    position: relative;
    overflow: visible;
    min-height: 0;
    padding: 0.9rem 0 0.85rem;
    border-radius: 0;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    display: grid;
    grid-template-rows: auto;
    gap: 0.3rem;
    box-shadow: none;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}

.lh-booking-step-card.is-clickable {
    cursor: pointer;
}

.lh-booking-step-card.is-clickable:hover {
    border-bottom-color: rgba(36, 53, 70, 0.42);
}

.lh-booking-step-card.is-clickable:focus-visible {
    outline: 2px solid rgba(36, 53, 70, 0.22);
    outline-offset: 2px;
}

.lh-booking-step-card::before {
    display: none;
}

.lh-booking-step-card::after {
    display: none;
}

.lh-booking-step-card:last-child::after {
    display: none;
}

.lh-booking-step-card.is-active {
    opacity: 1;
}

.lh-booking-step-card.is-complete {
    opacity: 0.95;
}

.lh-booking-step-card.is-locked {
    opacity: 0.45;
}

.lh-booking-step-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.lh-booking-stage-head {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
}

.lh-booking-step-card-head p {
    display: none;
}

.lh-booking-step-card-head h4 {
    margin: 0;
    color: #9aa7b8;
    font-size: 0.99rem;
    font-weight: 600;
    line-height: 1.2;
}

.lh-booking-step-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid rgba(155, 167, 184, 0.88);
    color: #66758a;
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 auto;
    box-shadow: none;
}

.lh-booking-step-card.is-active .lh-booking-step-card-head h4,
.lh-booking-step-card.is-complete .lh-booking-step-card-head h4 {
    color: #1b2942;
}

.lh-booking-step-card.is-active {
    opacity: 1;
    border-bottom-color: #243546;
}

.lh-booking-step-card.is-active .lh-booking-step-badge {
    border-color: #243546;
    color: #243546;
}

.lh-booking-step-card.is-complete .lh-booking-step-badge {
    background: linear-gradient(135deg, #18b979 0%, #33d28f 100%);
    border-color: #18b979;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(24, 185, 121, 0.18);
}

.lh-booking-step-card.is-complete {
    opacity: 1;
}

.lh-booking-step-card.is-complete .lh-booking-step-badge {
    font-size: 0;
}

.lh-booking-step-card.is-complete .lh-booking-step-badge::before {
    content: "\2714";
    font-size: 0.9rem;
    line-height: 1;
}

.lh-booking-checkout-card {
    padding: 1.05rem 1.05rem 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #fbfcfe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.lh-booking-checkout-card.is-locked {
    opacity: 0.72;
    background: #f8fafc;
}

.lh-booking-checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 1rem;
    align-items: start;
}

.lh-booking-checkout-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-checkout-kicker {
    margin: 0 0 0.24rem;
    color: #7f8fa4;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lh-booking-checkout-head h3 {
    margin: 0;
    color: #1b2942;
    font-size: 1.18rem;
    line-height: 1.2;
}

.lh-booking-checkout-note {
    margin: 0;
    max-width: 420px;
    color: #6a7a90;
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: right;
}

.lh-booking-checkout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.lh-booking-checkout-grid .form-group {
    margin-bottom: 0;
}

.lh-booking-checkout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.lh-booking-checkout-actions .lh-booking-submit {
    margin-top: 0;
    margin-left: auto;
}

.lh-booking-checkout-summary {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.lh-booking-checkout-summary-kicker {
    margin: 0;
    color: #5e6f86;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lh-booking-checkout-summary-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #f7fafc;
    box-shadow: 0 12px 24px rgba(17, 32, 58, 0.05);
}

.lh-booking-checkout-summary-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.lh-booking-checkout-summary-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2937 0%, #3d4c63 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lh-booking-checkout-summary-avatar.has-photo {
    background: #e2e8f0;
}

.lh-booking-checkout-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lh-booking-checkout-summary-category {
    margin: 0 0 0.18rem;
    color: #6a7a90;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lh-booking-checkout-summary-title {
    margin: 0;
    color: #1b2942;
    font-size: 1.12rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.lh-booking-checkout-summary-list {
    display: grid;
    gap: 0.55rem;
}

.lh-booking-checkout-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-checkout-summary-item span {
    color: #61718a;
    font-size: 0.82rem;
    font-weight: 600;
}

.lh-booking-checkout-summary-item strong {
    color: #1b2942;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: right;
}

.lh-booking-step-fields {
    display: grid;
    gap: 0.62rem;
    align-content: start;
}

.lh-booking-step-fields .lh-booking-service-bar {
    grid-template-columns: 1fr;
    gap: 0.62rem;
    align-items: start;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.lh-booking-step-fields .lh-booking-service-note {
    font-size: 0.8rem;
}

.lh-booking-step-note {
    display: none;
}

.lh-booking-agenda {
    border: 1px solid rgba(223, 231, 241, 0.98);
    border-radius: 24px;
    background: #ffffff;
    padding: 0;
    display: grid;
    gap: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 16px 34px rgba(17, 32, 58, 0.06);
}

.lh-booking-agenda.is-disabled {
    opacity: 0.7;
}

.lh-booking-agenda-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
    align-items: end;
    gap: 1rem;
    padding: 1rem 1.1rem 0.9rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-agenda-kicker {
    margin: 0 0 0.2rem;
    color: #67788e;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lh-booking-agenda h3 {
    margin: 0;
    color: #162640;
    font-size: 1.02rem;
    line-height: 1.35;
}

.lh-booking-agenda-status {
    margin: 0;
    max-width: 430px;
    padding: 0.58rem 0.76rem;
    border-radius: 12px;
    border: 1px solid rgba(223, 231, 241, 0.98);
    background: #fafcfe;
    color: #5e6f86;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: left;
    box-shadow: none;
}

.lh-booking-agenda-status[data-tone="success"] {
    color: #18784d;
    background: rgba(234, 251, 242, 0.95);
    border-color: rgba(168, 226, 194, 0.92);
}

.lh-booking-agenda-status[data-tone="warning"] {
    color: #9a6300;
    background: rgba(255, 248, 230, 0.95);
    border-color: rgba(241, 214, 153, 0.92);
}

.lh-booking-agenda-status[data-tone="error"] {
    color: #b02d2d;
    background: rgba(255, 241, 241, 0.95);
    border-color: rgba(240, 193, 193, 0.92);
}

.lh-booking-agenda-status[data-tone="loading"] {
    color: #1f5fbf;
    background: rgba(239, 246, 255, 0.95);
    border-color: rgba(186, 210, 245, 0.92);
}

.lh-booking-scheduler {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: auto auto;
    background: rgba(255, 255, 255, 0.98);
    overflow: hidden;
    box-shadow: none;
}

.lh-booking-summary-panel,
.lh-booking-calendar-panel,
.lh-booking-times-panel {
    padding: 1rem 1.05rem;
}

.lh-booking-summary-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1rem;
    background: #f7fafc;
    border-left: 1px solid rgba(223, 231, 241, 0.98);
    border-right: 0;
}

.lh-booking-calendar-panel {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
    background: #ffffff;
}

.lh-booking-times-panel {
    grid-column: 1;
    grid-row: 2;
    background: #ffffff;
}

.lh-booking-summary-lead {
    margin: 0;
    color: #2e3b52;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-summary-profile {
    display: grid;
    justify-items: start;
    gap: 0.78rem;
    margin-bottom: 0;
}

.lh-booking-summary-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2937 0%, #3d4c63 100%);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 14px 30px rgba(31, 41, 55, 0.18);
}

.lh-booking-summary-avatar.has-photo {
    background: #e2e8f0;
    box-shadow: none;
}

.lh-booking-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lh-booking-summary-copy {
    display: grid;
    gap: 0.18rem;
}

.lh-booking-summary-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.lh-booking-summary-chip:has([data-booking-staff-value]) {
    order: 1;
}

.lh-booking-summary-chip:has([data-booking-duration-value]) {
    order: 2;
}

.lh-booking-summary-chip:has([data-booking-timezone-value]) {
    order: 3;
}

.lh-booking-summary-chip {
    display: grid;
    gap: 0.16rem;
    min-height: 0;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(90, 104, 121, 0.35);
    background: rgba(255, 255, 255, 0.98);
}

.lh-booking-summary-chip-label {
    color: #33405a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.lh-booking-summary-chip-value {
    color: #61718a;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
}

.lh-booking-summary-eyebrow,
.lh-booking-calendar-kicker,
.lh-booking-times-kicker {
    margin: 0;
    color: #62758d;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lh-booking-summary-title,
.lh-booking-calendar-head h4,
.lh-booking-times-head h4 {
    margin: 0;
    color: #18284a;
    font-size: 1.08rem;
    line-height: 1.2;
}

.lh-booking-summary-title {
    font-size: 1.3rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.lh-booking-summary-title.is-compact,
.lh-booking-checkout-summary-title.is-compact {
    font-size: 1.05rem;
    line-height: 1.18;
}

.lh-booking-summary-title.has-tooltip,
.lh-booking-checkout-summary-title.has-tooltip {
    position: relative;
    cursor: help;
}

.lh-booking-summary-title.has-tooltip::after,
.lh-booking-checkout-summary-title.has-tooltip::after {
    content: attr(data-service-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 0.55rem);
    min-width: 220px;
    max-width: 320px;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(24, 40, 74, 0.96);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: pre-line;
    box-shadow: 0 18px 34px rgba(17, 32, 58, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 6;
}

.lh-booking-summary-title.has-tooltip::before,
.lh-booking-checkout-summary-title.has-tooltip::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: calc(100% + 0.08rem);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid rgba(24, 40, 74, 0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 5;
    transform: translateY(6px);
}

.lh-booking-summary-title.has-tooltip:hover::after,
.lh-booking-summary-title.has-tooltip:hover::before,
.lh-booking-summary-title.has-tooltip:focus-visible::after,
.lh-booking-summary-title.has-tooltip:focus-visible::before,
.lh-booking-checkout-summary-title.has-tooltip:hover::after,
.lh-booking-checkout-summary-title.has-tooltip:hover::before,
.lh-booking-checkout-summary-title.has-tooltip:focus-visible::after,
.lh-booking-checkout-summary-title.has-tooltip:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

.lh-booking-summary-list,
.lh-booking-summary-item {
    display: none;
}

.lh-booking-calendar-head,
.lh-booking-times-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(223, 231, 241, 0.98);
}

.lh-booking-calendar-nav {
    display: flex;
    gap: 0.45rem;
}

.lh-booking-calendar-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(218, 227, 239, 0.96);
    background: #fff;
    color: #243147;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lh-booking-calendar-nav-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(45, 152, 176, 0.5);
    box-shadow: 0 12px 22px rgba(24, 43, 71, 0.08);
}

.lh-booking-calendar-nav-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lh-booking-weekdays {
    display: none;
}

.lh-booking-calendar-grid {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.2rem 0 0.5rem;
    scroll-behavior: smooth;
}

.lh-booking-calendar-day {
    min-width: 64px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    padding: 0.3rem 0.15rem;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.2rem;
    text-align: center;
    box-shadow: none;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.lh-booking-calendar-day:hover:not(:disabled) {
    transform: translateY(-1px);
}

.lh-booking-calendar-day.is-outside-month {
    opacity: 1;
}

.lh-booking-calendar-day.is-unavailable {
    background: transparent;
}

.lh-booking-calendar-day.is-unavailable .lh-booking-calendar-day-weekday,
.lh-booking-calendar-day.is-unavailable .lh-booking-calendar-day-number {
    color: #c0c8d4;
}

.lh-booking-calendar-day.is-active {
    background: transparent;
}

.lh-booking-calendar-day.is-active .lh-booking-calendar-day-weekday {
    color: #1c2d43;
}

.lh-booking-calendar-day.is-active .lh-booking-calendar-day-number {
    background: #243546;
    color: #ffffff;
}

.lh-booking-calendar-day.is-active .lh-booking-calendar-day-indicator {
    opacity: 1;
}

.lh-booking-calendar-day.is-today:not(.is-active) .lh-booking-calendar-day-number {
    background: #eef5ff;
    color: #2f6fe0;
}

.lh-booking-calendar-day:disabled {
    cursor: not-allowed;
}

.lh-booking-calendar-day-weekday {
    color: #17253d;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
}

.lh-booking-calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 18px;
    color: #17253d;
    font-size: 1.05rem;
    font-weight: 800;
    background: transparent;
}

.lh-booking-calendar-day:not(.is-active):not(.is-unavailable) .lh-booking-calendar-day-number {
    color: #111827;
}

.lh-booking-calendar-day-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #243546;
    opacity: 0;
}

.lh-booking-calendar-day-meta {
    display: none;
}

.lh-booking-time-format {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: #eef3f8;
}

.lh-booking-time-format button {
    min-width: 50px;
    min-height: 34px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #57677d;
    font-size: 0.88rem;
    font-weight: 700;
}

.lh-booking-time-format button.is-active {
    background: #fff;
    color: #17253d;
    box-shadow: 0 8px 18px rgba(23, 37, 61, 0.08);
}

.lh-booking-slot-list {
    display: grid;
    gap: 1rem;
    align-content: start;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.lh-booking-slot-group {
    display: grid;
    gap: 0.7rem;
}

.lh-booking-slot-group-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.lh-booking-slot-group-title {
    margin: 0;
    color: #18284a;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.lh-booking-slot-group-line {
    flex: 1;
    height: 1px;
    background: rgba(208, 217, 229, 0.95);
}

.lh-booking-slot-group-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.lh-booking-slot-chip {
    appearance: none;
    border: 1px solid rgba(59, 72, 92, 0.32);
    border-radius: 7px;
    background: #ffffff;
    padding: 0.5rem 0.82rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 76px;
    min-height: 44px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lh-booking-slot-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(36, 53, 70, 0.58);
    box-shadow: 0 10px 20px rgba(24, 43, 71, 0.08);
}

.lh-booking-slot-chip.is-active {
    border-color: rgba(89, 97, 242, 0.5);
    background: rgba(242, 244, 255, 0.98);
    box-shadow: 0 10px 20px rgba(89, 97, 242, 0.1);
}

.lh-booking-slot-dot {
    display: none;
}

.lh-booking-slot-body {
    display: grid;
    gap: 0.05rem;
    width: 100%;
    justify-items: center;
}

.lh-booking-slot-time {
    color: #18284a;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.1;
}

.lh-booking-slot-meta {
    display: none;
}

.lh-booking-selection {
    margin: 0;
    padding: 0.84rem 0.96rem;
    border-radius: 18px;
    border: 1px solid rgba(185, 225, 233, 0.9);
    background: rgba(230, 249, 252, 0.85);
    color: #16596a;
    font-size: 0.9rem;
    font-weight: 700;
}

.lh-booking-manual-hint,
.lh-booking-empty {
    margin: 0;
    color: #6b7b90;
    font-size: 0.85rem;
    line-height: 1.45;
}

.lh-booking-manual-hint {
    display: none;
}

.lh-booking-card input[data-booking-date],
.lh-booking-card input[data-booking-time] {
    background: linear-gradient(180deg, #fbfdff 0%, #f1f6fb 100%);
    font-weight: 700;
}

.site-footer {
    background:
        radial-gradient(900px 420px at 8% -15%, rgba(36, 57, 83, 0.48), transparent 72%),
        linear-gradient(180deg, #0c121c 0%, #080f18 100%);
    color: #d6dfed;
    border-top: 1px solid rgba(90, 128, 170, 0.34);
}

.lh-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.95fr;
    gap: 2.2rem;
    padding: 3rem 0 1.7rem;
}

.site-footer .brand {
    color: #cd9a3b;
    font-size: clamp(3rem, 4.6vw, 4.6rem);
    line-height: 0.88;
}

.site-footer .brand-logo {
    max-height: 124px;
}

.site-footer h4 {
    margin: 0;
    color: #f2f6ff;
    font-size: clamp(1.15rem, 1.7vw, 1.6rem);
    font-weight: 600;
}

.lh-footer-line {
    width: 92px;
    height: 2px;
    display: block;
    margin: 1rem 0 1.25rem;
    background: linear-gradient(90deg, #2dd1df, #67dae6);
}

.lh-footer-tagline {
    margin: 0.8rem 0 0.7rem;
    color: #39d8e6;
    font-size: 1.48rem;
    font-style: italic;
    font-weight: 700;
}

.lh-footer-photo {
    margin: 0;
    width: min(280px, 100%);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(121, 152, 188, 0.34);
}

.lh-footer-photo img {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

.lh-footer-contact {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
    max-width: 420px;
}

.lh-footer-contact li {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 0.52rem;
}

.lh-footer-icon {
    width: 18px;
    height: 18px;
    color: #9eb5d0;
    margin-top: 0.2rem;
}

.lh-footer-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-footer-contact a {
    color: #d4dfef;
    font-size: 1.08rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lh-footer-contact a:hover {
    color: #49deeb;
}

.lh-footer-map-frame {
    width: 100%;
    max-width: 430px;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(111, 145, 183, 0.34);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.34);
}

.lh-footer-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.lh-footer-map-link {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 999px;
    padding: 0.48rem 1rem;
    background: var(--lh-cyan);
    color: #fff;
    font-size: 0.96rem;
    font-weight: 700;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lh-footer-map-link:hover {
    background: #18b2c4;
    transform: translateY(-1px);
}

.lh-footer-nav {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.lh-footer-nav a {
    color: #8ec7ff;
    font-size: 1.08rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lh-footer-nav a:hover {
    color: #55e1ff;
}

.lh-footer-social {
    margin-top: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: fit-content;
    padding: 0.45rem 0.6rem;
    border-radius: 12px;
    background: rgba(188, 201, 218, 0.26);
    border: 1px solid rgba(197, 211, 230, 0.3);
}

.lh-footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    background: #fff;
    color: #fff;
    box-shadow: 0 6px 16px rgba(8, 16, 27, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.lh-footer-social a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(8, 16, 27, 0.36);
    filter: brightness(1.04);
}

.lh-footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

.lh-footer-social a[aria-label='Facebook'] {
    background: #1877f2;
    color: #ffffff;
}

.lh-footer-social a[aria-label='Instagram'] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 8%, #fd5949 45%, #d6249f 62%, #285aeb 90%);
    color: #ffffff;
}

.lh-footer-social a[aria-label='Instagram'] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lh-footer-social a[aria-label='Google'] {
    background: #ffffff;
    color: #1f2e45;
}

.lh-footer-social a[aria-label='Google'] svg {
    width: 18px;
    height: 18px;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(1) {
    fill: #4285f4;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(2) {
    fill: #34a853;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(3) {
    fill: #fbbc05;
}

.lh-footer-social a[aria-label='Google'] svg path:nth-child(4) {
    fill: #ea4335;
}

.site-footer p {
    margin: 0;
    color: #a8b7cc;
}

.lh-footer-bottom {
    border-top: 1px solid rgba(84, 116, 151, 0.36);
    padding: 0.95rem 0 1.1rem;
}

.lh-footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #9fb0c8;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.admin-body .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Admin */

.admin-body {
    background: linear-gradient(180deg, #eef3fa 0%, #e7edf7 100%);
    font-family: 'Manrope', sans-serif;
    color: #17263a;
}

.admin-layout {
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-columns 0.22s ease;
}

.admin-body.admin-sidebar-collapsed .admin-layout {
    grid-template-columns: 78px minmax(0, 1fr);
}

.admin-sidebar {
    position: relative;
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 52%, #172554 100%);
    color: #e8f0ff;
    padding: 0.75rem 0.45rem 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    border-right: 1px solid rgba(147, 197, 253, 0.24);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.admin-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.admin-sidebar .brand {
    position: relative;
    z-index: 1;
    color: transparent;
    font-size: 0;
    font-family: 'Manrope', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0;
}

.admin-sidebar .brand::before {
    content: 'LS';
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #e8f9ff;
    background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 8px 16px rgba(23, 37, 84, 0.34);
}

.admin-nav {
    display: grid;
    gap: 0.44rem;
    position: relative;
    z-index: 1;
    justify-items: center;
}

.admin-nav > a {
    position: relative;
    width: 44px;
    min-height: 44px;
    color: #e9eef8;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0;
    font-size: 0;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-nav > span.is-nav-locked,
.admin-nav > span.admin-nav-locked-web {
    position: relative;
    width: 44px;
    min-height: 44px;
    display: block;
    color: #e9eef8;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0;
    font-size: 0;
    cursor: not-allowed;
    opacity: 0.58;
    user-select: none;
}

.admin-nav > span.is-nav-locked::before,
.admin-nav > span.admin-nav-locked-web::before {
    content: attr(data-icon);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: currentColor;
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-weight: 500;
    line-height: 1;
}

.admin-nav > span.is-nav-locked.is-active,
.admin-nav > span.admin-nav-locked-web.is-active {
    opacity: 1;
    background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(147, 197, 253, 0.78);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.42);
}

.admin-nav-group {
    position: relative;
}

.admin-nav-group > summary {
    position: relative;
    width: 44px;
    min-height: 44px;
    color: #e9eef8;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0;
    font-size: 0;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    list-style: none;
    cursor: pointer;
}

.admin-nav-group > summary::-webkit-details-marker {
    display: none;
}

.admin-nav-group > summary::before {
    content: attr(data-icon);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: currentColor;
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-weight: 500;
    line-height: 1;
}

.admin-nav-group > summary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(186, 201, 220, 0.16);
    color: #ffffff;
}

.admin-nav-group.is-active > summary {
    background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(147, 197, 253, 0.78);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.42);
}

.admin-nav-flyout {
    position: fixed;
    display: none;
    width: 280px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border-radius: 18px;
    border: 1px solid rgba(214, 223, 237, 0.95);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 26px 46px rgba(10, 16, 26, 0.18);
    padding: 0.7rem 0.65rem;
    z-index: 230;
    backdrop-filter: blur(10px);
    overflow: auto;
}

.admin-nav-group[open] > .admin-nav-flyout {
    display: grid;
    gap: 0.14rem;
}

.admin-nav-flyout .admin-nav-flyout-title {
    margin: 0.1rem 0.35rem 0.55rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: #0f1828;
}

.admin-nav-flyout a {
    display: flex;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 750;
    color: #142237;
    padding: 0.62rem 0.7rem;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid transparent;
    width: 100%;
    justify-content: flex-start;
}

.admin-nav-flyout a:hover {
    background: #f1f5fb;
}

.admin-nav-flyout a.is-active {
    background: rgba(95, 86, 255, 0.12);
    border-color: rgba(95, 86, 255, 0.22);
}

/* Web editor side panel (same interaction style as Clients module) */
.admin-body.admin-page-web-editor .admin-nav-flyout {
    display: none !important;
}

.admin-web-editor-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 68px);
}

.admin-web-editor-side {
    margin: 0;
    padding: 0;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid #dedfe4;
    background: #ffffff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.admin-web-editor-side-head {
    min-height: 60px;
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d7ddea;
}

.admin-web-editor-side-head h2 {
    margin: 0;
    color: #121f33;
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-web-editor-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.48rem 0.48rem 0.9rem;
}

.admin-web-editor-nav a {
    display: block;
    min-height: 40px;
    padding: 0.62rem 0.72rem;
    border-radius: 10px;
    color: #0f1930;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    border: 1px solid transparent;
}

.admin-web-editor-nav a:hover {
    background: #f4f6fd;
}

.admin-web-editor-nav a.is-active {
    background: #e8e7f8;
    border-color: #d7d0f4;
}

.admin-web-editor-main {
    min-width: 0;
    padding: 0.75rem 1rem 1.2rem;
}

/* Reusable admin module shell (same visual grammar as clients) */
.admin-module-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 68px);
}

.admin-module-side {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #ffffff;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 1px solid #dedfe4;
    box-shadow: none;
    overflow-y: auto;
}

.admin-module-side-head {
    min-height: 60px;
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d7ddea;
    position: relative;
}

.admin-module-side-head h2 {
    margin: 0;
    color: #111b2b;
    font-size: 1.03rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-module-side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    overflow-y: auto;
    background: #ffffff;
    padding: 0.48rem 0.48rem 0.9rem;
}

.admin-module-side-nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.62rem 0.72rem;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 10px;
    color: #1a2739;
    border: 1px solid transparent;
}

.admin-module-side-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6f0;
}

.admin-module-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
    color: #1b2230;
}

.admin-module-side-nav a[aria-disabled='true'] {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

.admin-module-side-section {
    margin: 0.6rem 0.58rem 0.2rem;
    color: #16283d;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.admin-module-side-divider {
    margin: 0.45rem 0.5rem;
    border: 0;
    border-top: 1px solid #e3e7ef;
}

.admin-module-side-toggle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #d7dce5;
    background: #f5f6f8;
    color: #2a303a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(18, 35, 55, 0.12);
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.admin-module-side-toggle:hover {
    background: #eef1f5;
}

.admin-module-main {
    min-width: 0;
    padding: 0.75rem 1rem 1.2rem;
}

@media (min-width: 981px) {
    .admin-body.admin-page-module-pro .admin-module-layout {
        display: block;
    }

    .admin-body.admin-page-module-pro .admin-module-side {
        position: fixed;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        z-index: 14;
    }

    .admin-body.admin-page-module-pro .admin-module-main {
        margin-left: 210px;
    }
}

@media (max-width: 980px) {
    .admin-module-layout {
        display: block;
        min-height: 0;
    }

    .admin-module-side {
        position: static;
        height: auto;
        min-height: 0;
        max-height: none;
        border: 1px solid #d5deeb;
        border-radius: 14px;
        margin: 0 0 0.85rem;
    }

    .admin-module-side-toggle {
        display: none;
    }

    .admin-module-main {
        margin-left: 0;
        padding: 0;
    }
}

.admin-body.admin-page-services-catalog .admin-module-side {
    border-right-color: #dadde3;
}

.admin-body.admin-page-services-catalog .admin-content {
    background: #f6f7fa;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.admin-body.admin-page-services-catalog .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-services-form .admin-content {
    background: #f6f7fa;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-services-form .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-services-order .admin-layout {
    grid-template-columns: 1fr;
}

.admin-body.admin-page-services-order .admin-sidebar,
.admin-body.admin-page-services-order .admin-topbar {
    display: none;
}

.admin-body.admin-page-services-order .admin-content {
    min-height: 100vh;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
}

.admin-body.admin-page-memberships-catalog .admin-content,
.admin-body.admin-page-memberships-form .admin-content {
    background: #f6f7fa;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-memberships-catalog .admin-topbar,
.admin-body.admin-page-memberships-form .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-inventory-catalog .admin-content {
    background: #f6f7fa;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-inventory-catalog .admin-topbar {
    margin: 0;
}

.inventory-page-shell {
    width: min(1080px, calc(100% - 2rem));
    margin: 0 auto 2rem;
}

.inventory-page-shell-form {
    width: min(980px, calc(100% - 2rem));
}

.inventory-top-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: min(1080px, calc(100% - 2rem));
    padding: 0 0 0.9rem;
    margin: 0 auto 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
}

.inventory-top-title-form {
    width: min(980px, calc(100% - 2rem));
    justify-content: flex-start;
    text-align: left;
    padding: 0.72rem 0.82rem;
    background: rgba(247, 251, 255, 0.88);
    border: 1px solid #d4deec;
    box-shadow: 0 10px 22px rgba(17, 35, 55, 0.06);
}

.inventory-kicker {
    margin: 0 0 0.45rem;
    color: #746251;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.inventory-top-title h1 {
    margin: 0;
    color: #1f1c18;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.12;
}

.inventory-top-title p:last-of-type {
    margin: 0.55rem 0 0;
    max-width: 54ch;
    color: #6b6259;
    line-height: 1.6;
}

.inventory-top-title-form p:last-of-type {
    margin-left: 0;
    margin-right: 0;
}

.inventory-editor,
.inventory-list-shell {
    display: grid;
}

.inventory-product-form {
    display: grid;
    gap: 1rem;
}

.inventory-product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 298px);
    gap: 1.1rem;
    align-items: start;
}

.inventory-product-main,
.inventory-product-aside {
    display: grid;
    gap: 1rem;
}

.inventory-product-card,
.inventory-list-card {
    padding: 0;
    border-radius: 12px;
    border: 1px solid #d6d0c8;
    background: #fcfcfb;
    box-shadow: 0 10px 28px rgba(36, 30, 23, 0.05);
    overflow: hidden;
}

.inventory-product-card-head,
.inventory-list-head {
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid #ece5de;
}

.inventory-product-card-head h2,
.inventory-list-head h2 {
    margin: 0;
    color: #171411;
    font-size: 0.98rem;
}

.inventory-product-card-head p,
.inventory-list-head p {
    margin: 0;
    color: #6f665d;
    font-size: 0.74rem;
    line-height: 1.45;
}

.inventory-card-kicker {
    color: #7b6858;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.inventory-product-card-body {
    display: grid;
    gap: 1rem;
    padding: 0.95rem 1.1rem 1.15rem;
}

.inventory-fields-grid,
.inventory-inline-fields,
.inventory-split-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1rem;
}

.inventory-fields-grid .is-full,
.inventory-inline-fields .is-full,
.inventory-split-fields .is-full {
    grid-column: 1 / -1;
}

.inventory-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.38rem;
    color: #171411;
    font-size: 0.75rem;
    font-weight: 800;
}

.inventory-field-hint {
    color: #7e7368;
    font-size: 0.68rem;
    font-weight: 800;
}

.inventory-field-helper {
    margin: 0.38rem 0 0;
    color: #7b736a;
    font-size: 0.72rem;
    line-height: 1.45;
}

.inventory-inline-link {
    color: #6f5dcd;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
}

.inventory-product-card input,
.inventory-product-card select,
.inventory-product-card textarea {
    border-color: #d3cdc5;
    background: #ffffff;
    box-shadow: none;
}

.inventory-product-card textarea {
    min-height: 116px;
}

.inventory-measure-fields {
    align-items: end;
}

.inventory-quantity-shell {
    display: flex;
    align-items: center;
    min-height: 46px;
    border: 1px solid #d3cdc5;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inventory-quantity-shell:focus-within {
    border-color: rgba(31, 198, 215, 0.7);
    box-shadow: 0 0 0 3px rgba(31, 198, 215, 0.18);
}

.inventory-quantity-prefix {
    flex: 0 0 auto;
    color: #6f7f94;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.inventory-quantity-shell input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0.7rem 0 0.7rem 0.72rem;
}

.inventory-photo-drop {
    min-height: 196px;
    border: 1px solid #ddd8ea;
    border-radius: 10px;
    background: #f2f1fb;
    color: #706887;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.48rem;
    padding: 1.2rem;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.inventory-photo-drop.is-compact {
    width: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
    min-height: var(--inventory-photo-thumb-size, 132px);
    aspect-ratio: 1 / 1;
    max-width: 100%;
    padding: 0.9rem 0.75rem;
    justify-self: start;
    align-content: center;
    border-radius: 12px;
}

.inventory-photo-drop:hover,
.inventory-photo-drop:focus-within {
    border-color: #8e82da;
    box-shadow: 0 10px 20px rgba(122, 108, 255, 0.12);
    transform: translateY(-2px);
}

.inventory-photo-drop .material-symbols-outlined {
    font-size: 2.25rem;
    color: #7a6df0;
}

.inventory-photo-drop.is-compact .material-symbols-outlined {
    font-size: 1.9rem;
}

.inventory-photo-drop strong {
    color: #6f5dcd;
    font-size: 0.84rem;
}

.inventory-photo-drop small {
    color: #7d7592;
    font-size: 0.73rem;
}

.inventory-photo-drop.is-compact small {
    display: none;
}

.inventory-photo-drop.is-compact::before,
.inventory-photo-drop.is-compact::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.inventory-photo-drop.is-compact::before {
    content: '';
    left: 1rem;
    bottom: calc(100% + 2px);
    transform: translateY(4px);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(20, 24, 34, 0.94) transparent transparent transparent;
    z-index: 3;
}

.inventory-photo-drop.is-compact::after {
    content: attr(data-inventory-photo-tooltip);
    left: 0;
    bottom: calc(100% + 8px);
    transform: translateY(4px);
    min-width: 188px;
    max-width: 240px;
    padding: 0.6rem 0.72rem;
    border-radius: 10px;
    background: rgba(20, 24, 34, 0.94);
    color: #ffffff;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.35;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(12, 18, 28, 0.24);
    white-space: normal;
    z-index: 4;
}

.inventory-photo-drop.is-compact:hover::before,
.inventory-photo-drop.is-compact:hover::after,
.inventory-photo-drop.is-compact:focus-within::before,
.inventory-photo-drop.is-compact:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}

.inventory-edit-photo-stack {
    display: grid;
    gap: 0.8rem;
}

.inventory-edit-photo-card {
    position: relative;
    border: 1px solid #ddd8ea;
    border-radius: 12px;
    background: #f6f4fb;
    overflow: hidden;
    cursor: grab;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.inventory-edit-photo-card.has-image {
    background: #ffffff;
}

.inventory-edit-photo-card:not(.is-primary):hover {
    border-color: #b9b0ea;
    box-shadow: 0 10px 22px rgba(64, 41, 145, 0.08);
}

.inventory-edit-photo-card.is-primary {
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.inventory-edit-photo-badge {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 1;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #241f37;
    font-size: 0.74rem;
    font-weight: 800;
}

.inventory-edit-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--inventory-photo-thumb-size, 132px), var(--inventory-photo-thumb-size, 132px)));
    gap: 0.8rem;
    justify-content: start;
}

.inventory-edit-photo-image {
    display: block;
    width: 100%;
    min-height: 184px;
    object-fit: cover;
    pointer-events: none;
}

.inventory-edit-photo-card.is-primary .inventory-edit-photo-image {
    min-height: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #ffffff;
}

.inventory-edit-photo-grid .inventory-edit-photo-image {
    min-height: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
}

.inventory-edit-photo-grid .inventory-edit-photo-card {
    min-height: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
}

.inventory-edit-photo-card.is-dragging {
    opacity: 0.64;
    transform: scale(0.98);
    cursor: grabbing;
}

.inventory-edit-photo-card.is-drop-target {
    border-color: #7a6dff;
    box-shadow: 0 0 0 3px rgba(122, 109, 255, 0.16);
}

.inventory-edit-photo-actions {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

@media (hover: hover) {
    .inventory-edit-photo-actions {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .inventory-edit-photo-card:hover .inventory-edit-photo-actions,
    .inventory-edit-photo-card:focus-within .inventory-edit-photo-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.inventory-edit-photo-action {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(24, 30, 44, 0.72);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
}

.inventory-edit-photo-action:hover,
.inventory-edit-photo-action:focus-visible {
    background: rgba(227, 19, 63, 0.92);
    color: #ffffff;
    outline: none;
}

.inventory-edit-photo-action .material-symbols-outlined {
    font-size: 1.2rem;
}

.inventory-edit-photo-action.is-primary-toggle {
    background: rgba(122, 109, 255, 0.9);
}

.inventory-edit-photo-action.is-primary-toggle:hover,
.inventory-edit-photo-action.is-primary-toggle:focus-visible {
    background: rgba(89, 70, 235, 0.96);
}

.inventory-edit-photo-art {
    min-height: 116px;
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 219, 160, 0.9), transparent 18%),
        linear-gradient(180deg, rgba(63, 39, 30, 0.1), rgba(63, 39, 30, 0.18)),
        linear-gradient(135deg, #78625b 0%, #b69076 58%, #d6c7bf 100%);
}

.inventory-edit-photo-art-primary {
    min-height: 184px;
    background:
        radial-gradient(circle at 74% 26%, rgba(255, 219, 160, 0.96), transparent 16%),
        radial-gradient(circle at 26% 72%, rgba(110, 55, 31, 0.52), transparent 18%),
        linear-gradient(180deg, rgba(35, 23, 18, 0.1), rgba(35, 23, 18, 0.2)),
        linear-gradient(135deg, #6f5a53 0%, #9c7867 45%, #ddd1c9 100%);
}

.inventory-edit-photo-art-alt {
    background:
        linear-gradient(180deg, rgba(73, 115, 201, 0.22), rgba(111, 71, 207, 0.28)),
        linear-gradient(135deg, #e2ebff 0%, #b2c6ff 100%);
}

.inventory-edit-photo-art-alt-two {
    background:
        linear-gradient(180deg, rgba(32, 28, 24, 0.18), rgba(32, 28, 24, 0.08)),
        linear-gradient(135deg, #2f2544 0%, #6d4ca5 50%, #ff9c4b 100%);
}

.inventory-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ece5de;
}

.inventory-toggle-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.inventory-toggle-copy strong {
    color: #171411;
    font-size: 0.84rem;
    font-weight: 800;
}

.inventory-toggle-copy span {
    color: #70675e;
    font-size: 0.76rem;
    line-height: 1.5;
}

.inventory-low-stock-note {
    padding: 0.95rem 1rem;
    border-radius: 10px;
    border: 1px solid #e7e0d8;
    background: #f8f5f1;
    color: #6f665e;
    font-size: 0.76rem;
    line-height: 1.55;
}

.inventory-center-stock-intro {
    display: grid;
    gap: 0.22rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e3ebf5;
    border-radius: 12px;
    background: #f8fbff;
}

.inventory-center-stock-intro strong {
    color: #171411;
    font-size: 0.84rem;
    font-weight: 800;
}

.inventory-center-stock-intro span {
    color: #6c7684;
    font-size: 0.76rem;
    line-height: 1.5;
}

.inventory-product-centers-grid {
    display: grid;
    gap: 0.95rem;
}

.inventory-product-center-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.inventory-product-center-card.is-enabled {
    border-color: #cad8ea;
    box-shadow: 0 8px 20px rgba(18, 38, 63, 0.05);
}

.inventory-product-center-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.inventory-product-center-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.inventory-product-center-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef3fb;
    color: #6457f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.inventory-product-center-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inventory-product-center-meta {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.inventory-product-center-meta strong {
    color: #171411;
    font-size: 0.9rem;
    font-weight: 900;
}

.inventory-product-center-meta span,
.inventory-product-center-meta small {
    color: #6c7684;
    font-size: 0.76rem;
    line-height: 1.45;
}

.inventory-product-center-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #4f4a45;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.inventory-product-center-toggle input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.inventory-product-center-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.inventory-product-center-card:not(.is-enabled) {
    background: #fbfcfe;
}

.inventory-product-center-card:not(.is-enabled) .inventory-product-center-fields {
    opacity: 0.64;
}

.inventory-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #5d554d;
    font-size: 0.78rem;
    line-height: 1.5;
}

.inventory-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 0.1rem;
}

.inventory-product-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.1rem;
}

.inventory-product-actions-float {
    position: fixed;
    left: calc(78px + 210px + 0.75rem);
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 42;
    margin: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(78, 118, 153, 0.42);
    border-radius: 16px;
    background: linear-gradient(104deg, rgba(8, 17, 31, 0.98) 0%, rgba(15, 39, 66, 0.98) 54%, rgba(25, 73, 102, 0.98) 100%);
    box-shadow: 0 16px 30px rgba(8, 17, 30, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.inventory-product-actions-float .btn,
.inventory-product-actions-float button {
    min-height: 42px;
    border-radius: 12px;
    padding: 0.56rem 1.22rem;
}

.inventory-product-actions-float .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #ebf4ff;
    border-color: rgba(183, 205, 229, 0.38);
}

.inventory-product-actions-float .btn-outline:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(211, 226, 241, 0.62);
}

.inventory-product-form.is-editing-product {
    padding-bottom: 6rem;
}

.admin-body.inventory-product-editor-open {
    overflow: hidden;
}

.admin-body.inventory-product-editor-open .admin-content,
.admin-body.inventory-product-editor-open .clients-pro-main,
.admin-body.inventory-product-editor-open .clients-pro-side,
.admin-body.inventory-product-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.inventory-product-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.inventory-product-editor-form.inventory-product-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    gap: 0;
    overflow: hidden;
}

.inventory-product-editor-form.inventory-product-form.is-editing-product {
    padding-bottom: 0;
}

.inventory-product-editor-shell {
    display: grid;
    place-items: start center;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 1.55rem 1.25rem 2.4rem;
}

.inventory-product-editor-main {
    width: min(100%, 980px);
    display: grid;
    gap: 1.2rem;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
}

.inventory-product-editor-head {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
    padding-bottom: 0.15rem;
}

.inventory-product-editor-head h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.45rem, 1.9vw, 1.8rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0;
}

.inventory-product-editor-head .inventory-count-create-eyebrow,
.inventory-product-editor-head p:last-child {
    display: none;
}

.inventory-product-editor-topbar-copy {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 26rem);
    min-width: 0;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px));
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    text-align: center;
}

.inventory-product-editor-topbar-copy strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 900;
}

.inventory-product-editor-form.is-title-docked .inventory-product-editor-topbar-copy {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.inventory-product-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 1.35rem;
    height: auto;
    min-height: 0;
    align-items: start;
}

.inventory-product-editor-grid .inventory-product-main,
.inventory-product-editor-grid .inventory-product-aside {
    display: grid;
    gap: 1.1rem;
    min-height: 0;
    overflow: visible;
    padding: 0;
}

.inventory-product-editor-page .inventory-product-card {
    padding: 0;
    border-radius: 12px;
    border: 1px solid #d6dde8;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(17, 27, 44, 0.04);
    overflow: hidden;
}

.inventory-product-editor-page .inventory-product-card-head {
    display: grid;
    gap: 0.24rem;
    padding: 1.15rem 1.45rem 1rem;
    border-bottom: 1px solid #e7edf6;
}

.inventory-product-editor-page .inventory-product-card-head h2 {
    color: #171411;
    font-size: 1.02rem;
    font-weight: 900;
}

.inventory-product-editor-page .inventory-product-card-head p {
    color: #667284;
    font-size: 0.78rem;
    line-height: 1.45;
}

.inventory-product-editor-page .inventory-product-card-body {
    display: grid;
    gap: 1rem;
    padding: 1.05rem 1.45rem 1.3rem;
}

.inventory-product-editor-page .inventory-product-aside .inventory-product-card {
    overflow: visible;
}

.inventory-product-editor-page .inventory-field-label {
    color: #171411;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 0.38rem;
}

.inventory-product-editor-page .inventory-field-hint {
    color: #7e7368;
    font-size: 0.72rem;
    font-weight: 800;
}

.inventory-product-editor-page .inventory-product-card input,
.inventory-product-editor-page .inventory-product-card select,
.inventory-product-editor-page .inventory-product-card textarea {
    border-color: #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
}

.inventory-product-editor-page .inventory-product-card input,
.inventory-product-editor-page .inventory-product-card select {
    min-height: 48px;
}

.inventory-product-editor-page .inventory-product-card textarea {
    min-height: 120px;
}

.inventory-product-editor-page .inventory-quantity-shell {
    min-height: 48px;
    border-color: #cfd7e3;
    border-radius: 12px;
}

.inventory-product-editor-page .inventory-photo-drop {
    min-height: 272px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    justify-items: center;
    align-items: center;
    gap: 0.7rem;
    padding: 1.55rem 1.25rem;
    border-color: #e2dff7;
    border-radius: 12px;
    background: #f1efff;
    box-shadow: inset 0 0 0 1px rgba(104, 88, 243, 0.04);
    text-align: center;
}

.inventory-product-editor-page .inventory-product-center-card {
    border-radius: 14px;
}

@media (max-width: 720px) {
    .inventory-product-center-fields {
        grid-template-columns: 1fr;
    }

    .inventory-product-center-head {
        flex-direction: column;
    }
}

.staff-centers-grid {
    display: grid;
    gap: 0.65rem;
}

.staff-center-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d8e0eb;
    border-radius: 12px;
    background: #ffffff;
    color: #171411;
    font-size: 0.9rem;
    line-height: 1.45;
}

.staff-center-option input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.staff-center-option span {
    flex: 1 1 auto;
}

.staff-center-option small {
    color: #6457f6;
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-centers-readonly {
    display: grid;
    gap: 0.65rem;
    max-width: 520px;
}

.admin-body.admin-page-team-staff .team-staff-center-readonly-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid #dfe7f2;
    border-radius: 12px;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .team-staff-center-readonly-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.admin-body.admin-page-team-staff .team-staff-center-readonly-copy strong {
    color: #132033;
    font-size: 0.96rem;
    font-weight: 800;
}

.admin-body.admin-page-team-staff .team-staff-center-readonly-copy small {
    color: #66768c;
    font-size: 0.86rem;
    line-height: 1.4;
}

.admin-body.admin-page-team-staff .team-staff-center-readonly-badge {
    flex: 0 0 auto;
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #5f56ff;
    font-size: 0.72rem;
    font-weight: 900;
}

.inventory-product-editor-page .inventory-photo-drop.is-compact {
    width: var(--inventory-photo-thumb-size, 132px);
    height: var(--inventory-photo-thumb-size, 132px);
    min-height: var(--inventory-photo-thumb-size, 132px);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 0.8rem 0.7rem;
}

.inventory-product-editor-page .inventory-photo-drop.is-compact strong {
    font-size: 0.8rem;
    line-height: 1.2;
}

.inventory-product-editor-page .inventory-photo-drop .material-symbols-outlined {
    font-size: 2.15rem;
    color: #7367f5;
}

.inventory-product-editor-page .inventory-photo-drop strong {
    color: #6a5cf1;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-product-editor-page .inventory-photo-drop small {
    color: #8a84a8;
    font-size: 0.76rem;
    line-height: 1.45;
}

.inventory-product-editor-page .inventory-product-aside .inventory-product-card-head {
    padding-bottom: 0.85rem;
}

.inventory-product-editor-page .inventory-product-aside .inventory-product-card-body {
    padding-top: 1rem;
    --inventory-photo-thumb-size: 132px;
}

@media (max-width: 1080px) {
    .inventory-product-editor-page {
        overflow-y: auto;
    }

    .inventory-product-editor-form.inventory-product-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .inventory-product-editor-shell,
    .inventory-product-editor-main,
    .inventory-product-editor-grid .inventory-product-main,
    .inventory-product-editor-grid .inventory-product-aside {
        height: auto;
        overflow: visible;
    }

    .inventory-product-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .inventory-product-editor-shell {
        padding: 1.3rem 1rem 1.8rem;
    }

    .inventory-product-editor-head {
        justify-items: start;
        text-align: left;
    }

    .inventory-product-editor-head h1 {
        font-size: 1.6rem;
    }

    .inventory-product-editor-topbar-copy strong {
        font-size: 1rem;
    }
}

.inventory-order-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.inventory-order-editor-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.inventory-order-editor-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    border-bottom: 1px solid #e5e8ef;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.inventory-order-editor-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.inventory-order-editor-saved {
    color: #6d7888;
    font-size: 0.92rem;
    font-weight: 500;
}

.inventory-order-editor-close {
    min-height: 46px;
    padding-inline: 1.32rem;
    border-radius: 999px;
    background: #ffffff;
    color: #172132;
    border-color: #d4dbe5;
}

.inventory-order-editor-close:hover,
.inventory-order-editor-close:focus-visible {
    background: #f6f8fb;
    color: #172132;
    border-color: #c7d0dc;
}

.inventory-order-editor-submit {
    min-height: 46px;
    padding-inline: 1.35rem;
    border-radius: 999px;
    border-color: #07080d;
    background: #07080d;
    color: #ffffff;
    gap: 0.58rem;
    box-shadow: none;
}

.inventory-order-editor-submit:hover,
.inventory-order-editor-submit:focus-visible {
    border-color: #191c22;
    background: #191c22;
    color: #ffffff;
}

.inventory-order-editor-submit:disabled,
.inventory-order-editor-submit.is-disabled {
    border-color: #d7dee8;
    background: #eef2f7;
    color: #7d889a;
    cursor: not-allowed;
    box-shadow: none;
}

.inventory-order-editor-submit:disabled .material-symbols-outlined,
.inventory-order-editor-submit.is-disabled .material-symbols-outlined {
    color: inherit;
}

.inventory-order-editor-submit .material-symbols-outlined {
    font-size: 1.16rem;
}

.inventory-order-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.inventory-order-editor-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 1.7rem;
    box-sizing: border-box;
    height: 100%;
    padding: 1.6rem 1.9rem 1.35rem;
    min-height: 0;
    overflow: hidden;
}

.inventory-order-editor-head {
    display: grid;
    gap: 0.38rem;
}

.inventory-order-editor-head h1 {
    margin: 0;
    color: #1f1c18;
    font-size: clamp(1.18rem, 1.8vw, 1.56rem);
    line-height: 1.12;
    font-weight: 800;
}

.inventory-order-editor-head p {
    margin: 0;
    color: #6b6259;
    font-size: 0.9rem;
    line-height: 1.6;
}

.inventory-order-editor-table {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: start;
    border-top: 1px solid #e5e8ef;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.inventory-order-editor-table.is-empty {
    grid-template-rows: minmax(0, 1fr) auto;
}

.inventory-order-editor-table-head,
.inventory-order-editor-row {
    display: grid;
    grid-template-columns: minmax(320px, 1.8fr) 136px 214px 132px 40px;
    align-items: center;
    gap: 1rem;
}

.inventory-order-editor-table-head[hidden],
.inventory-order-editor-rows[hidden],
.inventory-order-editor-empty[hidden] {
    display: none !important;
}

.inventory-order-editor-table-head {
    padding: 0.95rem 1.5rem;
    color: #0f1728;
    font-size: 0.96rem;
    font-weight: 900;
}

.inventory-order-editor-table-head .is-actions {
    width: 40px;
}

.inventory-order-editor-rows {
    display: grid;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-order-editor-row {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e8ecf2;
}

.inventory-order-editor-product {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
}

.inventory-order-editor-thumb {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dfe4ec;
    background: #f6f7fa;
}

.inventory-order-editor-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-order-editor-thumb-scene {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 72% 26%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
}

.inventory-order-editor-thumb-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.05));
}

.inventory-order-editor-thumb-jar,
.inventory-order-editor-thumb-candle {
    position: absolute;
    bottom: 21%;
    border-radius: 10px 10px 8px 8px;
    box-shadow: 0 10px 16px rgba(38, 22, 15, 0.18);
}

.inventory-order-editor-thumb-jar {
    left: 12%;
    width: 27%;
    height: 42%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #6d4430 0%, #8f593d 62%, #4a2d20 100%);
}

.inventory-order-editor-thumb-jar::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 26%;
    width: 48%;
    height: 16%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #d5d7dc, #a9b0b8);
}

.inventory-order-editor-thumb-candle {
    left: 55%;
    width: 31%;
    height: 45%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #eee8dd 0%, #d4c7b6 70%, #96806c 100%);
}

.inventory-order-editor-thumb-candle::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 45%;
    width: 8%;
    height: 16%;
    border-radius: 999px;
    background: #202328;
}

.inventory-order-editor-thumb-candle::after {
    content: "";
    position: absolute;
    top: -24%;
    left: 33%;
    width: 26%;
    height: 26%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.9) 34%, rgba(255, 175, 73, 0.9) 60%, rgba(255, 138, 45, 0.1) 100%);
}

.inventory-order-editor-thumb-surface {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24%;
    background:
        linear-gradient(
            90deg,
            rgba(108, 125, 153, 0.55) 0 18%,
            rgba(240, 226, 196, 0.9) 18% 36%,
            rgba(108, 125, 153, 0.45) 36% 54%,
            rgba(240, 226, 196, 0.9) 54% 72%,
            rgba(108, 125, 153, 0.45) 72% 100%
        );
    opacity: 0.9;
}

.inventory-order-editor-product-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.inventory-order-editor-product-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 900;
}

.inventory-order-editor-product-copy p,
.inventory-order-editor-product-copy small {
    margin: 0;
    color: #697689;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-order-editor-field input,
.inventory-order-editor-money input {
    height: 48px;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-order-editor-field input {
    width: 100%;
    text-align: left;
    padding-inline: 1rem;
}

.inventory-order-editor-money {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0 0.95rem;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
}

.inventory-order-editor-money span {
    color: #6f7f94;
    font-size: 0.95rem;
    font-weight: 700;
}

.inventory-order-editor-money input {
    border: 0;
    min-height: 0;
    padding: 0;
    background: transparent !important;
}

.inventory-order-editor-total {
    color: #0b1220;
    font-size: 1rem;
    font-weight: 900;
    text-align: right;
}

.inventory-order-editor-remove {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #202837;
    box-shadow: none;
}

.inventory-order-editor-remove:hover,
.inventory-order-editor-remove:focus-visible {
    background: #f4f6fb;
    color: #202837;
}

.inventory-order-editor-empty {
    display: grid;
    place-items: center;
    gap: 0.7rem;
    min-height: 0;
    height: 100%;
    align-content: center;
    padding: 1.7rem 1rem 1.35rem;
    text-align: center;
    color: #647286;
}

.inventory-order-editor-empty-visual {
    position: relative;
    width: 88px;
    height: 72px;
    display: grid;
    place-items: center;
}

.inventory-order-editor-empty-bottle {
    position: absolute;
    width: 34px;
    height: 44px;
    border-radius: 11px 11px 10px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #efeaff 0%, #d9cdfd 68%, #b3a1f0 100%);
    box-shadow: 0 14px 26px rgba(108, 89, 214, 0.16);
}

.inventory-order-editor-empty-bottle::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 10px;
    width: 14px;
    height: 12px;
    border-radius: 7px 7px 4px 4px;
    background: linear-gradient(180deg, #e5e8f1, #c6cfdb);
}

.inventory-order-editor-empty-bottle::after {
    content: "";
    position: absolute;
    inset: 13px 8px 12px;
    border-radius: 7px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.18);
}

.inventory-order-editor-empty-bottle.is-accent {
    width: 28px;
    height: 40px;
    left: 47px;
    top: 17px;
    z-index: -1;
    border-radius: 10px 10px 9px 9px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.04)),
        linear-gradient(180deg, #c86dff 0%, #955dff 100%);
    box-shadow: 0 18px 30px rgba(151, 93, 255, 0.24);
}

.inventory-order-editor-empty-bottle.is-accent::before,
.inventory-order-editor-empty-bottle.is-accent::after {
    content: none;
}

.inventory-order-editor-empty strong {
    color: #0f1728;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.inventory-order-editor-empty p {
    margin: 0;
    max-width: 420px;
    font-size: 0.98rem;
    line-height: 1.6;
}

.inventory-order-editor-add {
    width: fit-content;
    margin: 0 auto;
    align-self: end;
    justify-self: center;
    min-height: auto;
    padding: 0.9rem 1.3rem;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #6257ff;
    gap: 0.65rem;
    font-size: 0.96rem;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(18, 31, 47, 0.08);
}

.inventory-order-editor-add:hover,
.inventory-order-editor-add:focus-visible {
    background: #f8faff;
    border-color: #cfd8e6;
    color: #564ae8;
}

.inventory-order-editor-add .material-symbols-outlined {
    font-size: 1.2rem;
}

.inventory-order-editor-aside {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    box-sizing: border-box;
    height: 100%;
    padding: 1.6rem 1.7rem 1.35rem;
    border-left: 1px solid #e5e8ef;
    background: #fbfcfd;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-order-editor-aside::-webkit-scrollbar {
    width: 5px;
}

.inventory-order-editor-aside::-webkit-scrollbar-track {
    background: transparent;
}

.inventory-order-editor-aside::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(126, 141, 163, 0.42);
}

.inventory-order-editor-aside::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 141, 163, 0.6);
}

.inventory-order-editor-side-card {
    display: grid;
    gap: 0.9rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid #e3e8f0;
}

.inventory-order-editor-side-card + .inventory-order-editor-side-card {
    padding-top: 0.15rem;
}

.inventory-order-editor-side-card:last-of-type {
    padding-bottom: 0.2rem;
    border-bottom: 0;
}

.inventory-order-editor-side-card h2 {
    margin: 0;
    color: #0f1728;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-order-editor-side-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.inventory-order-editor-side-inline {
    display: grid;
    gap: 0.25rem;
}

.inventory-order-editor-side-value {
    color: #0f1728;
    font-size: 1rem;
    font-weight: 850;
}

.inventory-order-editor-surcharge-list {
    display: grid;
    gap: 0.45rem;
    max-height: 118px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.15rem;
}

.inventory-order-editor-surcharge-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: #0f1728;
    font-size: 0.98rem;
}

.inventory-order-editor-surcharge-item strong {
    color: #0b1220;
    font-size: 0.98rem;
    font-weight: 850;
    text-align: right;
}

.inventory-order-editor-surcharge-empty {
    margin: 0;
    color: #6f7b8f;
    font-size: 0.94rem;
}

.inventory-order-editor-side-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.inventory-order-editor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #ecebfa;
    color: #6358e7;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 900;
}

.inventory-order-editor-delivery-thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.88), transparent 24%),
        linear-gradient(180deg, #7f7170 0%, #a79f9c 58%, #ddd4cc 100%);
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 900;
    box-shadow: inset 0 -8px 12px rgba(47, 38, 35, 0.14);
}

.inventory-order-editor-side-copy {
    display: grid;
    gap: 0.18rem;
}

.inventory-order-editor-side-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 850;
}

.inventory-order-editor-side-copy p,
.inventory-order-editor-side-copy small {
    margin: 0;
    color: #697689;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-order-editor-side-button {
    width: fit-content;
    min-height: 38px;
    padding: 0.48rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #d3d9e3;
    background: #ffffff;
    color: #101928;
    gap: 0.48rem;
    font-size: 0.94rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-editor-side-button:hover,
.inventory-order-editor-side-button:focus-visible {
    background: #f6f8fb;
    color: #101928;
    border-color: #c6cfdb;
}

.inventory-order-editor-side-button .material-symbols-outlined {
    font-size: 1.08rem;
}

.inventory-order-editor-summary {
    display: grid;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 1.35rem;
    border-top: 1px solid #dfe5ee;
}

.inventory-order-editor-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    color: #121c2d;
    font-size: 0.98rem;
    font-weight: 600;
}

.inventory-order-editor-summary > div strong {
    color: #0f1728;
    font-size: 1rem;
    font-weight: 850;
}

.inventory-order-editor-summary > div.is-total {
    margin-top: 0.45rem;
    padding-top: 0.7rem;
    border-top: 1px solid #d9e0eb;
}

.inventory-order-editor-summary > div.is-total strong {
    font-size: 1.5rem;
    font-weight: 900;
}

@media (max-width: 1360px) {
    .inventory-order-editor-shell {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .inventory-order-editor-table-head,
    .inventory-order-editor-row {
        grid-template-columns: minmax(250px, 1.55fr) 124px 188px 120px 36px;
        gap: 0.85rem;
    }
}

@media (max-width: 1080px) {
    .inventory-order-editor-page {
        overflow-y: auto;
    }

    .inventory-order-editor-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .inventory-order-editor-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .inventory-order-editor-main,
    .inventory-order-editor-table,
    .inventory-order-editor-rows,
    .inventory-order-editor-aside {
        height: auto;
        overflow: visible;
    }

    .inventory-order-editor-aside {
        border-left: 0;
        border-top: 1px solid #e5e8ef;
    }

    .inventory-order-editor-summary {
        margin-top: 0;
    }
}

@media (max-width: 860px) {
    .inventory-order-editor-page {
        width: 100vw;
        border-radius: 0;
    }

    .inventory-order-editor-topbar {
        padding: 0.9rem 1rem;
    }

    .inventory-order-editor-topbar-actions {
        justify-content: flex-start;
    }

    .inventory-order-editor-main,
    .inventory-order-editor-aside {
        padding: 1.25rem 1rem 1.35rem;
    }

    .inventory-order-editor-table-head {
        display: none;
    }

    .inventory-order-editor-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 1rem;
    }

    .inventory-order-editor-total {
        text-align: left;
    }

    .inventory-order-editor-remove {
        width: 44px;
        justify-self: start;
    }

    .inventory-order-editor-add {
        width: fit-content;
    }
}

.admin-body.inventory-order-editor-open {
    overflow: hidden;
}

.admin-body.inventory-order-editor-open .admin-content,
.admin-body.inventory-order-editor-open .clients-pro-main,
.admin-body.inventory-order-editor-open .clients-pro-side,
.admin-body.inventory-order-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.admin-body.inventory-count-editor-open {
    overflow: hidden;
}

.admin-body.inventory-count-editor-open .admin-content,
.admin-body.inventory-count-editor-open .clients-pro-main,
.admin-body.inventory-count-editor-open .clients-pro-side,
.admin-body.inventory-count-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.inventory-count-create-page,
.inventory-count-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    isolation: isolate;
}

.inventory-count-create-form,
.inventory-count-editor-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.inventory-count-create-topbar,
.inventory-count-editor-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    border-bottom: 1px solid #e5e8ef;
    background: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.inventory-count-create-progress {
    width: min(100%, 760px);
    height: 4px;
    border-radius: 999px;
    background: #eceef5;
    overflow: hidden;
}

.inventory-count-create-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6d5afc 0%, #6958f5 100%);
}

.inventory-count-create-topbar-actions,
.inventory-count-editor-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inventory-count-create-shell {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 1.6rem 2.4rem;
}

.inventory-count-create-content {
    width: min(100%, 860px);
    display: grid;
    gap: 1.7rem;
}

.inventory-count-create-eyebrow {
    margin: 0;
    color: #7a7f8a;
    font-size: 0.96rem;
    font-weight: 500;
}

.inventory-count-create-head {
    display: grid;
    gap: 0.6rem;
}

.inventory-count-create-head h1 {
    margin: 0;
    max-width: 620px;
    color: #111827;
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.inventory-count-create-head p {
    margin: 0;
    max-width: 720px;
    color: #6d7685;
    font-size: 0.98rem;
    line-height: 1.6;
}

.inventory-count-center-grid {
    display: grid;
    gap: 1rem;
}

.inventory-count-center-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 18px 40px rgba(18, 31, 47, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.inventory-count-center-card:hover,
.inventory-count-center-card:focus-visible {
    border-color: #cfd8e6;
    box-shadow: 0 22px 44px rgba(18, 31, 47, 0.08);
    transform: translateY(-1px);
}

.inventory-count-center-card-static {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.inventory-count-center-card-media {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f0efff;
    color: #6557f2;
    display: grid;
    place-items: center;
    font-size: 1.22rem;
    font-weight: 900;
}

.inventory-count-center-card-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.inventory-count-center-card-copy strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-count-center-card-copy p {
    margin: 0;
    color: #687589;
    font-size: 0.97rem;
    line-height: 1.45;
}

.inventory-count-center-card-link {
    color: #6557f2;
    font-size: 0.98rem;
    font-weight: 800;
    text-decoration: none;
}

.inventory-count-create-section {
    display: grid;
    gap: 1.15rem;
}

.inventory-count-create-section h2 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
    font-weight: 900;
}

.inventory-count-create-fields {
    display: grid;
    gap: 1rem;
}

.inventory-count-create-fields .form-group {
    display: grid;
    gap: 0.52rem;
}

.inventory-count-create-fields label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.inventory-count-create-fields label small,
.inventory-count-create-fields label strong {
    color: #6e7989;
    font-size: 0.95rem;
    font-weight: 500;
    margin-left: auto;
}

.inventory-count-create-fields input,
.inventory-count-create-fields textarea {
    width: 100%;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
    color: #0f1728;
    box-shadow: none;
}

.inventory-count-create-fields input {
    height: 50px;
}

.inventory-count-create-fields textarea {
    min-height: 152px;
    resize: vertical;
}

.inventory-count-editor-topbar-copy h1 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 900;
}

.inventory-count-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid #e5e8ef;
}

.inventory-count-editor-main {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 1.4rem;
    min-height: 0;
    padding: 1.7rem 1.9rem 1.35rem;
    overflow: hidden;
}

.inventory-count-editor-head {
    display: grid;
    gap: 0.8rem;
    padding-top: 0.15rem;
}

.inventory-count-editor-head-copy h2 {
    margin: 0;
    color: #111827;
    font-size: 2.1rem;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.inventory-count-editor-head-copy p {
    margin: 0.3rem 0 0;
    color: #687589;
    font-size: 1rem;
    line-height: 1.55;
}

.inventory-count-editor-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.inventory-count-editor-head-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.inventory-count-editor-head-meta .material-symbols-outlined {
    font-size: 1.1rem;
    color: #4c5a6e;
}

.inventory-count-editor-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.35rem 1.5rem;
    border-radius: 18px;
    background: #f7f8fb;
}

.inventory-count-editor-search input {
    height: 48px;
}

.inventory-count-editor-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #111827;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
}

.inventory-count-editor-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inventory-count-editor-toggle-track {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d8dce5;
    transition: background 0.18s ease;
}

.inventory-count-editor-toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.15);
    transition: transform 0.18s ease;
}

.inventory-count-editor-toggle input:checked + .inventory-count-editor-toggle-track {
    background: #6557f2;
}

.inventory-count-editor-toggle input:checked + .inventory-count-editor-toggle-track::after {
    transform: translateX(20px);
}

.inventory-count-editor-toggle .material-symbols-outlined {
    font-size: 1.15rem;
    color: #6b7280;
}

.inventory-count-editor-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inventory-count-editor-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 38px;
    padding: 0.42rem 0.9rem;
    border: 1px solid #d4dbe5;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
}

.inventory-count-editor-filter strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f0f2f6;
    color: #667085;
    display: grid;
    place-items: center;
    font-size: 0.84rem;
    font-weight: 800;
}

.inventory-count-editor-filter.is-active {
    border-color: #6557f2;
    background: #6557f2;
    color: #ffffff;
}

.inventory-count-editor-filter.is-active strong {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.inventory-count-editor-table {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    border-top: 1px solid #e5e8ef;
    overflow: hidden;
}

.inventory-count-editor-table-head,
.inventory-count-editor-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 160px 194px;
    align-items: center;
    gap: 1rem;
}

.inventory-count-editor-table-head {
    padding: 1rem 1.5rem;
    color: #111827;
    font-size: 0.97rem;
    font-weight: 900;
    border-bottom: 1px solid #e5e8ef;
}

.inventory-count-editor-rows {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 0.35rem;
}

.inventory-count-editor-row {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e8ecf2;
}

.inventory-count-editor-row.is-counted {
    background: #fcfdfd;
}

.inventory-count-editor-product {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.inventory-count-editor-product strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-count-editor-product p {
    margin: 0;
    color: #697689;
    font-size: 0.94rem;
    line-height: 1.5;
}

.inventory-count-editor-expected {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.inventory-count-editor-count {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}

.inventory-count-editor-field {
    min-width: 0;
}

.inventory-count-editor-field input {
    width: 100%;
    height: 48px;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-count-editor-row.is-counted .inventory-count-editor-field input {
    border-color: #bcd6ff;
    background: #fbfdff;
}

.inventory-count-editor-status {
    width: 30px;
    height: 30px;
    border: 1px solid #d5ddea;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #ffffff;
    color: #8b97a8;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.inventory-count-editor-status .material-symbols-outlined {
    font-size: 0.98rem;
    font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 24;
}

.inventory-count-editor-row.is-empty .inventory-count-editor-status {
    border-color: #d7dde8;
    background: #ffffff;
    color: #9aa8ba;
}

.inventory-count-editor-row.is-match .inventory-count-editor-status {
    border-color: #b6ddb5;
    background: #eef9ea;
    color: #43a047;
}

.inventory-count-editor-row.is-over .inventory-count-editor-status {
    border-color: #f0d38b;
    background: #fff6de;
    color: #cb8a0f;
}

.inventory-count-editor-row.is-under .inventory-count-editor-status {
    border-color: #f0c0c0;
    background: #fff1f1;
    color: #d64545;
}

.inventory-count-editor-aside {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: 0;
    padding: 1.55rem 1.7rem 1.35rem;
    border-left: 1px solid #e5e8ef;
    background: #fbfcfd;
    overflow-y: auto;
    overflow-x: hidden;
}

.inventory-count-editor-aside::-webkit-scrollbar {
    width: 5px;
}

.inventory-count-editor-aside::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(126, 141, 163, 0.42);
}

.inventory-count-editor-recent-head {
    display: grid;
    gap: 1rem;
}

.inventory-count-editor-recent-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
    font-weight: 900;
}

.inventory-count-editor-recent-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 1rem;
    color: #7a8596;
    font-size: 0.9rem;
    font-weight: 700;
}

.inventory-count-editor-recent-columns span:last-child {
    text-align: right;
}

.inventory-count-editor-recent-empty,
.inventory-count-editor-recent-list {
    min-height: 0;
}

.inventory-count-editor-recent-empty.is-hidden,
.inventory-count-editor-recent-list.is-hidden {
    display: none;
}

.inventory-count-editor-recent-empty {
    display: grid;
    place-items: center;
    gap: 1rem;
    margin: auto 0;
    padding: 2rem 1rem;
    text-align: center;
    color: #697689;
}

.inventory-count-editor-recent-empty .material-symbols-outlined {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #f1efff;
    color: #6557f2;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
}

.inventory-count-editor-recent-empty p {
    margin: 0;
    max-width: 290px;
    font-size: 0.96rem;
    line-height: 1.55;
}

.inventory-count-editor-recent-list {
    display: grid;
    align-content: start;
    gap: 0;
}

.inventory-count-editor-recent-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid #e5e8ef;
}

.inventory-count-editor-recent-item:first-child {
    border-top: 0;
}

.inventory-count-editor-recent-item strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
}

.inventory-count-editor-recent-item p {
    margin: 0.15rem 0 0;
    color: #697689;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-hub-order-status.is-active {
    border-color: #bfd6ff;
    background: #edf4ff;
    color: #3567cc;
}

@media (max-width: 1260px) {
    .inventory-count-editor-shell {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .inventory-count-editor-table-head,
    .inventory-count-editor-row {
        grid-template-columns: minmax(240px, 1fr) 128px 172px;
    }
}

@media (max-width: 1080px) {
    .inventory-count-create-page,
    .inventory-count-editor-page {
        overflow-y: auto;
    }

    .inventory-count-create-form,
    .inventory-count-editor-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .inventory-count-editor-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .inventory-count-editor-main,
    .inventory-count-editor-aside,
    .inventory-count-editor-table,
    .inventory-count-editor-rows {
        height: auto;
        overflow: visible;
    }

    .inventory-count-editor-aside {
        border-left: 0;
        border-top: 1px solid #e5e8ef;
    }

    .inventory-count-editor-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-count-editor-toggle {
        justify-self: start;
    }
}

@media (max-width: 860px) {
    .inventory-count-create-topbar,
    .inventory-count-editor-topbar {
        padding: 0.9rem 1rem;
    }

    .inventory-count-create-shell,
    .inventory-count-editor-main,
    .inventory-count-editor-aside {
        padding-inline: 1rem;
    }

    .inventory-count-create-head h1,
    .inventory-count-editor-head-copy h2 {
        font-size: 1.9rem;
    }

    .inventory-count-center-card,
    .inventory-count-center-card-static {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .inventory-count-center-card .material-symbols-outlined,
    .inventory-count-center-card-link {
        grid-column: 2;
        justify-self: start;
    }

    .inventory-count-editor-table-head {
        display: none;
    }

    .inventory-count-editor-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .inventory-count-editor-count {
        max-width: 280px;
    }
}

.inventory-count-summary-page {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    max-height: calc(100vh - 68px);
    min-height: 0;
    padding: 1.5rem 0 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.inventory-count-summary-header {
    display: grid;
    gap: 0.6rem;
}

.inventory-count-summary-breadcrumb {
    margin: 0;
    color: #6a7688;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-count-summary-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.inventory-count-summary-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.inventory-count-summary-title-row h1 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.inventory-count-summary-copy {
    margin: 0;
    color: #687589;
    font-size: 1rem;
    line-height: 1.6;
}

.inventory-count-summary-card {
    overflow: visible;
    border: 1px solid #dfe5ef;
    border-radius: 20px;
    background: #fff;
}

.inventory-count-summary-card-head {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid #e6ebf2;
}

.inventory-count-summary-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 900;
}

.inventory-count-summary-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    padding: 1.25rem 1.35rem 1.45rem;
}

.inventory-count-summary-detail-group {
    display: grid;
    gap: 1rem;
}

.inventory-count-summary-detail-item {
    display: grid;
    gap: 0.22rem;
}

.inventory-count-summary-detail-item strong {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 900;
}

.inventory-count-summary-detail-item span {
    color: #111827;
    font-size: 1rem;
    line-height: 1.5;
}

.inventory-count-summary-toolbar-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.35rem 0;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf2;
}

.inventory-count-summary-toolbar {
    align-items: center;
}

.inventory-count-summary-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inventory-count-summary-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0.44rem 0.9rem;
    border: 1px solid #d3dae5;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
}

.inventory-count-summary-filter strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #eef1f6;
    color: #667085;
    display: inline-grid;
    place-items: center;
    font-size: 0.82rem;
}

.inventory-count-summary-filter.is-active {
    border-color: #6557f2;
    background: #6557f2;
    color: #fff;
}

.inventory-count-summary-filter.is-active strong {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.inventory-count-summary-table .inventory-count-summary-total-row td {
    background: #fbfcfd;
    color: #111827;
    font-weight: 900;
}

.inventory-count-summary-product {
    display: grid;
    gap: 0.2rem;
}

.inventory-count-summary-product strong {
    color: #111827;
    font-size: 0.97rem;
    font-weight: 900;
}

.inventory-count-summary-product span {
    color: #6c798c;
    font-size: 0.9rem;
}

.inventory-count-summary-difference {
    font-weight: 900;
}

.inventory-count-summary-difference.is-match {
    color: #2e9b4f;
}

.inventory-count-summary-difference.is-over {
    color: #cb8a0f;
}

.inventory-count-summary-difference.is-under {
    color: #d64545;
}

.inventory-count-summary-empty {
    min-height: 220px;
}

.inventory-count-summary-empty-icon::before,
.inventory-count-summary-empty-icon::after {
    content: "";
    position: absolute;
}

.inventory-count-summary-empty-icon {
    position: relative;
    width: 56px;
    height: 42px;
    border: 4px solid #6557f2;
    border-radius: 8px;
    display: inline-block;
}

.inventory-count-summary-empty-icon::before {
    top: -10px;
    left: 10px;
    right: 10px;
    height: 8px;
    border: 4px solid #6557f2;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.inventory-count-summary-empty-icon::after {
    top: 14px;
    left: 14px;
    right: 14px;
    height: 4px;
    background: #6557f2;
    border-radius: 999px;
}

.inventory-table-row.is-clickable {
    cursor: pointer;
}

.inventory-table-row.is-clickable:focus-visible {
    outline: 2px solid #6557f2;
    outline-offset: -2px;
}

@media (max-width: 980px) {
    .inventory-count-summary-details-grid {
        grid-template-columns: 1fr;
    }
}

.inventory-list-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.inventory-list-head > div {
    display: grid;
    gap: 0.35rem;
}

.inventory-catalog-copy p {
    margin: 0.26rem 0 0;
    color: #627182;
    font-size: 0.84rem;
    line-height: 1.4;
}

.inventory-catalog-price-wrap {
    min-width: 138px;
    display: grid;
    justify-items: end;
    gap: 0.18rem;
}

.inventory-catalog-stock {
    color: #767982;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.inventory-list-panel {
    padding: 0.8rem;
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}

.inventory-table-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.inventory-table-filter-pill {
    min-height: 40px;
    padding: 0.56rem 0.95rem;
    font-size: 0.9rem;
}

.inventory-table-filter-button {
    border: 1px solid #d5ddeb;
    background: #ffffff;
}

.inventory-sort-menu {
    justify-self: end;
}

.inventory-table-order-button {
    min-height: 42px;
    padding: 0.56rem 1rem 0.56rem 1.1rem;
    border-radius: 999px;
    border: 1px solid #d5ddeb;
    background: #ffffff;
    color: #101927;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-sort-dropdown {
    min-width: 276px;
    padding: 0.45rem;
    gap: 0.16rem;
    overflow: visible;
}

.inventory-sort-menu.is-dropup .inventory-sort-dropdown {
    top: auto;
    bottom: calc(100% + 0.42rem);
}

.inventory-sort-dropdown a {
    min-height: 0;
    border-radius: 8px;
    padding: 0.1rem 0.56rem;
    color: #151f30;
    font-size: 0.78rem;
    line-height: 1.05;
    font-weight: 650;
}

.inventory-sort-dropdown a.is-active {
    background: #f3f6fb;
    color: #0d1625;
}

.inventory-table {
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.inventory-table th {
    color: #0f1828;
    font-size: 0.78rem;
    font-weight: 800;
    padding-top: 0.7rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #e6ebf3;
    background: #f8fbff;
}

.inventory-table td {
    color: #162133;
    font-size: 0.9rem;
    background: #ffffff;
    border-top: 0;
    border-bottom: 1px solid #e3e9f2;
    padding-top: 0.98rem;
    padding-bottom: 0.98rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.inventory-product-name-cell {
    min-width: 220px;
    gap: 0.68rem;
}

.clients-pro-table .inventory-product-thumb.clients-pro-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 10px;
    border: 1px solid rgba(205, 214, 226, 0.96);
    background: #f5f6fa;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(25, 37, 55, 0.08);
}

.clients-pro-table .inventory-product-thumb.clients-pro-avatar.is-photo {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.inventory-product-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-product-thumb-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 22%, rgba(255, 218, 163, 0.96), transparent 15%),
        radial-gradient(circle at 26% 16%, rgba(255, 255, 255, 0.44), transparent 20%),
        linear-gradient(180deg, rgba(24, 17, 14, 0.12), rgba(24, 17, 14, 0.18)),
        linear-gradient(135deg, #70615c 0%, #9f7f6f 48%, #dbc8bc 100%);
}

.inventory-product-thumb-flare {
    position: absolute;
    left: 16%;
    bottom: 34%;
    width: 34%;
    height: 34%;
    border-radius: 999px;
    background: rgba(255, 214, 148, 0.42);
    filter: blur(8px);
}

.inventory-product-thumb-jar,
.inventory-product-thumb-candle {
    position: absolute;
    bottom: 14%;
    border-radius: 7px 7px 6px 6px;
    box-shadow: 0 7px 12px rgba(42, 26, 19, 0.2);
}

.inventory-product-thumb-jar {
    left: 14%;
    width: 26%;
    height: 39%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.06)),
        linear-gradient(180deg, #623822 0%, #8f5231 60%, #44271b 100%);
}

.inventory-product-thumb-jar::before {
    content: '';
    position: absolute;
    top: -12%;
    left: 23%;
    width: 54%;
    height: 18%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #d8dbe0, #aab1b9);
}

.inventory-product-thumb-candle {
    left: 57%;
    width: 30%;
    height: 43%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #f1ece4 0%, #dbcdbd 72%, #9c8875 100%);
}

.inventory-product-thumb-candle::before {
    content: '';
    position: absolute;
    top: -14%;
    left: 46%;
    width: 8%;
    height: 22%;
    border-radius: 999px;
    background: #23252b;
}

.inventory-product-thumb-candle::after {
    content: '';
    position: absolute;
    top: -28%;
    left: 28%;
    width: 42%;
    height: 36%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.92) 34%, rgba(255, 176, 76, 0.94) 60%, rgba(255, 138, 45, 0.08) 100%);
}

.inventory-product-thumb-surface {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: 0;
    height: 22%;
    background:
        linear-gradient(90deg, rgba(89, 112, 146, 0.52) 0 14%, rgba(243, 228, 196, 0.86) 14% 28%, rgba(110, 130, 162, 0.48) 28% 42%, rgba(243, 228, 196, 0.86) 42% 56%, rgba(110, 130, 162, 0.48) 56% 70%, rgba(243, 228, 196, 0.86) 70% 84%, rgba(110, 130, 162, 0.48) 84% 100%);
    opacity: 0.96;
}

.inventory-product-name-copy {
    gap: 0.18rem;
}

.inventory-product-name-copy small {
    color: #5d6b7f;
    font-size: 0.77rem;
    font-weight: 700;
}

.inventory-product-subcopy {
    color: #7a8799;
    font-size: 0.8rem;
    line-height: 1.25;
}

.inventory-table-tag,
.inventory-table-stock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 999px;
    padding: 0.38rem 0.82rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.inventory-table-tag {
    background: color-mix(in srgb, var(--inventory-row-accent, #d9e3f3) 18%, white 82%);
    color: #2b4157;
    border: 1px solid color-mix(in srgb, var(--inventory-row-accent, #d9e3f3) 55%, #d7e0eb 45%);
}

.inventory-table-supplier {
    color: #223247;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

.inventory-table-center-name {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
}

.inventory-table-stock-pill {
    min-width: 54px;
    background: linear-gradient(180deg, #f1f7ff 0%, #e8f2ff 100%);
    color: #2b5d93;
    border: 1px solid #cfe0f6;
}

.inventory-table-price {
    color: #132238;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.suppliers-list-panel .clients-pro-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
}

.suppliers-table-name-cell {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
}

.suppliers-table-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 999px;
    border: 1px solid #dfe5ef;
    background: linear-gradient(180deg, #f4f1ff 0%, #ece7ff 100%);
    color: #624de3;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-grid;
    place-items: center;
}

.suppliers-table-name-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.suppliers-table-name-copy strong {
    color: #132238;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
}

.suppliers-table-name-copy small,
.suppliers-table-phone,
.suppliers-table-email,
.suppliers-table-updated {
    color: #5f6e84;
    font-size: 0.9rem;
    line-height: 1.35;
}

.suppliers-table-email {
    color: #223247;
    font-weight: 600;
}

.suppliers-table-count {
    color: #132238;
    font-size: 0.96rem;
    font-weight: 800;
}

.admin-body.supplier-form-editor-open {
    overflow: hidden;
}

.admin-body.supplier-form-editor-open .admin-content,
.admin-body.supplier-form-editor-open .clients-pro-main,
.admin-body.supplier-form-editor-open .clients-pro-side,
.admin-body.supplier-form-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.supplier-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.supplier-editor-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.supplier-editor-topbar-spacer {
    min-height: 4px;
}

.supplier-editor-shell {
    place-items: start center;
    padding-top: 1.7rem;
}

.supplier-editor-content {
    width: min(100%, 760px);
    display: grid;
    gap: 1.75rem;
}

.supplier-editor-section {
    display: grid;
    gap: 1.1rem;
    padding-bottom: 1.55rem;
    border-bottom: 1px solid #e5e8ef;
}

.supplier-editor-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.supplier-editor-section h2 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
    font-weight: 900;
}

.supplier-editor-fields {
    gap: 1rem;
}

.supplier-editor-grid {
    display: grid;
    gap: 1rem;
}

.supplier-editor-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-editor-fields input,
.supplier-editor-fields textarea,
.supplier-editor-fields select {
    width: 100%;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
    color: #0f1728;
    box-shadow: none;
}

.supplier-editor-fields input,
.supplier-editor-fields select {
    height: 50px;
}

.supplier-editor-fields textarea {
    min-height: 138px;
    resize: vertical;
}

.supplier-editor-fields select {
    padding-right: 2.6rem;
}

@media (max-width: 860px) {
    .supplier-editor-form {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .supplier-editor-page {
        overflow-y: auto;
    }

    .supplier-editor-shell {
        padding: 1.3rem 1rem 1.8rem;
    }

    .supplier-editor-grid.cols-2 {
        grid-template-columns: 1fr;
    }
}

.supplier-hub-panel .inventory-hub-layout {
    grid-template-columns: 300px minmax(0, 1fr);
}

.supplier-hub-avatar-circle {
    width: 128px;
    height: 128px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4f1ff 0%, #ece7ff 100%);
    color: #624de3;
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 800;
}

.supplier-hub-status-pill {
    width: fit-content;
    margin: 0 auto 1.3rem;
    padding: 0.42rem 0.88rem;
    border-radius: 999px;
    border: 1px solid #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
    font-size: 0.88rem;
    font-weight: 700;
}

.supplier-hub-status-pill.is-idle {
    border-color: #d9e1ec;
    background: #f8fafc;
    color: #6a778a;
}

.supplier-hub-products-list {
    display: grid;
    gap: 1rem;
}

.supplier-hub-product-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    background: #fff;
}

.supplier-hub-product-thumb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
    position: relative;
}

.supplier-hub-product-thumb .inventory-product-thumb-scene {
    position: absolute;
    inset: 0;
}

.supplier-hub-product-copy {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.supplier-hub-product-copy strong {
    color: #132238;
    font-size: 0.98rem;
    font-weight: 800;
}

.supplier-hub-product-copy small,
.supplier-hub-product-copy span {
    color: #617189;
    font-size: 0.88rem;
    line-height: 1.35;
}

.supplier-hub-product-meta {
    display: grid;
    justify-items: end;
    gap: 0.28rem;
    text-align: right;
}

.supplier-hub-product-meta span {
    color: #617189;
    font-size: 0.86rem;
    font-weight: 600;
}

.supplier-hub-product-meta strong {
    color: #132238;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-table-empty-cell {
    padding: 2.6rem 1rem !important;
    border-bottom: 0 !important;
    background: #ffffff !important;
}

.inventory-table-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    text-align: center;
}

.inventory-table-empty-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border: 4px solid #5a49da;
    border-radius: 999px;
    box-sizing: border-box;
}

.inventory-table-empty-icon::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 15px;
    height: 4px;
    border-radius: 999px;
    background: #5a49da;
    transform: rotate(45deg);
    transform-origin: center;
}

.inventory-table-empty-state strong {
    color: #121b2b;
    font-size: 0.95rem;
    font-weight: 900;
}

.inventory-table-empty-state p {
    margin: 0;
    color: #6d7a8c;
    font-size: 0.84rem;
    font-weight: 500;
}

.inventory-table-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.95rem;
    padding-top: 0.95rem;
    border-top: 1px solid #e3e9f2;
}

.inventory-table-pagination {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    justify-content: center;
}

.inventory-table-results {
    margin: 0;
    color: #6f7f95;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.admin-body.admin-page-appointments-sales .clients-pro-table-wrap + .inventory-table-footer:not(.appointments-sales-table-footer) {
    margin-top: 0;
    padding-top: 0.85rem;
    border-top: 0;
}

.inventory-table-page-link,
.inventory-table-page-nav {
    min-width: 36px;
    min-height: 36px;
    padding: 0.42rem 0.72rem;
    border-radius: 10px;
    border: 1px solid #d9e1ec;
    background: #ffffff;
    color: #203149;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.inventory-table-page-link:hover,
.inventory-table-page-nav:hover {
    background: #f5f9ff;
    border-color: #c8d8eb;
}

.inventory-table-page-link.is-active {
    background: #10233b;
    border-color: #10233b;
    color: #ffffff;
}

.inventory-table-page-nav.is-disabled {
    opacity: 0.45;
    cursor: default;
}

.inventory-filters-modal .lh-catalog-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.inventory-filters-dialog {
    width: min(720px, calc(100vw - 2.8rem));
    max-height: calc(100vh - 4rem);
    border-radius: 18px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    box-shadow: 0 28px 54px rgba(12, 23, 36, 0.2);
    padding: 1.9rem 2rem 1.7rem;
}

.inventory-filters-close {
    top: 1.15rem;
    right: 1.2rem;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #202734;
    font-size: 2rem;
    line-height: 1;
    box-shadow: none;
}

.inventory-filters-head h3 {
    margin: 0;
    color: #0e1828;
    font-size: 1.1rem;
    font-weight: 900;
}

.inventory-filters-form {
    display: grid;
    gap: 1.35rem;
}

.inventory-filters-grid {
    display: grid;
    gap: 1.15rem;
}

.inventory-filters-form .form-group {
    display: grid;
    gap: 0.46rem;
}

.inventory-filters-form .form-group label {
    color: #121d2d;
    font-size: 0.94rem;
    font-weight: 800;
}

.inventory-filters-form .form-group select {
    min-height: 48px;
    border-radius: 10px;
    border-color: #d4dbe6;
    background: #ffffff;
    color: #111b2c;
    font-size: 0.96rem;
    font-weight: 600;
    padding-inline: 1rem 2.6rem;
}

.inventory-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding-top: 0.25rem;
}

.inventory-filters-actions .btn,
.inventory-filters-actions .btn-outline {
    min-height: 46px;
    border-radius: 999px;
    padding-inline: 1.25rem;
    font-size: 0.96rem;
    font-weight: 800;
}

.inventory-filters-actions .btn {
    background: #0b0b10;
    border-color: #0b0b10;
}

.inventory-filters-actions .btn:hover {
    background: #1d1e25;
    border-color: #1d1e25;
}

.inventory-filters-actions .btn-outline {
    background: #ffffff;
    color: #141c28;
    border-color: #d4dbe6;
}

.inventory-filters-actions .btn-outline:hover {
    background: #f5f7fb;
    color: #141c28;
    border-color: #c6d1df;
}

.inventory-table tbody tr {
    position: relative;
}

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

.inventory-table tbody tr:hover td,
.inventory-table tbody tr:focus-within td {
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    border-color: #d7e3f2;
}

.inventory-table tbody tr:hover .inventory-product-thumb,
.inventory-table tbody tr:focus-within .inventory-product-thumb {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 18px rgba(34, 52, 77, 0.08);
}

.inventory-table td:nth-child(3),
.inventory-table td:nth-child(4),
.inventory-table td:nth-child(5),
.inventory-table td:nth-child(6) {
    font-weight: 600;
}

.inventory-table td:nth-child(6) {
    white-space: nowrap;
}

.inventory-stock-orders-row td {
    vertical-align: middle;
}

.inventory-stock-orders-table td:last-child {
    width: 150px;
}

.inventory-stock-order-link {
    display: inline-flex;
    align-items: center;
    color: #132238;
    font-size: 0.94rem;
    font-weight: 900;
    text-decoration: none;
}

.inventory-stock-order-link:hover,
.inventory-stock-order-link:focus-visible {
    color: #3f57f5;
}

.inventory-stock-order-link.is-static {
    color: #132238;
}

.inventory-count-title-link {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.inventory-count-title-link:hover,
.inventory-count-title-link:focus-visible {
    color: #111827;
}

.inventory-stock-order-status {
    justify-self: start;
    text-transform: none;
}

.inventory-stocktake-status {
    min-width: 0;
}

.inventory-table-results {
    margin-top: 1rem;
}

.inventory-options-dropdown .clients-pro-options-menu {
    min-width: 256px;
    padding: 0.55rem;
    gap: 0.12rem;
}

.inventory-counts-add-form {
    margin: 0;
}

.inventory-counts-add-form .clients-pro-add-btn {
    border: 0;
    cursor: pointer;
}

.inventory-options-menu .clients-pro-option-item {
    width: 100%;
    justify-content: flex-start;
    text-decoration: none;
}

.inventory-options-menu button.clients-pro-option-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.inventory-options-menu .clients-pro-options-label {
    margin-top: 0.32rem;
}

.inventory-options-export-ico {
    min-width: 28px;
    width: 28px;
    height: 22px;
    border-radius: 0;
    color: #0f1625;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.inventory-import-top {
    margin-bottom: 0.5rem;
}

.inventory-import-hero {
    display: grid;
    gap: 0.18rem;
}

.inventory-import-eyebrow {
    margin: 0;
    color: #6d7582;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-import-shell {
    max-width: 1040px;
}

.inventory-import-panel {
    padding: 2rem 2.2rem;
}

.inventory-import-dropzone {
    min-height: 310px;
    border: 1px dashed #d3dae5;
    border-radius: 18px;
    background: #fafbfc;
    display: grid;
    place-items: center;
    gap: 0.55rem;
    text-align: center;
    cursor: pointer;
}

.inventory-import-dropzone .material-symbols-outlined {
    font-size: 2.4rem;
    color: #141b28;
}

.inventory-import-dropzone strong {
    color: #121b2c;
    font-size: 1.06rem;
    font-weight: 900;
}

.inventory-import-cta {
    min-height: 42px;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: 1px solid #d0d6e0;
    background: #ffffff;
    color: #141d2d;
    font-size: 0.96rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inventory-import-note {
    margin: 1rem 0 0;
    color: #6c7685;
    font-size: 0.96rem;
    line-height: 1.5;
}

.inventory-directory-modal .lh-catalog-backdrop,
.inventory-entity-modal .lh-catalog-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.inventory-directory-dialog,
.inventory-entity-dialog {
    width: min(720px, calc(100vw - 3rem));
    max-height: calc(100vh - 3rem);
    border-radius: 20px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    box-shadow: 0 30px 56px rgba(12, 23, 36, 0.22);
    padding: 2rem 2rem 1.8rem;
}

.inventory-directory-close {
    top: 1.25rem;
    right: 1.3rem;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #161d2a;
    font-size: 2rem;
    line-height: 1;
    box-shadow: none;
}

.inventory-directory-head h3 {
    margin: 0;
    color: #121b2c;
    font-size: clamp(1.6rem, 2.3vw, 2rem);
    font-weight: 900;
}

.inventory-directory-search {
    margin-top: 1.55rem;
}

.inventory-directory-search input {
    font-weight: 600;
}

.inventory-directory-add-link {
    margin-top: 1.4rem;
    border: 0;
    background: transparent;
    color: #5f56ff;
    font-size: 0.98rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    cursor: pointer;
}

.inventory-directory-add-link .material-symbols-outlined {
    font-size: 1.32rem;
}

.inventory-directory-list {
    margin-top: 1.35rem;
    border-top: 1px solid #ebeef4;
}

.inventory-directory-item {
    padding: 1.05rem 0;
    border-bottom: 1px solid #ebeef4;
    display: grid;
    gap: 0.14rem;
}

.inventory-directory-item strong {
    color: #131c2d;
    font-size: 0.98rem;
    font-weight: 900;
}

.inventory-directory-item span,
.inventory-directory-empty {
    color: #697789;
    font-size: 0.92rem;
    font-weight: 500;
}

.inventory-directory-empty {
    margin: 0;
    padding: 1rem 0 0.2rem;
}

.inventory-entity-form {
    display: grid;
    gap: 1.4rem;
    margin-top: 1.8rem;
}

.inventory-entity-form .form-group {
    display: grid;
    gap: 0.48rem;
}

.inventory-entity-form .form-group label {
    color: #121c2d;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-entity-form .form-group input {
    min-height: 50px;
    border-radius: 10px;
    border-color: #d4dbe6;
    background: #ffffff;
    font-size: 0.98rem;
    font-weight: 600;
}

.inventory-entity-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding-top: 0.3rem;
}

.inventory-entity-actions .btn,
.inventory-entity-actions .btn-outline {
    min-height: 46px;
    border-radius: 999px;
    padding-inline: 1.35rem;
    font-size: 0.96rem;
    font-weight: 800;
}

.inventory-entity-actions .btn {
    background: #0b0b10;
    border-color: #0b0b10;
}

.inventory-entity-actions .btn:hover {
    background: #1d1e25;
    border-color: #1d1e25;
}

.inventory-entity-actions .btn-outline {
    background: #ffffff;
    color: #141c28;
    border-color: #d4dbe6;
}

.inventory-entity-actions .btn-outline:hover {
    background: #f5f7fb;
    border-color: #c6d1df;
}

@media (max-width: 1180px) {
    .inventory-product-grid {
        grid-template-columns: 1fr;
    }

    .inventory-product-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .inventory-top-title,
    .inventory-toggle-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .inventory-top-title {
        padding-bottom: 0.4rem;
    }

    .inventory-product-aside,
    .inventory-fields-grid,
    .inventory-inline-fields,
    .inventory-split-fields {
        grid-template-columns: 1fr;
    }

    .inventory-list-head {
        grid-template-columns: 1fr;
    }

    .inventory-catalog-price-wrap {
        min-width: 0;
    }

    .inventory-table-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-table-pagination {
        justify-content: center;
    }

    .inventory-sort-menu {
        justify-self: stretch;
    }

    .inventory-table-order-button {
        width: 100%;
        justify-content: space-between;
    }

    .inventory-import-panel,
    .inventory-directory-dialog,
    .inventory-entity-dialog {
        padding: 1.4rem 1.2rem 1.2rem;
    }

    .inventory-import-dropzone {
        min-height: 240px;
    }

    .inventory-sort-dropdown {
        min-width: 0;
        width: 100%;
    }

    .inventory-filters-dialog {
        width: min(100%, calc(100vw - 1.4rem));
        padding: 1.3rem 1.1rem 1.15rem;
    }

    .inventory-filters-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inventory-entity-actions {
        flex-direction: column-reverse;
    }

    .inventory-entity-actions .btn,
    .inventory-entity-actions .btn-outline {
        width: 100%;
    }

    .inventory-product-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inventory-product-actions .btn,
    .inventory-product-actions button {
        width: 100%;
    }

    .inventory-product-actions-float {
        left: calc(78px + 0.82rem);
        right: 0.82rem;
        bottom: 0.7rem;
        padding: 0.66rem 0.72rem;
    }
}

@media (max-width: 980px) {
    .inventory-product-actions-float {
        left: 0.82rem;
        right: 0.82rem;
        bottom: 0.62rem;
    }
}

@media (max-width: 640px) {
    .inventory-product-actions-float {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inventory-product-actions-float .btn,
    .inventory-product-actions-float button {
        width: 100%;
    }
}

.admin-body.admin-page-services-form .clients-pro-main {
    padding-top: 0.18rem;
}

.admin-body.admin-page-services-catalog .clients-pro-layout,
.admin-body.admin-page-inventory-catalog .clients-pro-layout,
.admin-body.admin-page-memberships-catalog .clients-pro-layout {
    min-height: calc(100vh - 68px);
}

.admin-body.admin-page-services-catalog .clients-pro-side,
.admin-body.admin-page-inventory-catalog .clients-pro-side,
.admin-body.admin-page-memberships-catalog .clients-pro-side {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.admin-body.admin-page-services-catalog .clients-pro-side-head,
.admin-body.admin-page-services-catalog .clients-pro-side-nav,
.admin-body.admin-page-inventory-catalog .clients-pro-side-head,
.admin-body.admin-page-inventory-catalog .clients-pro-side-nav,
.admin-body.admin-page-memberships-catalog .clients-pro-side-head,
.admin-body.admin-page-memberships-catalog .clients-pro-side-nav {
    background: #ffffff !important;
}

.admin-body.admin-page-services-catalog .clients-pro-side-nav,
.admin-body.admin-page-inventory-catalog .clients-pro-side-nav,
.admin-body.admin-page-memberships-catalog .clients-pro-side-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch;
    align-content: flex-start;
    flex: 1 1 auto !important;
    gap: 0.22rem;
    min-height: auto;
}

@media (min-width: 981px) {
    .admin-body.admin-page-services-catalog .clients-pro-layout,
    .admin-body.admin-page-inventory-catalog .clients-pro-layout,
    .admin-body.admin-page-memberships-catalog .clients-pro-layout {
        display: block;
        min-height: calc(100vh - 68px);
    }

    .admin-body.admin-page-services-catalog .clients-pro-side,
    .admin-body.admin-page-inventory-catalog .clients-pro-side,
    .admin-body.admin-page-memberships-catalog .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        min-height: 0;
        max-height: none;
        border-top: 0;
        border-right: 1px solid #dedfe4;
        border-bottom: 0;
        border-left: 0;
        overflow-y: auto;
        z-index: 14;
    }

    .admin-body.admin-page-services-catalog .clients-pro-side-nav,
    .admin-body.admin-page-inventory-catalog .clients-pro-side-nav,
    .admin-body.admin-page-memberships-catalog .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-services-catalog .clients-pro-main,
    .admin-body.admin-page-inventory-catalog .clients-pro-main,
    .admin-body.admin-page-memberships-catalog .clients-pro-main {
        margin-left: 210px;
        padding: 0.75rem 1rem 1.2rem;
    }

    .admin-body.admin-page-services-catalog.admin-page-services-form .clients-pro-main {
        padding-top: 0.12rem;
    }
}

@media (max-width: 980px) {
    .admin-body.admin-page-services-catalog .clients-pro-side,
    .admin-body.admin-page-inventory-catalog .clients-pro-side,
    .admin-body.admin-page-memberships-catalog .clients-pro-side {
        position: sticky !important;
        top: 0;
        left: auto;
        bottom: auto;
        width: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
    }
}

.admin-body.admin-page-services-catalog .admin-module-side-head {
    min-height: 74px;
    padding: 0 1.35rem;
}

.admin-body.admin-page-services-catalog .admin-module-side-head h2 {
    color: #111111;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav {
    gap: 0.36rem;
    padding: 0.95rem 1.15rem 1.35rem;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a {
    min-height: 40px;
    padding: 0.38rem 0.1rem;
    border-radius: 0;
    border: 0;
    font-size: 1.05rem;
    font-weight: 560;
    color: #000000;
    line-height: 1.35;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a:hover {
    background: transparent;
    border: 0;
    color: #000000;
    opacity: 0.82;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a.is-active {
    background: transparent;
    border: 0;
    color: #000000;
}

.admin-body.admin-page-services-catalog .admin-module-side-nav a[aria-disabled='true'] {
    opacity: 1;
    color: #000000;
}

.admin-body.admin-page-services-catalog .admin-module-side-divider {
    margin: 0.62rem 0 0.56rem;
    border-top-color: #d8d8dc;
}

.admin-body.admin-page-services-catalog .admin-module-side-section {
    margin: 0.68rem 0 0.16rem;
    color: #000000;
    font-size: 1.85rem;
    line-height: 1.3;
    font-weight: 740;
    letter-spacing: 0;
}

.admin-body.admin-page-services-catalog .admin-module-side-toggle {
    width: 46px;
    height: 46px;
    right: -23px;
    border-color: #d9dce2;
    background: #f2f2f3;
    font-size: 1.45rem;
}

@media (max-width: 980px) {
    .admin-body.admin-page-services-catalog .admin-module-side-head h2 {
        font-size: 1.42rem;
    }

    .admin-body.admin-page-services-catalog .admin-module-side-nav {
        padding: 0.7rem 0.85rem 0.95rem;
    }

    .admin-body.admin-page-services-catalog .admin-module-side-nav a {
        font-size: 0.96rem;
        min-height: 35px;
    }

    .admin-body.admin-page-services-catalog .admin-module-side-section {
        font-size: 1.03rem;
    }
}

@media (min-width: 981px) {
    .admin-body.admin-page-web-editor .admin-web-editor-layout {
        display: block;
    }

    .admin-body.admin-page-web-editor .admin-web-editor-side {
        position: fixed;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        overflow-y: auto;
        z-index: 14;
    }

    .admin-body.admin-page-web-editor .admin-web-editor-main {
        margin-left: 210px;
    }
}

@media (max-width: 980px) {
    .admin-web-editor-layout {
        display: block;
        min-height: 0;
    }

    .admin-web-editor-side {
        border: 1px solid #d5deeb;
        border-radius: 14px;
        margin: 0 0 0.85rem;
    }

    .admin-web-editor-side-head {
        padding: 0.8rem 0.85rem 0.6rem;
    }

    .admin-web-editor-side-head h2 {
        font-size: 1.03rem;
    }

    .admin-web-editor-nav a {
        font-size: 0.84rem;
    }

    .admin-web-editor-main {
        margin-left: 0;
        padding: 0;
    }
}

.admin-nav > a::before {
    content: attr(data-icon);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: currentColor;
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-weight: 500;
    line-height: 1;
}

.admin-nav > a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(186, 201, 220, 0.16);
    color: #ffffff;
}

.admin-nav > a.is-active {
    background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(147, 197, 253, 0.78);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.42);
}

.admin-profile-nav-locked .admin-nav > span.is-nav-locked,
.admin-profile-nav-locked .admin-nav > span.admin-nav-locked-web {
    cursor: not-allowed;
}

.admin-body.admin-page-dashboard-pro.admin-profile-nav-locked .admin-nav > span.is-nav-locked.is-active,
.admin-body.admin-page-dashboard-pro.admin-profile-nav-locked .admin-nav > span.admin-nav-locked-web.is-active {
    background: #1e3a8a;
    border-color: rgba(147, 197, 253, 0.65);
    color: #e4ebf7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.admin-user {
    margin-top: auto;
    border-top: 1px solid rgba(178, 191, 209, 0.22);
    padding: 0.62rem 0 0.1rem;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.admin-user p {
    display: none;
}

.admin-user a {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(176, 191, 213, 0.22);
    background: transparent;
    color: #e9eef8;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-user a::before {
    content: 'logout';
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.admin-user a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(188, 202, 222, 0.3);
}

.admin-nav-tooltip {
    position: fixed;
    z-index: 3200;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    background: #07080b;
    color: #ffffff;
    border-radius: 10px;
    padding: 0.34rem 0.62rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(5, 8, 14, 0.45);
}

.admin-nav-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #07080b;
}

.admin-nav-tooltip.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.admin-content {
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 0 1.15rem 1.6rem;
    background:
        radial-gradient(960px 380px at 89% -18%, rgba(71, 171, 255, 0.12), transparent 68%),
        linear-gradient(180deg, #edf3fb 0%, #e7eef8 100%);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 158, 220, 0.48) rgba(118, 139, 163, 0.2);
}

.admin-content::-webkit-scrollbar {
    width: 9px;
}

.admin-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(86, 158, 220, 0.48);
}

.admin-content::-webkit-scrollbar-track {
    background: rgba(131, 149, 171, 0.2);
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -1.15rem 1.35rem;
    min-height: 68px;
    border-bottom: 1px solid rgba(147, 197, 253, 0.28);
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(30, 58, 138, 0.55), 0 12px 22px rgba(23, 37, 84, 0.28);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.62rem 1.15rem;
}

.admin-topbar::before {
    content: '';
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00cc00, #0088ff, #6600ff, #ff00ff, #ff0000);
    background-size: 200% 100%;
    animation: rainbow-slide 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes rainbow-slide {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.admin-topbar-brand {
    display: none;
    align-items: center;
    color: #101826;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.admin-topbar-copy {
    min-width: 0;
}

.admin-sidebar-toggle {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #c5d4e6;
    background: #ffffff;
    color: #29445f;
    box-shadow: 0 6px 14px rgba(17, 35, 55, 0.08);
    display: none;
}

.admin-sidebar-toggle:hover {
    background: #f2f7fd;
}

.admin-topbar-kicker {
    margin: 0;
    color: #dbe7f8;
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-topbar-subtitle {
    margin: 0.12rem 0 0;
    color: #9fb0c9;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-topbar-pro-actions {
    display: none;
    align-items: center;
    gap: 0.44rem;
}

.admin-topbar-pro-cta {
    min-height: 40px;
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    background: linear-gradient(135deg, #5f4cf6 0%, #7a57ff 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 8px 18px rgba(90, 74, 230, 0.24);
}

.admin-topbar-pro-cta:hover {
    filter: brightness(1.04);
}

.admin-topbar-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #d5deeb;
    background: #ffffff;
    color: #192637;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}

.admin-topbar-icon-btn:hover {
    background: #f4f8fd;
}

.admin-topbar-quick {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-body .admin-topbar-quick {
    display: none !important;
}

.admin-topbar-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c9d8e9;
    background: #ffffff;
    color: #294460;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-topbar-chip:hover {
    background: #eef5fd;
}

.admin-topbar-search-wrap {
    position: relative;
}

.admin-topbar-search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: min(280px, 44vw);
    padding: 0.42rem 0.58rem;
    border-radius: 11px;
    border: 1px solid rgba(162, 183, 213, 0.34);
    background: rgba(234, 243, 255, 0.06);
}

.admin-topbar-search-icon {
    color: #8fb4e1;
    font-size: 0.86rem;
    line-height: 1;
}

.admin-topbar-search input[type='search'] {
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e6efff;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-topbar-search input[type='search']::placeholder {
    color: #9db0cb;
}

.admin-topbar-search input[type='search']:focus {
    box-shadow: none;
}

.admin-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    border: 1px solid #cfddec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(17, 35, 55, 0.14);
    overflow: hidden;
    z-index: 34;
}

.admin-search-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-top: 1px solid #e3ebf4;
    background: #ffffff;
    color: #243c56;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.54rem 0.65rem;
    cursor: pointer;
}

.admin-search-item:first-child {
    border-top: 0;
}

.admin-search-item:hover {
    background: #f2f8ff;
}

.admin-search-empty {
    margin: 0;
    padding: 0.6rem 0.65rem;
    color: #5d738f;
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-topbar-ghost {
    min-height: 34px;
    padding: 0.44rem 0.78rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.admin-topbar-user {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c7d6e8;
    background: #ffffff;
    color: #2a4460;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-account-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.admin-account-menu > summary {
    list-style: none;
}

.admin-account-menu > summary::-webkit-details-marker {
    display: none;
}

.admin-account-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.admin-account-toggle-avatar,
.admin-account-card-avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    overflow: hidden;
    background: #e5edf8;
    color: #244364;
    font-weight: 800;
    line-height: 1;
}

.admin-account-toggle-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.84rem;
}

.admin-account-toggle-avatar:not(.has-photo) {
    border: 1px solid rgba(196, 212, 232, 0.9);
    box-sizing: border-box;
}

.admin-account-card-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.92rem;
}

.admin-account-toggle-avatar.has-photo,
.admin-account-card-avatar.has-photo {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-sizing: border-box;
}

.admin-account-toggle-avatar img,
.admin-account-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.admin-account-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 45;
    width: min(330px, calc(100vw - 2rem));
    border: 1px solid #d6dfec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.18);
    padding: 0.72rem;
    display: none;
}

.admin-account-menu[open] .admin-account-dropdown {
    display: block;
}

.admin-notifications-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.admin-notifications-toggle {
    list-style: none;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.admin-notifications-toggle::-webkit-details-marker {
    display: none;
}

.admin-notifications-toggle-icon {
    font-size: 1.05rem;
    line-height: 1;
    transform-origin: 50% 8%;
}

.admin-notifications-menu.has-pending-alerts .admin-notifications-toggle {
    border-color: rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.admin-notifications-menu.is-alerting .admin-notifications-toggle {
    animation: admin-notification-bell-ring 0.85s ease-in-out 2;
    border-color: #f87171;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.28);
}

.admin-notifications-menu.is-alerting .admin-notifications-badge {
    animation: admin-notification-badge-pop 0.55s ease-out 2;
}

@keyframes admin-notification-bell-ring {
    0%,
    100% {
        transform: rotate(0deg);
    }

    18% {
        transform: rotate(16deg);
    }

    36% {
        transform: rotate(-14deg);
    }

    54% {
        transform: rotate(11deg);
    }

    72% {
        transform: rotate(-8deg);
    }

    86% {
        transform: rotate(4deg);
    }
}

@keyframes admin-notification-badge-pop {
    0%,
    100% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.22);
    }
}

.admin-notifications-menu[open] .admin-notifications-toggle,
.admin-notifications-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
}

.admin-notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.92);
}

.admin-notifications-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 46;
    width: min(360px, calc(100vw - 2rem));
    border: 1px solid #d6dfec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    display: none;
}

.admin-notifications-menu[open] .admin-notifications-dropdown {
    display: block;
}

.admin-notifications-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.72rem 0.82rem 0.58rem;
    border-bottom: 1px solid #e8edf5;
}

.admin-notifications-dropdown-head strong {
    font-size: 0.92rem;
    color: #0f172a;
}

.admin-notifications-status {
    font-size: 0.72rem;
    color: #64748b;
    text-align: right;
}

.admin-notifications-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
    max-height: min(360px, 52vh);
    overflow: auto;
}

.admin-notifications-empty {
    padding: 0.95rem 0.82rem;
    color: #64748b;
    font-size: 0.82rem;
}

.admin-notifications-item {
    border-bottom: 1px solid #eef2f7;
}

.admin-notifications-item:last-child {
    border-bottom: 0;
}

.admin-notifications-item-link {
    display: block;
    padding: 0.62rem 0.82rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.16s ease;
}

.admin-notifications-item-link:hover {
    background: #f8fafc;
}

.admin-notifications-item.is-unread .admin-notifications-item-link {
    background: #fff7f7;
}

.admin-notifications-item.is-unread .admin-notifications-item-link::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.95rem;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #ef4444;
}

.admin-notifications-item.is-unread .admin-notifications-item-link {
    position: relative;
    padding-left: 1.15rem;
}

.admin-notifications-item.is-unread .admin-notifications-item-head strong {
    font-weight: 800;
}

.admin-notifications-item.is-read .admin-notifications-item-link {
    opacity: 0.78;
}

.admin-notifications-item-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.admin-notifications-item-head strong {
    font-size: 0.82rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-notifications-pill {
    flex: 0 0 auto;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: #e2e8f0;
    color: #334155;
}

.admin-notifications-item.is-warning .admin-notifications-pill {
    background: #fef3c7;
    color: #92400e;
}

.admin-notifications-item.is-info .admin-notifications-pill {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-notifications-item.is-success .admin-notifications-pill {
    background: #dcfce7;
    color: #166534;
}

.admin-notifications-item.is-danger .admin-notifications-pill {
    background: #fee2e2;
    color: #b91c1c;
}

.admin-notifications-meta {
    margin: 0.28rem 0 0;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
}

.admin-notifications-dropdown-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.62rem 0.82rem;
    border-top: 1px solid #e8edf5;
    background: #f8fafc;
}

.admin-notifications-dropdown-foot a,
.admin-notifications-mark-all {
    font-size: 0.76rem;
    font-weight: 700;
    color: #4f46e5;
    text-decoration: none;
}

.admin-notifications-mark-all {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.admin-notifications-mark-all:hover:not(:disabled) {
    text-decoration: underline;
}

.admin-notifications-mark-all:disabled {
    color: #94a3b8;
    cursor: default;
}

.admin-notifications-dropdown-foot a:hover {
    text-decoration: underline;
}

.admin-body.admin-page-dashboard-pro .admin-notifications-menu {
    display: inline-flex;
}

.admin-body.admin-page-dashboard-pro .admin-notifications-toggle {
    border-color: #d7dfeb;
    background: #ffffff;
    color: #334155;
    box-shadow: none;
}

.admin-body.admin-page-dashboard-pro .admin-notifications-menu[open] .admin-notifications-toggle,
.admin-body.admin-page-dashboard-pro .admin-notifications-toggle:hover {
    background: #f8fafc;
    border-color: #c7d6e8;
}

.admin-body.admin-page-dashboard-pro .admin-notifications-badge {
    box-shadow: 0 0 0 2px #ffffff;
}

.admin-account-card {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.36rem 0.26rem 0.68rem;
}

.admin-account-card-copy {
    min-width: 0;
}

.admin-account-card-copy strong,
.admin-account-card-copy span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-account-card-copy strong {
    color: #16293f;
    font-size: 0.9rem;
    font-weight: 800;
}

.admin-account-card-copy span {
    margin-top: 0.16rem;
    color: #64748b;
    font-size: 0.79rem;
    font-weight: 600;
}

.admin-account-group {
    display: grid;
    gap: 0.18rem;
    padding: 0.5rem 0.1rem;
    border-top: 1px solid #e5ecf5;
}

.admin-account-link {
    width: 100%;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #1f334a;
    padding: 0.46rem 0.6rem;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.admin-account-link:hover {
    background: #f4f8ff;
}

.admin-account-link.is-static {
    color: #70839a;
    cursor: default;
}

.admin-account-link.is-static:hover {
    background: transparent;
}

.admin-account-link-danger {
    color: #b42318;
}

.admin-account-lock {
    cursor: pointer;
}

.admin-account-shortcut {
    color: #8092a8;
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-body .flash-wrap {
    position: sticky;
    top: 4.95rem;
    z-index: 14;
    margin-bottom: 0.8rem;
}

.admin-body.admin-sidebar-collapsed .admin-sidebar .brand {
    justify-content: center;
    font-size: 0;
    padding-left: 0;
    padding-right: 0;
}

.admin-body.admin-sidebar-collapsed .admin-sidebar .brand::before {
    margin: 0;
}

.admin-body.admin-sidebar-collapsed .admin-nav > a,
.admin-body.admin-sidebar-collapsed .admin-nav > span.is-nav-locked,
.admin-body.admin-sidebar-collapsed .admin-nav > span.admin-nav-locked-web,
.admin-body.admin-sidebar-collapsed .admin-nav-group > summary {
    min-height: 42px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.admin-body.admin-sidebar-collapsed .admin-nav > a::before,
.admin-body.admin-sidebar-collapsed .admin-nav > span.is-nav-locked::before,
.admin-body.admin-sidebar-collapsed .admin-nav > span.admin-nav-locked-web::before,
.admin-body.admin-sidebar-collapsed .admin-nav-group > summary::before {
    position: static;
    transform: none;
}

.admin-body.admin-sidebar-collapsed .admin-nav-group > summary::after {
    display: none;
}

.admin-body.admin-sidebar-collapsed .admin-subnav {
    display: none;
}

.admin-body.admin-sidebar-collapsed .admin-nav > a:hover,
.admin-body.admin-sidebar-collapsed .admin-nav-group:hover > summary {
    transform: none;
}

.admin-body .flash {
    border-radius: 12px;
    border-width: 1px;
    box-shadow: 0 10px 18px rgba(18, 34, 51, 0.08);
}

.admin-body .panel {
    border-radius: 14px;
    border: 1px solid #d4dfec;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 24px rgba(17, 35, 55, 0.08);
}

.admin-body .table-wrap {
    border: 1px solid #d5e0ed;
    border-radius: 12px;
    background: #ffffff;
}

.admin-body table {
    background: #fff;
}

.admin-body th,
.admin-body td {
    border-bottom-color: #d9e3ef;
}

.admin-body th {
    background: #f4f8fd;
}

.admin-body .form-grid {
    gap: 1.05rem;
}

.admin-body .form-group {
    gap: 0.18rem;
}

.admin-body .form-group > label {
    margin: 0;
    color: #223247;
    font-size: 0.94rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.admin-body .form-group small {
    margin-top: 0.45rem;
    color: #6a778a;
    font-size: 0.8rem;
    line-height: 1.4;
}

.admin-body .form-group input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']),
.admin-body .form-group select,
.admin-body .form-group textarea {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #112338;
    font-size: 0.94rem;
    padding: 0.78rem 0.9rem;
    box-shadow: none;
}

.admin-body .form-group textarea {
    min-height: 120px;
}

.admin-body .form-group input[type='file'] {
    min-height: 46px;
    border-radius: 12px;
    border: 1px dashed #cfd8e7;
    background: #fff;
    font-size: 0.9rem;
    padding: 0.72rem 0.85rem;
}

.admin-body .form-group input::placeholder,
.admin-body .form-group select::placeholder,
.admin-body .form-group textarea::placeholder {
    color: #b1b8c4;
}

.admin-body .form-group input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):focus,
.admin-body .form-group select:focus,
.admin-body .form-group textarea:focus,
.admin-body .form-group input[type='file']:focus {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.admin-body.admin-page-team-staff .team-staff-profile-password-form .team-staff-password-field input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']),
.admin-body.admin-page-team-staff .team-staff-profile-password-form .team-staff-password-field input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):focus {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0;
    min-height: 0;
}

.admin-body .form-group.mt-1,
.admin-body .form-grid.mt-1 {
    margin-top: 0.82rem;
}

.admin-body input,
.admin-body select,
.admin-body textarea {
    border-radius: 10px;
    border-color: #b9cbdf;
    background: #fbfdff;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
    border-color: #69c6e3;
    box-shadow: 0 0 0 3px rgba(57, 183, 219, 0.2);
}

.admin-body button,
.admin-body .btn,
.admin-body [type='submit'] {
    min-height: 40px;
    border-radius: 10px;
    font-weight: 700;
}

.top-title {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
    border: 1px solid #d4deec;
    background: rgba(247, 251, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 22px rgba(17, 35, 55, 0.06);
}

.top-title h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.1vw, 2.05rem);
    color: #11253b;
    line-height: 1.1;
}

.top-title p {
    margin: 0;
    color: #556983;
    font-weight: 500;
    font-size: 0.92rem;
}

.cms-editor {
    display: grid;
    gap: 1rem;
    padding-bottom: 7.5rem;
}

.cms-main-white {
    background: #ffffff !important;
    border-color: #d7e1ee !important;
    box-shadow: 0 12px 22px rgba(17, 35, 55, 0.08) !important;
}

.cms-main-white .cms-block {
    background: #ffffff;
}

.admin-body.admin-page-content .admin-content {
    background: #ffffff;
    --cms-sidebar-width: 240px;
}

.admin-body.admin-page-content .top-title {
    background: #ffffff;
    border-color: #dce5f0;
    box-shadow: 0 8px 18px rgba(17, 35, 55, 0.06);
}

.admin-body.admin-page-content .cms-actions,
.admin-body.admin-page-content .cms-nav {
    background: #ffffff;
}

.cms-nav {
    position: sticky;
    top: 4.8rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.65rem;
    border-radius: 12px;
    border: 1px solid #d3deec;
    background: rgba(248, 251, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cms-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #c9d8eb;
    background: #f9fcff;
    color: #2a4464;
    font-size: 0.84rem;
    font-weight: 700;
    transition: all 0.18s ease;
}

.cms-nav a:hover {
    border-color: #79cde4;
    background: #ecf9ff;
    color: #19466f;
}

.cms-tools {
    display: grid;
    gap: 0.72rem;
    border: 1px solid #d5e0ed;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
    padding: 0.72rem;
}

.cms-search-wrap {
    display: grid;
    gap: 0.4rem;
}

.cms-search-wrap label {
    margin: 0;
    color: #4f6683;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.cms-search-wrap input[type='search'] {
    border-radius: 10px;
    border-color: #bcd0e6;
    background: #ffffff;
    color: #19314d;
    font-size: 0.9rem;
}

.cms-tools-hint {
    margin: 0;
    color: #5f7590;
    font-size: 0.82rem;
    font-weight: 600;
}

.cms-module-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cms-module-filters button {
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid #c9d8eb;
    background: #f8fbff;
    color: #24415f;
    padding: 0.34rem 0.72rem;
    font-size: 0.79rem;
    font-weight: 700;
    transition: all 0.18s ease;
}

.cms-module-filters button:hover {
    border-color: #7dcfe4;
    background: #ecf9ff;
}

.cms-module-filters button.is-active {
    border-color: #2dbfd9;
    background: linear-gradient(145deg, #31c7e0, #1eaed1);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(20, 66, 95, 0.18);
}

.cms-block {
    border: 1px solid #d5e0ed;
    border-radius: 14px;
    background: #fcfdff;
    padding: 0.95rem;
}

.cms-block-head {
    margin-bottom: 0.8rem;
}

.cms-block-head h2 {
    margin: 0;
    color: #132a45;
    font-size: clamp(1.28rem, 1.65vw, 1.65rem);
    line-height: 1.14;
}

.cms-block-head p {
    margin: 0.3rem 0 0;
    color: #60758e;
    font-size: 0.9rem;
}

.cms-cards {
    display: grid;
    gap: 0.8rem;
}

.cms-cards-text {
    grid-template-columns: 1fr;
}

.cms-cards-global {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cms-card {
    border: 1px solid #d8e2ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 18px rgba(16, 35, 58, 0.06);
    padding: 0.85rem 0.85rem 0.9rem;
}

.cms-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
}

.cms-card-head h3 {
    margin: 0;
    color: #152d49;
    font-size: 1rem;
    line-height: 1.2;
}

.cms-card-title-wrap {
    display: grid;
    gap: 0.34rem;
    min-width: 0;
}

.cms-module-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #d3e0f0;
    background: #f5f9ff;
    color: #39597b;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.cms-card-head code {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #d4e0ef;
    background: #f7faff;
    color: #4f6f92;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}

.cms-translate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem;
    align-items: stretch;
}

.cms-lang-col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 0;
}

.cms-lang-col label {
    color: #4f6580;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.cms-card input,
.cms-card textarea {
    border-radius: 9px;
    border-color: #bfd0e4;
    background: #fbfdff;
    color: #1f3552;
    font-size: 0.92rem;
}

.cms-card textarea {
    min-height: 90px;
}

.cms-check-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.2rem;
    color: #1f3552;
    font-size: 0.9rem;
    font-weight: 600;
}

.cms-check-row input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 4px;
    accent-color: #1fb8d4;
    flex: 0 0 auto;
}

.cms-check-row span {
    line-height: 1.3;
}

.cms-rich-editor {
    border: 1px solid #bfd0e4;
    border-radius: 10px;
    overflow: hidden;
    background: #fbfdff;
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.cms-lang-col .cms-rich-editor {
    height: 100%;
}

.cms-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    padding: 0.42rem;
    border-bottom: 1px solid #d7e3f2;
    background: #f4f8fd;
}

.cms-rich-toolbar button {
    border: 1px solid #c9d8ea;
    background: #ffffff;
    color: #1e3552;
    border-radius: 8px;
    min-width: 30px;
    min-height: 30px;
    padding: 0.24rem 0.38rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cms-rich-toolbar button.is-hr {
    min-width: 38px;
}

.cms-rich-toolbar button:hover {
    background: #ebf3fb;
}

.cms-rich-toolbar button:focus {
    outline: none;
    border-color: #85b2df;
    box-shadow: 0 0 0 3px rgba(71, 136, 201, 0.2);
}

.cms-rich-editable {
    min-height: 180px;
    flex: 1 1 auto;
    padding: 0.72rem 0.8rem;
    color: #1f3552;
    font-size: 0.92rem;
    line-height: 1.52;
}

.cms-rich-editable:focus {
    outline: none;
    background: #fff;
}

.cms-rich-editable p {
    margin: 0 0 0.52rem;
}

.cms-rich-editable ul,
.cms-rich-editable ol {
    margin: 0 0 0.62rem 1.3rem;
}

.cms-rich-editable hr {
    border: 0;
    border-top: 1px solid #b8cbe1;
    margin: 0.9rem 0;
}

.cms-card-image {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cms-image-preview {
    margin: 0.62rem 0 0;
    width: min(280px, 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d5dfec;
    box-shadow: 0 10px 18px rgba(20, 38, 58, 0.12);
}

.cms-image-preview img {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
}

.cms-upload-wrap {
    margin-top: 0.58rem;
    display: grid;
    gap: 0.3rem;
}

.cms-upload-wrap label {
    margin: 0;
    color: #4f6683;
    font-size: 0.82rem;
    font-weight: 700;
}

.cms-upload-wrap input[type='file'] {
    border: 1px dashed #bfd0e3;
    background: #f8fbff;
    padding: 0.55rem 0.62rem;
}

.cms-actions {
    position: fixed;
    left: calc(var(--cms-sidebar-width, 240px) + 1rem);
    right: 1rem;
    bottom: max(0.35rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.6rem 0.72rem;
    border-radius: 14px;
    border: 1px solid #c7d7ea;
    background: rgba(251, 254, 255, 0.96);
    box-shadow: 0 14px 28px rgba(14, 34, 56, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cms-actions-copy {
    display: grid;
    gap: 0.12rem;
}

.cms-actions-copy strong {
    color: #173353;
    font-size: 0.9rem;
    line-height: 1.1;
}

.cms-actions-copy span {
    color: #5f7590;
    font-size: 0.8rem;
    line-height: 1.2;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d1deeb;
    box-shadow: 0 10px 22px rgba(14, 34, 56, 0.08);
    padding: 0.95rem 1rem;
}

.metric-card .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5f728a;
    font-weight: 700;
}

.metric-card .value {
    margin-top: 0.3rem;
    font-size: 1.92rem;
    line-height: 1;
    color: #163f64;
    font-weight: 700;
}

.dashboard-top-title p {
    margin-top: 0.2rem;
    color: #60738c;
    font-size: 0.9rem;
    font-weight: 600;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.dashboard-kpi-card {
    border-radius: 14px;
    border: 1px solid #d1deeb;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96));
    box-shadow: 0 10px 24px rgba(19, 37, 58, 0.08);
    padding: 0.92rem 0.95rem;
    display: grid;
    gap: 0.28rem;
}

.dashboard-kpi-card-wide {
    grid-column: span 2;
}

.dashboard-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dashboard-kpi-label {
    margin: 0;
    color: #5f728a;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 24px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: linear-gradient(140deg, rgba(38, 196, 217, 0.2), rgba(21, 151, 175, 0.24));
    color: #0f6071;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.dashboard-kpi-value,
.dashboard-kpi-money {
    margin: 0.08rem 0 0;
    font-size: clamp(1.68rem, 2.05vw, 2.24rem);
    color: #133a5d;
    line-height: 1;
    font-weight: 800;
}

.dashboard-kpi-money {
    color: #124d4d;
}

.dashboard-kpi-meta {
    margin: 0.08rem 0 0;
    color: #69809c;
    font-size: 0.82rem;
    font-weight: 600;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.95rem;
    align-items: start;
}

.dashboard-side-stack {
    display: grid;
    gap: 0.95rem;
}

.dashboard-panel {
    padding: 0.95rem;
}

.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-panel-kicker {
    margin: 0;
    color: #5f7691;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
}

.dashboard-panel-head h2 {
    margin: 0.2rem 0 0;
    color: #132c48;
    font-size: 1.1rem;
    line-height: 1.15;
}

.dashboard-activity-list,
.dashboard-agenda-list,
.dashboard-next-list {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.52rem;
}

.dashboard-activity-item,
.dashboard-agenda-item,
.dashboard-next-item {
    border: 1px solid #d8e4f0;
    border-radius: 11px;
    background: #fcfeff;
    padding: 0.54rem 0.58rem;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
}

.dashboard-activity-status {
    min-width: 92px;
    text-align: center;
}

.dashboard-activity-copy {
    min-width: 0;
}

.dashboard-activity-title {
    margin: 0;
    color: #18324d;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-activity-meta {
    margin: 0.08rem 0 0;
    color: #627993;
    font-size: 0.79rem;
    font-weight: 600;
}

.dashboard-row-link {
    min-height: 30px;
    padding: 0.28rem 0.6rem;
    font-size: 0.76rem;
}

.dashboard-agenda-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.62rem;
    align-items: center;
}

.dashboard-agenda-time {
    margin: 0;
    min-width: 50px;
    text-align: center;
    border-radius: 8px;
    background: #eaf5fd;
    color: #1f5e86;
    padding: 0.3rem 0.44rem;
    font-size: 0.76rem;
    font-weight: 800;
}

.dashboard-agenda-copy {
    min-width: 0;
}

.dashboard-agenda-title {
    margin: 0;
    color: #1b3652;
    font-size: 0.84rem;
    font-weight: 800;
}

.dashboard-agenda-meta {
    margin: 0.1rem 0 0;
    color: #607793;
    font-size: 0.78rem;
    font-weight: 600;
}

.dashboard-next-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
}

.dashboard-next-date {
    margin: 0;
    min-width: 46px;
    border-radius: 8px;
    background: #f0f6fb;
    color: #234f70;
    text-align: center;
    padding: 0.3rem 0.42rem;
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-next-copy {
    min-width: 0;
}

.dashboard-next-title {
    margin: 0;
    color: #18314c;
    font-size: 0.82rem;
    font-weight: 800;
}

.dashboard-next-meta {
    margin: 0.1rem 0 0;
    color: #607793;
    font-size: 0.76rem;
    font-weight: 600;
}

.dashboard-next-link {
    color: #1f8fa8;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard-next-link:hover {
    color: #166f83;
}

.dashboard-quick-grid {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
}

.dashboard-quick-card {
    border: 1px solid #d5e2ef;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    padding: 0.58rem 0.62rem;
    display: grid;
    gap: 0.12rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-quick-card strong {
    color: #1b3652;
    font-size: 0.84rem;
    font-weight: 800;
}

.dashboard-quick-card span {
    color: #5f7792;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-quick-card:hover {
    transform: translateY(-2px);
    border-color: #b7cfeb;
    box-shadow: 0 12px 20px rgba(18, 40, 62, 0.12);
}

.dashboard-table-panel {
    margin-top: 0.95rem;
}

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-hero-card {
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.dashboard-hero-menu {
    color: #4c5e74;
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-hero-money {
    margin: 0.3rem 0 0;
    color: #0d2137;
    font-size: clamp(2rem, 2.8vw, 2.72rem);
    line-height: 1.05;
    font-weight: 800;
}

.dashboard-hero-meta {
    margin: 0.5rem 0 0;
    color: #5f738c;
    font-size: 0.92rem;
    font-weight: 600;
}

.dashboard-mini-chart {
    margin-top: auto;
    min-height: 204px;
    border: 1px solid #e0e7f0;
    border-radius: 12px;
    padding: 0.8rem 0.65rem 0.45rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.34rem;
    align-items: end;
    background:
        linear-gradient(to top, rgba(200, 214, 229, 0.36) 1px, transparent 1px) 0 0 / 100% 25%,
        #ffffff;
}

.dashboard-mini-bar {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    justify-items: center;
    gap: 0.32rem;
}

.dashboard-mini-bar-fill {
    width: 18px;
    min-height: 8px;
    max-height: 100%;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #1cc18f 0%, #15a278 100%);
    box-shadow: 0 7px 12px rgba(14, 135, 100, 0.2);
}

.dashboard-mini-bar small {
    color: #647a93;
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-empty-state {
    margin: auto 0;
    min-height: 250px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.3rem;
}

.dashboard-empty-icon {
    margin: 0;
    font-size: 3.1rem;
    color: #1d2f45;
    line-height: 1;
}

.dashboard-empty-title {
    margin: 0;
    color: #121f31;
    font-size: clamp(1.3rem, 1.8vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
}

.dashboard-empty-copy {
    margin: 0;
    color: #5f748d;
    font-size: 0.96rem;
    font-weight: 600;
}

.dashboard-next-list-hero {
    margin-top: 0.95rem;
}

.admin-body.admin-page-dashboard-pro .admin-layout {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 0;
}

.admin-body.admin-page-dashboard-pro .admin-sidebar {
    border-radius: 0;
    border-right: 0;
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 52%, #172554 100%);
    padding: 0.6rem 0.48rem;
}

.admin-body.admin-page-dashboard-pro .admin-sidebar .brand,
.admin-body.admin-page-dashboard-pro .admin-user,
.admin-body.admin-page-dashboard-pro .admin-subnav {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-nav {
    margin-top: 0;
    gap: 0.4rem;
}

.admin-body.admin-page-dashboard-pro .admin-nav > a,
.admin-body.admin-page-dashboard-pro .admin-nav > span.is-nav-locked,
.admin-body.admin-page-dashboard-pro .admin-nav > span.admin-nav-locked-web,
.admin-body.admin-page-dashboard-pro .admin-nav-group > summary {
    min-height: 44px;
    border-radius: 12px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    font-size: 0;
    border: 1px solid transparent;
    background: transparent;
}

.admin-body.admin-page-dashboard-pro .admin-nav > a::before,
.admin-body.admin-page-dashboard-pro .admin-nav > span.is-nav-locked::before,
.admin-body.admin-page-dashboard-pro .admin-nav > span.admin-nav-locked-web::before,
.admin-body.admin-page-dashboard-pro .admin-nav-group > summary::before {
    position: static;
    transform: none;
    font-size: 0.86rem;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: #e4ebf7;
}

.admin-body.admin-page-dashboard-pro .admin-nav > a:hover,
.admin-body.admin-page-dashboard-pro .admin-nav-group > summary:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.1);
}

.admin-body.admin-page-dashboard-pro .admin-nav > a.is-active,
.admin-body.admin-page-dashboard-pro .admin-nav > span.is-nav-locked.is-active,
.admin-body.admin-page-dashboard-pro .admin-nav > span.admin-nav-locked-web.is-active,
.admin-body.admin-page-dashboard-pro .admin-nav-group.is-active > summary {
    background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(147, 197, 253, 0.65);
}

.admin-body.admin-page-dashboard-pro .admin-nav-group > summary::after {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-content {
    background: #f3f4f6;
    padding: 0 0 1.2rem;
}

.admin-body.admin-page-dashboard-pro .admin-topbar {
    margin: 0 0 0.7rem;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    min-height: 68px;
    padding: 0.62rem 0.86rem;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(15, 23, 36, 0.08);
}

.admin-body.admin-page-dashboard-pro .admin-topbar-brand {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-copy,
.admin-body.admin-page-dashboard-pro .admin-topbar-search-wrap {
    display: block;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-quick,
.admin-body.admin-page-dashboard-pro .admin-topbar-ghost {
    display: inline-flex;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-left {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-body.admin-page-dashboard-pro .admin-sidebar-toggle {
    border-radius: 10px;
    border-color: #d7dfeb;
    box-shadow: none;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-right {
    margin-left: auto;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-pro-actions {
    display: none;
}

.admin-body.admin-page-dashboard-pro .admin-topbar-user {
    min-height: 32px;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c7d6e8;
    background: #ffffff;
    color: #2a4460;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-body.admin-page-dashboard-pro .flash-wrap,
.admin-body.admin-page-dashboard-pro .admin-content > .top-title,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-hero-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-kpi-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-main-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-table-panel {
    width: min(1220px, calc(100% - 2.1rem));
    margin-left: auto;
    margin-right: auto;
}

.admin-body.admin-page-dashboard-pro .flash-wrap {
    margin-top: 1rem;
}

.admin-body.admin-page-dashboard-pro .top-title.dashboard-top-title {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1rem 0 0.35rem;
    margin: 0 auto;
}

.admin-body.admin-page-dashboard-pro .dashboard-top-title .btn {
    background: linear-gradient(135deg, #5f4cf6 0%, #7a57ff 100%);
    box-shadow: 0 10px 18px rgba(89, 73, 229, 0.24);
}

.admin-body.admin-page-dashboard-pro .dashboard-kpi-card,
.admin-body.admin-page-dashboard-pro .dashboard-panel,
.admin-body.admin-page-dashboard-pro .dashboard-hero-card,
.admin-body.admin-page-dashboard-pro .dashboard-table-panel {
    border: 1px solid #d9e0ea;
    border-radius: 13px;
    box-shadow: none;
    background: #ffffff;
}

.admin-body.admin-page-dashboard-pro .dashboard-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-live-panel {
    border-color: #cfe0f0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 249, 255, 0.92));
}

.dashboard-live-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.56rem;
    border-radius: 999px;
    border: 1px solid #c7d9eb;
    background: #f3f8fd;
    color: #3d5f83;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-live-status.is-ok {
    border-color: #c3e6da;
    background: #eaf8f1;
    color: #256347;
}

.dashboard-live-status.is-error {
    border-color: #e8c9c9;
    background: #fff3f3;
    color: #8f3b3b;
}

.dashboard-live-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.52rem;
}

.dashboard-live-box {
    border: 1px solid #d8e6f4;
    border-radius: 10px;
    background: #fcfeff;
    padding: 0.5rem 0.56rem;
}

.dashboard-live-label {
    margin: 0;
    color: #607893;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.dashboard-live-value {
    margin: 0.14rem 0 0;
    color: #14395b;
    font-size: clamp(1.22rem, 1.58vw, 1.58rem);
    font-weight: 800;
    line-height: 1;
}

.dashboard-live-list {
    margin: 0.72rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.44rem;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.dashboard-live-list::-webkit-scrollbar {
    width: 6px;
}

.dashboard-live-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(104, 138, 173, 0.55);
}

.dashboard-live-item {
    border: 1px solid #d9e5f2;
    border-left: 4px solid #8cb7dc;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.45rem 0.52rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.dashboard-live-item.is-warning {
    border-left-color: #e2b04d;
}

.dashboard-live-item.is-info {
    border-left-color: #5aafd3;
}

.dashboard-live-item.is-success {
    border-left-color: #55b186;
}

.dashboard-live-item.is-danger {
    border-left-color: #d07676;
}

.dashboard-live-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #eef4fb;
    color: #3d5f82;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.dashboard-live-copy {
    min-width: 0;
}

.dashboard-live-title {
    margin: 0;
    color: #17324f;
    font-size: 0.81rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-live-meta {
    margin: 0.08rem 0 0;
    color: #5f7793;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-live-link {
    color: #1e8ba6;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-live-link:hover {
    color: #166f84;
}

.dashboard-live-updated {
    margin: 0.55rem 0 0;
    color: #617994;
    font-size: 0.75rem;
    font-weight: 600;
}

.services-catalog-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
}

.services-catalog-hero h1 {
    margin: 0;
    color: #0f1827;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: clamp(1.22rem, 1.5vw, 1.55rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.services-catalog-hero h1 span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d9dce3;
    background: #ffffff;
    color: #506177;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(13, 24, 39, 0.08);
}

.services-catalog-hero p {
    margin: 0.3rem 0 0;
    color: #6c7280;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
}

.services-catalog-hero p a {
    color: #5f56ff;
    font-weight: 700;
}

.services-catalog-top-actions {
    display: flex;
    align-items: center;
    gap: 0.56rem;
    flex-wrap: wrap;
}

.services-catalog-top .clients-pro-options summary,
.services-catalog-top .clients-pro-add-btn,
.services-catalog-top .clients-pro-options.clients-pro-add-dropdown summary {
    min-height: 46px;
    padding: 0.54rem 1.12rem;
    font-size: 0.95rem;
}

.services-catalog-top .clients-pro-options summary {
    border-color: #d7dbe3;
}

.services-catalog-menu {
    position: relative;
}

.services-catalog-menu summary::-webkit-details-marker,
.service-catalog-card-menu summary::-webkit-details-marker {
    display: none;
}

.services-catalog-pill,
.services-catalog-filter-pill,
.services-catalog-order-btn {
    min-height: 50px;
    border-radius: 999px;
    border: 1px solid #d1d4da;
    background: #ffffff;
    color: #171a20;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.18rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.services-catalog-pill-dark {
    border-color: #0d0d12;
    background: #09090d;
    color: #ffffff;
}

.services-catalog-filter-pill {
    min-height: 44px;
    padding: 0.56rem 1rem;
    font-size: 0.94rem;
}

.services-catalog-filter-pill-tight {
    min-height: 42px;
    padding: 0.52rem 0.95rem;
}

.services-catalog-pill-icon,
.services-catalog-search-icon,
.services-catalog-order-btn span[data-icon],
.services-catalog-menu-dropdown a span[data-icon],
.services-catalog-menu-dropdown button span[data-icon],
.services-catalog-menu-dropdown .appointment-resource-action-item span[data-icon],
.service-catalog-card-menu summary span[data-icon],
.service-catalog-card-menu-icon[data-icon],
.services-category-color-chevron[data-icon],
.services-category-ai-icon[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.services-catalog-pill-icon[data-icon]::before,
.services-catalog-search-icon[data-icon]::before,
.services-catalog-order-btn span[data-icon]::before,
.services-catalog-menu-dropdown a span[data-icon]::before,
.services-catalog-menu-dropdown button span[data-icon]::before,
.services-catalog-menu-dropdown .appointment-resource-action-item span[data-icon]::before,
.service-catalog-card-menu summary span[data-icon]::before,
.service-catalog-card-menu-icon[data-icon]::before,
.services-category-color-chevron[data-icon]::before,
.services-category-ai-icon[data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.15rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.services-catalog-menu-dropdown,
.service-catalog-card-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.42rem);
    left: 0;
    min-width: 248px;
    border-radius: 14px;
    border: 1px solid #d9dde5;
    background: #ffffff;
    box-shadow: 0 18px 32px rgba(19, 24, 34, 0.14);
    padding: 0.52rem;
    display: grid;
    gap: 0.18rem;
    overflow: hidden;
    isolation: isolate;
    background-clip: padding-box;
    z-index: 16;
}

.service-catalog-card-menu-dropdown {
    position: fixed;
    top: var(--service-card-menu-top, auto);
    left: var(--service-card-menu-left, auto);
    right: auto;
    min-width: 15.75rem;
    padding: 0.38rem;
    border-radius: 12px;
    border-color: #e2e6ee;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 16px 36px rgba(15, 23, 42, 0.12);
    gap: 0;
    z-index: 320;
}

.service-catalog-card-menu-group {
    display: grid;
    gap: 0.12rem;
    padding: 0.12rem;
}

.service-catalog-card-menu-group--danger {
    margin-top: 0.2rem;
    padding-top: 0.28rem;
    border-top: 1px solid #eceef3;
}

.services-catalog-menu-dropdown-right {
    left: auto;
    right: 0;
}

.service-catalog-card-menu-dropdown {
    left: var(--service-card-menu-left, auto);
    right: auto;
}

.services-catalog-menu-dropdown a,
.services-catalog-menu-dropdown button,
.service-catalog-card-menu-dropdown a,
.service-catalog-card-menu-dropdown button {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #1d2431;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.58rem;
    padding: 0.58rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.service-catalog-card-menu-item,
.service-catalog-card-menu-dropdown .service-catalog-card-menu-item {
    width: 100%;
    min-height: 2.35rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2a3344;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.62rem;
    padding: 0.5rem 0.62rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.service-catalog-card-menu-label {
    flex: 1 1 auto;
    min-width: 0;
}

.service-catalog-card-menu-icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    color: #5c677a;
}

.service-catalog-card-menu-icon[data-icon]::before {
    font-size: 1.05rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.service-catalog-card-menu-item:hover,
.service-catalog-card-menu-item:focus-visible {
    background: #f4f6fa;
    outline: none;
}

.service-catalog-card-menu-item.is-danger {
    color: #c81e45;
}

.service-catalog-card-menu-item.is-danger .service-catalog-card-menu-icon {
    color: #d63a5c;
}

.service-catalog-card-menu-item.is-danger:hover,
.service-catalog-card-menu-item.is-danger:focus-visible {
    background: #fef2f5;
    color: #b0183c;
}

.services-catalog-menu-dropdown a:hover,
.services-catalog-menu-dropdown button:hover,
.service-catalog-card-menu-dropdown a:not(.service-catalog-card-menu-item):hover,
.service-catalog-card-menu-dropdown button:not(.service-catalog-card-menu-item):hover {
    background: #f2f4f8;
}

.services-catalog-menu-dropdown form,
.service-catalog-card-menu-dropdown form,
.service-catalog-card-menu-form {
    margin: 0;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #1d2431;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.58rem;
    padding: 0.62rem 0.72rem;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item:hover {
    background: #f2f4f8;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item.is-disabled {
    color: #a1a8b6;
    cursor: default;
    pointer-events: none;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item.is-danger {
    color: #e63f59;
}

.appointment-resource-type-actions-menu .appointment-resource-action-item.is-disabled.is-danger {
    color: #c9cdd8;
}

.appointment-resource-actions-sep {
    height: 1px;
    margin: 0.25rem 0;
    background: #eceef3;
}

.services-catalog-toolbar {
    padding: 0.95rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    box-shadow: none;
}

.services-catalog-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.services-catalog-search-box {
    min-height: 44px;
    min-width: min(420px, 100%);
    max-width: 560px;
    flex: 1 1 560px;
    display: flex;
    align-items: center;
    gap: 0.58rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid #cfd4dd;
    background: #ffffff;
}

.services-catalog-search-box input[type='search'] {
    min-height: 38px;
    width: 100%;
    border: 0;
    background: transparent;
    color: #22242a;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0;
}

.services-catalog-search-box input[type='search']::placeholder {
    color: #a5a7ae;
}

.services-catalog-search-box input[type='search']:focus {
    box-shadow: none;
}

.services-catalog-order-btn {
    min-height: 44px;
    padding: 0.56rem 1rem;
    font-size: 0.95rem;
    margin-left: auto;
}

.services-catalog-toolbar .services-catalog-menu-inline {
    flex: 0 0 auto;
}

.services-catalog-centers-menu {
    flex: 0 0 auto;
}

.services-catalog-filter-pill-center {
    min-width: 220px;
    justify-content: space-between;
}

.services-catalog-filter-button {
    flex: 0 0 auto;
}

.services-catalog-filter-button.is-active {
    border-color: #101319;
    background: #101319;
    color: #ffffff;
}

.services-catalog-filter-button.is-active .services-catalog-pill-icon::before {
    color: #ffffff;
}

.services-catalog-toolbar .services-catalog-filter-pill,
.services-catalog-toolbar .services-catalog-order-btn {
    border-color: #d1d6de;
    gap: 0.5rem;
}

.services-catalog-menu-dropdown-centers {
    min-width: 220px;
}

.services-catalog-menu-dropdown a.is-active,
.services-catalog-menu-dropdown button.is-active {
    background: #eef2ff;
    color: #1a1f2b;
}

.services-filters-dialog {
    width: min(560px, calc(100vw - 2.6rem));
}

.services-catalog-grid {
    margin-top: 1.15rem;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.services-catalog-empty-panel {
    padding: 1rem 1.1rem;
}

.services-categories-panel {
    padding: 0;
    overflow: hidden;
    position: sticky;
    top: 92px;
    box-shadow: none;
}

.services-categories-head {
    padding: 1.15rem 1.1rem 0.55rem;
}

.services-categories-head h2 {
    margin: 0;
    color: #181b21;
    font-size: 1.18rem;
    line-height: 1.2;
    font-weight: 800;
}

.services-categories-nav {
    padding: 0.4rem 0.75rem 0.72rem;
    display: grid;
    gap: 0.34rem;
}

.services-categories-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.5rem 0.86rem;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #1c212c;
    font-size: 0.88rem;
    font-weight: 700;
}

.services-categories-nav a:hover {
    border-color: #dde5f0;
    background: #f4f7fd;
}

.services-categories-nav a.is-active {
    border-color: #d9d7ef;
    background: #ebebf7;
}

.services-categories-nav a strong {
    min-width: 24px;
    min-height: 24px;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid #d8dce3;
    background: #f9fafb;
    color: #7b7e86;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services-add-category-link {
    display: flex;
    width: calc(100% - 2.3rem);
    min-height: 46px;
    margin: 0 1.15rem 1.15rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0.82rem 1rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: #5549bc;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.services-add-category-link:hover,
.services-add-category-link:active,
.services-add-category-link.is-active {
    background: #e5e9ef;
    border-color: #cbd1da;
    color: #181b21;
}

.services-add-category-link:focus-visible {
    outline: none;
    background: #e5e9ef;
    border-color: #bcc5d1;
    box-shadow: 0 0 0 3px rgba(152, 163, 180, 0.2);
}

.services-catalog-main {
    min-width: 0;
    display: grid;
    gap: 1.45rem;
}

.services-catalog-section {
    display: grid;
    gap: 0.6rem;
    isolation: isolate;
    position: relative;
    z-index: 0;
}

.services-catalog-section:has(.service-catalog-card-menu[open]),
.services-catalog-section:has(.services-catalog-menu[open]) {
    z-index: 90;
}

.services-categories-nav a[hidden],
.services-catalog-section[hidden],
.service-catalog-card[hidden],
.services-catalog-empty-panel[hidden] {
    display: none !important;
}

.services-catalog-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-catalog-section-head h2 {
    margin: 0;
    color: #1d2027;
    font-size: 1.22rem;
    font-weight: 800;
}

.services-catalog-list {
    display: grid;
    gap: 0.78rem;
    isolation: isolate;
}

.service-catalog-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.95rem;
    align-items: center;
    padding: 1rem 1.08rem;
    border: 1px solid #d8dce3;
    border-left: 1px solid #d8dce3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    position: relative;
    overflow: visible;
    isolation: isolate;
    z-index: 0;
}

.service-catalog-card::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: var(--service-category-accent, #a7e1f7);
    pointer-events: none;
}

.service-catalog-card.is-inactive {
    background: #fbfcfe;
}

.service-catalog-card.is-inactive::before {
    background: #d8dee6;
}

.service-catalog-card.is-inactive .service-catalog-main,
.service-catalog-card.is-inactive .service-catalog-price-wrap {
    opacity: 0.82;
}

.service-catalog-card.is-inactive .service-catalog-card-menu,
.service-catalog-card.is-inactive .service-catalog-card-menu-dropdown {
    opacity: 1;
}

.service-catalog-main {
    min-width: 0;
}

.service-catalog-main h3 {
    margin: 0;
    color: #171a20;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 700;
}

.service-catalog-main p {
    margin: 0.25rem 0 0;
    color: #597089;
    font-size: 0.86rem;
    line-height: 1.4;
}

.service-catalog-duration {
    display: inline-flex;
    margin-top: 0.32rem;
    color: #767982;
    font-size: 0.82rem;
    font-weight: 600;
}

.service-catalog-price-wrap {
    min-width: 120px;
    display: flex;
    justify-content: flex-end;
}

.service-catalog-price {
    color: #22252b;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
}

.service-catalog-card-menu {
    position: relative;
}

.service-catalog-card-menu[open] {
    z-index: 60;
}

.service-catalog-card:has(.service-catalog-card-menu[open]) {
    z-index: 50;
}

.service-catalog-card-menu summary {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #23262d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
}

.service-catalog-card-menu summary:hover {
    background: #f1f3f6;
}

.services-form-top {
    align-items: flex-end;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.services-admin-grid {
    align-items: start;
}

.services-form-panel,
.services-list-panel {
    padding: 0;
    overflow: hidden;
}

.services-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #d7e2ef;
    background:
        linear-gradient(180deg, rgba(247, 251, 255, 0.96) 0%, rgba(238, 245, 253, 0.9) 100%);
}

.services-panel-kicker {
    margin: 0;
    color: #5f7691;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.71rem;
    font-weight: 700;
}

.services-panel-head h2 {
    margin: 0.15rem 0 0;
    font-size: 1.12rem;
    color: #132c48;
    line-height: 1.15;
}

.services-head-btn {
    min-height: 34px;
    padding-inline: 0.78rem;
    font-size: 0.82rem;
}

.services-panel-body {
    padding: 0.95rem 1rem 1rem;
}

.services-form .form-group label {
    color: #4f6580;
}

.service-form-preview {
    margin: 0.2rem 0 0;
    border: 1px solid #d2dfee;
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 16px rgba(18, 38, 59, 0.08);
}

.service-form-preview img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.service-form-preview figcaption {
    margin: 0;
    padding: 0.5rem 0.68rem 0.55rem;
    color: #546a84;
    font-size: 0.78rem;
    font-weight: 600;
}

.services-portfolio-shell {
    display: grid;
    gap: 1rem;
}

.services-portfolio-dropzone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 92px;
    padding: 1rem 1.1rem;
    border: 1px dashed #d9e3ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.services-portfolio-dropzone:hover,
.services-portfolio-dropzone.is-dragover {
    border-color: #8bcfdf;
    background: #f4fcfe;
    box-shadow: 0 0 0 4px rgba(38, 198, 214, 0.08);
}

.services-portfolio-dropzone-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.services-portfolio-dropzone-copy strong {
    color: #112235;
    font-size: 1rem;
    font-weight: 800;
}

.services-portfolio-dropzone-copy small {
    color: #61748c;
    font-size: 0.9rem;
    line-height: 1.45;
}

.services-portfolio-dropzone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid #d2dce8;
    border-radius: 999px;
    background: #ffffff;
    color: #112235;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.services-portfolio-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: #65778e;
}

.services-portfolio-status {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #1d3047;
    font-size: 0.92rem;
    font-weight: 700;
}

.services-portfolio-status strong {
    font-size: 1rem;
    font-weight: 800;
}

.services-portfolio-meta small {
    color: #65778e;
    font-size: 0.82rem;
    line-height: 1.45;
}

.services-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.8rem;
}

.services-portfolio-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: visible;
    cursor: grab;
    transition: transform 0.18s ease;
}

.services-portfolio-item-media {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #eef3f8;
    box-shadow: inset 0 0 0 1px rgba(216, 224, 235, 0.9);
    transition: box-shadow 0.18s ease;
}

.services-portfolio-item:hover {
    transform: translateY(-2px);
}

.services-portfolio-item:hover .services-portfolio-item-media {
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(216, 224, 235, 0.9);
}

.services-portfolio-item.is-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.services-portfolio-item.is-drag-over {
    z-index: 3;
}

.services-portfolio-item.is-drag-over .services-portfolio-item-media {
    box-shadow: 0 0 0 3px rgba(38, 198, 214, 0.22), inset 0 0 0 1px rgba(216, 224, 235, 0.9);
}

.services-portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.services-portfolio-item-menu,
.services-portfolio-item-order,
.services-portfolio-item-badge {
    position: absolute;
    z-index: 2;
}

.services-portfolio-item-menu {
    top: 0.45rem;
    right: 0.45rem;
}

.services-portfolio-item-menu-trigger [data-icon],
.services-portfolio-item-menu-action [data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.services-portfolio-item-menu-trigger [data-icon]::before,
.services-portfolio-item-menu-action [data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
}

.services-portfolio-item-menu-trigger {
    list-style: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #1c2f46;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.services-portfolio-item-menu-trigger::-webkit-details-marker {
    display: none;
}

.services-portfolio-item-menu:hover .services-portfolio-item-menu-trigger,
.services-portfolio-item-menu[open] .services-portfolio-item-menu-trigger {
    background: #ffffff;
}

.services-portfolio-item-menu-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 132px;
    padding: 0.4rem;
    border-radius: 14px;
    border: 1px solid #dfe5ee;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.services-portfolio-item-menu-action {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1c2f46;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.services-portfolio-item-menu-action:hover {
    background: #f7f9fc;
}

.services-portfolio-item-menu-action.is-danger {
    color: #ea3c53;
}

.services-portfolio-item-menu-action.is-danger:hover {
    background: #fff3f5;
}

.services-portfolio-item-badge {
    top: 0.55rem;
    left: 0.55rem;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: rgba(17, 34, 53, 0.82);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
}

.services-portfolio-item-order {
    right: 0.5rem;
    bottom: 0.5rem;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #13263a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.services-portfolio-empty {
    margin: 0;
    color: #66788f;
    font-size: 0.92rem;
}

.services-portfolio-cover-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #ffffff;
}

.services-portfolio-cover-copy {
    display: grid;
    gap: 0.18rem;
}

.services-portfolio-cover-copy strong {
    color: #122235;
    font-size: 0.98rem;
    font-weight: 800;
}

.services-portfolio-cover-copy p {
    margin: 0;
    color: #64778f;
    line-height: 1.5;
}

.service-toggle {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #2d4561;
    font-weight: 700;
}

.service-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.service-toggle-pill {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #c1d1e4;
    background: #e9f0f8;
    transition: all 0.2s ease;
}

.service-toggle-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(17, 35, 55, 0.22);
    transition: transform 0.2s ease;
}

.service-toggle input:checked + .service-toggle-pill {
    border-color: rgba(38, 198, 214, 0.62);
    background: linear-gradient(145deg, #2ac7dc 0%, #199bc5 100%);
}

.service-toggle input:checked + .service-toggle-pill::after {
    transform: translateX(20px);
}

.services-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-form-actions button {
    margin-left: auto;
}

.services-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #c8d8ea;
    background: #f7fbff;
    color: #2c4765;
    font-size: 0.77rem;
    font-weight: 700;
}

.services-admin-list {
    display: grid;
    gap: 0.7rem;
}

.service-admin-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    border: 1px solid #d5e1ee;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.75rem;
    box-shadow: 0 8px 16px rgba(18, 38, 59, 0.06);
}

.service-admin-item.is-inactive {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    border-color: #d8dee7;
}

.service-admin-main {
    display: flex;
    gap: 0.72rem;
    min-width: 0;
}

.service-admin-thumb {
    width: 86px;
    min-width: 86px;
    height: 86px;
    border-radius: 10px;
    border: 1px solid #cfdbeb;
    background: linear-gradient(145deg, #2ac8dd 0%, #168fbe 100%);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 14px rgba(14, 39, 61, 0.16);
}

.service-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-admin-thumb span {
    color: #ffffff;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 800;
}

.service-admin-copy {
    min-width: 0;
}

.service-admin-copy h3 {
    margin: 0;
    color: #132b47;
    font-size: 1.03rem;
    line-height: 1.2;
}

.service-admin-copy p {
    margin: 0.32rem 0 0;
    color: #5d718a;
    font-size: 0.88rem;
    line-height: 1.45;
}

.service-admin-copy .service-admin-alt {
    color: #3f5d7f;
    font-size: 0.82rem;
    font-weight: 700;
}

.service-admin-meta {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.service-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #cfdcec;
    background: #f8fbff;
    color: #365271;
    font-size: 0.76rem;
    font-weight: 700;
}

.service-chip-price {
    border-color: rgba(31, 198, 215, 0.4);
    background: rgba(31, 198, 215, 0.1);
    color: #0d5f73;
}

.service-chip-state {
    border-color: rgba(46, 177, 117, 0.34);
    background: rgba(70, 190, 126, 0.14);
    color: #216142;
}

.service-chip-state.is-inactive {
    border-color: rgba(188, 74, 74, 0.34);
    background: rgba(188, 74, 74, 0.11);
    color: #7d3333;
}

.service-admin-actions {
    display: grid;
    gap: 0.46rem;
    align-content: start;
    min-width: 132px;
}

.service-admin-actions form {
    margin: 0;
}

.service-admin-actions .btn,
.service-admin-actions button {
    width: 100%;
}

.services-editor-layout {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
}

.services-editor-side {
    position: sticky;
    top: 5.4rem;
    padding: 0;
    overflow: hidden;
}

.services-editor-nav {
    display: grid;
    gap: 0.32rem;
    padding: 1rem;
    background: #ffffff;
}

.services-editor-nav a {
    min-height: 44px;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    color: #202c3f;
    font-size: 0.98rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.services-editor-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6ef;
}

.services-editor-nav a.is-active {
    background: #efedf9;
    border-color: #ddd8f7;
}

.services-editor-nav a strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dce4;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #70798b;
    font-size: 0.78rem;
}

.services-editor-nav-divider {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid #dfe5ee;
}

.services-editor-nav-group {
    margin: 0.2rem 0 0.1rem;
    color: #141f31;
    font-size: 1rem;
    font-weight: 800;
}

.services-editor-main {
    min-width: 0;
}

.services-editor-form {
    display: grid;
    gap: 1rem;
}

.services-editor-section {
    padding: 0;
    overflow: hidden;
    scroll-margin-top: 6rem;
}

.services-editor-layout.is-tabbed .services-editor-section[hidden] {
    display: none !important;
}

.services-editor-layout.is-tabbed .services-editor-section:not(.is-active) {
    display: none !important;
}

.services-editor-layout.is-tabbed .services-editor-section.is-active {
    display: block;
}

.services-editor-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #dfe5ee;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.97) 0%, rgba(239, 245, 252, 0.92) 100%);
}

.services-editor-section-head h2 {
    margin: 0;
    font-size: 1.24rem;
    color: #111b2b;
}

.services-editor-section-head p {
    margin: 0.26rem 0 0;
    color: #62758e;
    line-height: 1.5;
}

.services-editor-section-body {
    padding: 1rem 1.1rem 1.1rem;
}

.services-editor-two-cols,
.services-editor-pricing-grid,
.services-editor-addon-grid,
.services-editor-three-cols {
    display: grid;
    gap: 0.9rem;
}

.services-editor-two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-editor-pricing-grid,
.services-editor-addon-grid,
.services-editor-three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-editor-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.35rem;
}

.services-editor-field-head span,
.services-editor-counter-field span[data-char-counter] {
    color: #758092;
    font-weight: 700;
}

.services-editor-hint {
    display: block;
    margin-top: 0.35rem;
    color: #6a778a;
    font-size: 0.82rem;
    line-height: 1.4;
}

.services-editor-textarea-shell {
    position: relative;
}

.services-editor-textarea-shell textarea {
    min-height: 170px;
    padding-bottom: 4.6rem;
}

.services-editor-ai-bar {
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.services-editor-price-input {
    min-height: 46px;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.9rem;
}

.services-editor-price-input span {
    color: #5d728b;
    font-weight: 800;
}

.services-editor-price-input input {
    border: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
    background: transparent;
}

.services-editor-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.services-editor-pill-btn {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #18253a;
    padding: 0.6rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.services-editor-pill-btn--green {
    border-color: #1ca66f;
    background: linear-gradient(180deg, #2dc78b 0%, #1ca66f 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(28, 166, 111, 0.18);
}

.services-editor-pill-btn--green:hover {
    border-color: #178a5d;
    background: linear-gradient(180deg, #27b77d 0%, #178a5d 100%);
    color: #ffffff;
}

.services-editor-pill-btn--green [data-icon]::before {
    color: inherit;
}

.services-editor-pill-btn [data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.services-editor-extra-time {
    margin-top: 0.9rem;
}

.services-editor-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.services-editor-team-card {
    border: 1px solid #d6e1ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

.services-editor-team-card input {
    display: none;
}

.services-editor-team-card.is-selected {
    border-color: rgba(94, 106, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2ac8dd 0%, #168fbe 100%);
    color: #fff;
    font-weight: 800;
}

.services-editor-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-editor-team-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.services-editor-team-copy strong {
    color: #15283f;
}

.services-editor-team-copy small {
    color: #68788d;
}

.services-editor-resource-intro {
    border: 1px solid #d9e3f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
    padding: 1rem 1.05rem;
    margin-bottom: 0.9rem;
}

.services-editor-resource-intro strong {
    display: block;
    color: #17304d;
    margin-bottom: 0.3rem;
}

.services-editor-resource-intro p {
    margin: 0;
    color: #61748a;
    line-height: 1.55;
}

.services-editor-resource-list {
    display: grid;
    gap: 0.8rem;
}

.services-editor-resource-item {
    border: 1px solid #d6e1ef;
    border-radius: 16px;
    background: #fbfdff;
    padding: 0.9rem;
}

.services-editor-resource-grid,
.services-editor-addon-list {
    display: grid;
    gap: 0.8rem;
}

.services-editor-resource-grid {
    grid-template-columns: 1fr 1.4fr 120px;
}

.services-editor-addon-item {
    border: 1px solid #d6e1ef;
    border-radius: 14px;
    background: #fbfdff;
    padding: 0.9rem;
}

.services-editor-addon-remove {
    margin-top: 0.7rem;
    border: 0;
    background: transparent;
    color: #8d3f48;
    font-weight: 700;
    padding: 0;
}

.services-editor-resource-remove {
    margin-top: 0.7rem;
    border: 0;
    background: transparent;
    color: #8d3f48;
    font-weight: 700;
    padding: 0;
}

.services-editor-forms-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr) 48px;
    gap: 1rem;
    padding: 0 0.15rem 0.85rem;
    border-bottom: 1px solid #e4eaf1;
    color: #22344a;
    font-weight: 700;
}

.services-editor-form-list {
    display: grid;
}

.services-editor-form-item {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr) 48px;
    gap: 1rem;
    align-items: center;
    padding: 1.05rem 0.15rem;
    border-bottom: 1px solid #edf2f7;
}

.services-editor-form-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.services-editor-form-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid #d9e2ec;
    background: #fff;
    display: grid;
    place-items: center;
    color: #1d3047;
    flex-shrink: 0;
}

.services-editor-form-icon .material-symbols-outlined {
    font-size: 1.6rem;
}

.services-editor-form-copy {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.services-editor-form-title-input {
    border: 0;
    padding: 0;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #14283f;
    font-size: 1.03rem;
    font-weight: 700;
    box-shadow: none;
}

.services-editor-form-title-input:focus {
    outline: none;
    box-shadow: none;
}

.services-editor-form-status {
    color: #2f8d5a;
    font-weight: 700;
}

.services-editor-form-status.is-inactive {
    color: #b86a19;
}

.services-editor-form-policy select {
    min-height: 46px;
}

.services-editor-form-actions {
    position: relative;
}

.services-editor-form-actions summary {
    list-style: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #1e3148;
}

.services-editor-form-actions summary::-webkit-details-marker {
    display: none;
}

.services-editor-form-actions[open] summary,
.services-editor-form-actions summary:hover {
    background: #f2f5fa;
}

.services-editor-form-actions-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 220px;
    border-radius: 16px;
    border: 1px solid #d9e2ec;
    background: #fff;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
    padding: 0.45rem;
    display: grid;
    gap: 0.2rem;
    z-index: 25;
}

.services-editor-form-actions-menu button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    color: #18304a;
    font-weight: 600;
}

.services-editor-form-actions-menu button:hover {
    background: #f3f6fa;
}

.services-editor-day-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.services-editor-day-pill {
    min-height: 38px;
    border: 1px solid #d6e0ee;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    background: #fff;
    color: #213147;
    font-weight: 700;
}

.services-editor-day-pill input {
    display: none;
}

.services-editor-day-pill.is-selected,
.services-editor-day-pill:has(input:checked) {
    border-color: #c8c6f4;
    background: #efedf9;
}

.services-editor-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 0.4rem;
}

.services-editor-top {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 1.35rem 1.5rem;
    background:
        radial-gradient(circle at top right, rgba(91, 192, 235, 0.18), transparent 26%),
        linear-gradient(135deg, #fbfcfe 0%, #f2f6fb 100%);
    border: 1px solid #dde6f1;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.services-editor-top .clients-pro-title-edit {
    font-size: clamp(2rem, 3.5vw, 2.85rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.services-editor-top .clients-pro-title-edit small {
    margin-top: 0.75rem;
    color: #61748c;
    font-size: 1rem;
    letter-spacing: 0;
}

.services-editor-top p {
    max-width: 68ch;
    color: #607287;
    font-size: 1rem;
    line-height: 1.65;
}

.services-editor-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
}

.services-editor-side {
    position: sticky;
    top: 5.1rem;
    padding: 1.15rem;
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background:
        radial-gradient(circle at top, rgba(68, 207, 255, 0.2), transparent 30%),
        linear-gradient(180deg, #0f1728 0%, #13203a 48%, #101827 100%);
    box-shadow: 0 28px 55px rgba(15, 23, 42, 0.18);
}

.services-editor-side-head {
    padding: 0.25rem 0.2rem 1rem;
    display: grid;
    gap: 0.42rem;
}

.services-editor-side-head span {
    color: #7dd3fc;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 800;
}

.services-editor-side-head strong {
    color: #f8fbff;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.services-editor-side-head p {
    margin: 0;
    color: rgba(221, 230, 242, 0.78);
    line-height: 1.55;
    font-size: 0.92rem;
}

.services-editor-nav {
    counter-reset: editor-step;
    display: grid;
    gap: 0.42rem;
    padding: 0.4rem 0 0;
    background: transparent;
}

.services-editor-nav a {
    position: relative;
    min-height: 56px;
    border-radius: 18px;
    padding: 0.92rem 1rem 0.92rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    color: rgba(237, 243, 250, 0.88);
    font-size: 0.98rem;
    font-weight: 700;
    border: 1px solid rgba(164, 179, 205, 0.18);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.services-editor-nav a::before {
    counter-increment: editor-step;
    content: counter(editor-step, decimal-leading-zero);
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    color: #8dd3ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.services-editor-nav a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(171, 189, 214, 0.3);
}

.services-editor-nav a.is-active {
    background: linear-gradient(135deg, #f9fbff 0%, #ecf4ff 100%);
    border-color: rgba(141, 180, 255, 0.44);
    color: #16283d;
    box-shadow: 0 16px 28px rgba(7, 15, 31, 0.18);
}

.services-editor-nav a.is-active::before {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: #fff;
}

.services-editor-nav a strong {
    min-width: 26px;
    height: 26px;
    padding: 0 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(164, 179, 205, 0.35);
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
}

.services-editor-nav a.is-active strong {
    border-color: #d2dff0;
    background: #fff;
    color: #5b6d82;
}

.services-editor-nav-divider {
    margin: 0.7rem 0 0.35rem;
    border: 0;
    border-top: 1px solid rgba(169, 181, 199, 0.16);
}

.services-editor-nav-group {
    margin: 0.15rem 0 0.2rem;
    color: rgba(212, 225, 242, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.73rem;
    font-weight: 800;
}

.services-editor-main {
    min-width: 0;
    display: grid;
    gap: 1rem;
}

.services-editor-form {
    display: grid;
    gap: 1.15rem;
}

.services-editor-overview {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(74, 222, 255, 0.2), transparent 30%),
        linear-gradient(135deg, #11213d 0%, #173257 54%, #123456 100%);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
}

.services-editor-overview-copy {
    display: grid;
    gap: 0.35rem;
}

.services-editor-overline {
    color: #8dd3ff;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.73rem;
    font-weight: 800;
}

.services-editor-overview h2 {
    margin: 0;
    color: #f6f9fd;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    letter-spacing: -0.04em;
}

.services-editor-overview p {
    margin: 0;
    color: rgba(224, 233, 244, 0.82);
    max-width: 58ch;
    line-height: 1.6;
}

.services-editor-overview-meta {
    min-width: 170px;
    display: grid;
    gap: 0.7rem;
    justify-items: end;
}

.services-editor-overview-meta strong {
    color: #f8fbff;
    font-size: 0.98rem;
}

.services-editor-overview-track {
    width: min(220px, 100%);
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.services-editor-overview-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #67e8f9 0%, #60a5fa 100%);
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.45);
}

.services-editor-section {
    padding: 0;
    overflow: hidden;
    scroll-margin-top: 6rem;
    border-radius: 28px;
    border: 1px solid #dbe5f0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.services-editor-layout.is-tabbed .services-editor-section.is-active {
    display: block;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.09);
}

.services-editor-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.35rem 1.1rem;
    border-bottom: 1px solid #e5ebf3;
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(241, 246, 252, 0.94) 100%);
}

.services-editor-section-head h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #122235;
    letter-spacing: -0.035em;
}

.services-editor-section-head p {
    margin: 0.34rem 0 0;
    color: #607287;
    line-height: 1.62;
    max-width: 62ch;
}

.services-editor-section-head p a {
    color: #2563eb;
    font-weight: 700;
}

.services-editor-section-body {
    padding: 1.3rem 1.35rem 1.4rem;
}

.services-editor-form .form-group > label,
.services-editor-form .services-editor-counter-field label,
.services-editor-form .services-editor-field-head label {
    display: block;
    margin-bottom: 0.45rem;
    color: #213449;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']),
.services-editor-form select,
.services-editor-form textarea {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid #d3deeb;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #112338;
    padding: 0.9rem 1rem;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.services-editor-form textarea {
    min-height: 132px;
    resize: vertical;
}

.services-editor-form input[type='file'] {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    border: 1px dashed #b8c8da;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #213449;
    padding: 0.8rem 0.95rem;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']):focus,
.services-editor-form select:focus,
.services-editor-form textarea:focus,
.services-editor-form input[type='file']:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
    background: #ffffff;
}

.services-editor-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.services-editor-field-head span,
.services-editor-counter-field span[data-char-counter] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: #eef4fb;
    color: #5f738c;
    font-weight: 800;
    font-size: 0.8rem;
}

.services-editor-hint {
    display: block;
    margin-top: 0.48rem;
    color: #6b7b8f;
    font-size: 0.84rem;
    line-height: 1.5;
}

.services-editor-textarea-shell textarea {
    min-height: 190px;
    padding-bottom: 4.9rem;
}

.services-editor-ai-bar {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-editor-price-input {
    min-height: 54px;
    border: 1px solid #d3deeb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 1rem;
}

.services-editor-price-input span {
    color: #536881;
    font-weight: 800;
}

.services-editor-price-input input {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    background: transparent !important;
}

.services-editor-pill-btn {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #cfdbeb;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    color: #18304b;
    padding: 0.62rem 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(148, 163, 184, 0.12);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.services-editor-pill-btn:hover {
    transform: translateY(-1px);
    border-color: #adc5e5;
    box-shadow: 0 14px 24px rgba(148, 163, 184, 0.16);
}

.services-editor-extra-time {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid #e1e8f2;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
}

.services-editor-team-card,
.services-editor-resource-item,
.services-editor-addon-item {
    border-radius: 18px;
    border: 1px solid #d7e2ef;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.services-editor-team-card:hover,
.services-editor-resource-item:hover,
.services-editor-addon-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}

.services-editor-team-card {
    padding: 0.95rem;
}

.services-editor-team-card.is-selected {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12), 0 18px 34px rgba(15, 23, 42, 0.07);
}

.services-editor-team-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.services-editor-resource-intro {
    border: 1px solid #d6e2f0;
    border-radius: 20px;
    background: linear-gradient(135deg, #f7fbff 0%, #edf5ff 100%);
    padding: 1.05rem 1.1rem;
    margin-bottom: 1rem;
}

.services-editor-addon-remove,
.services-editor-resource-remove {
    margin-top: 0.9rem;
    border: 0;
    background: transparent;
    color: #9a4c57;
    font-weight: 800;
    padding: 0;
}

.services-editor-forms-head {
    padding: 0 0.2rem 0.95rem;
    border-bottom: 1px solid #e5ebf3;
    color: #34495f;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.services-editor-form-item {
    padding: 1.15rem 0.2rem;
}

.services-editor-form-icon {
    border-radius: 16px;
    border: 1px solid #d7e1ec;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.services-editor-form-title-input {
    color: #13263d;
    font-size: 1.05rem;
    font-weight: 800;
}

.services-editor-form-status {
    color: #2f8d5a;
    font-size: 0.85rem;
    font-weight: 800;
}

.services-editor-form-policy select {
    min-height: 50px;
}

.services-editor-form-actions summary {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.services-editor-form-actions[open] summary,
.services-editor-form-actions summary:hover {
    background: #edf3fa;
}

.services-editor-day-pill {
    min-height: 42px;
    border: 1px solid #d4dfec;
    padding: 0.52rem 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #1c3149;
    font-weight: 800;
}

.services-editor-day-pill.is-selected,
.services-editor-day-pill:has(input:checked) {
    border-color: rgba(59, 130, 246, 0.35);
    background: linear-gradient(180deg, #eef5ff 0%, #e8f1ff 100%);
    color: #0f3b74;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.services-editor-footer {
    position: sticky;
    bottom: 0.85rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.1rem;
    border-radius: 22px;
    border: 1px solid rgba(214, 224, 235, 0.9);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.services-editor-footer .btn,
.services-editor-footer button[type='submit'] {
    min-height: 48px;
    border-radius: 16px;
    padding-inline: 1.2rem;
    font-weight: 800;
}

@media (max-width: 1320px) {
    .services-editor-layout {
        grid-template-columns: 1fr;
    }

    .services-editor-side {
        position: static;
    }

    .services-editor-overview {
        align-items: start;
    }
}

@media (max-width: 980px) {
    .services-editor-top {
        padding: 1.1rem 1.15rem;
    }

    .services-editor-side {
        padding: 1rem;
    }

    .services-editor-overview {
        flex-direction: column;
        align-items: stretch;
    }

    .services-editor-overview-meta {
        justify-items: stretch;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .services-editor-top .clients-pro-actions,
    .services-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .services-editor-top .clients-pro-actions .btn,
    .services-editor-footer .btn,
    .services-editor-footer button[type='submit'] {
        width: 100%;
    }
}

/* Compact restore for services editor */
.services-editor-top {
    position: static;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0.12rem 0 0.72rem;
}

.services-editor-top .clients-pro-title-edit {
    font-size: clamp(1.22rem, 1.5vw, 1.55rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.services-editor-top .clients-pro-title-edit small {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.84rem;
}

.services-editor-top p {
    max-width: 64ch;
    margin-top: 0.18rem;
    color: #6c7280;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
}

.services-editor-layout {
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 1.15rem;
}

.services-editor-side {
    position: sticky;
    top: 5.4rem;
    padding: 0;
    overflow: visible;
    align-self: start;
    border: 1px solid #dfe6ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: none;
}

.services-editor-side-head,
.services-editor-overview {
    display: none !important;
}

.services-editor-nav {
    counter-reset: none;
    gap: 0.32rem;
    padding: 1rem;
    background: #ffffff;
    max-height: calc(100dvh - 6.75rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.services-editor-nav a,
.services-editor-nav button[data-service-editor-nav-link] {
    min-height: 44px;
    border-radius: 12px;
    padding: 0.72rem 0.9rem;
    color: #202c3f;
    font-size: 0.92rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.services-editor-nav a::before,
.services-editor-nav button[data-service-editor-nav-link]::before {
    display: none;
}

.services-editor-nav a:hover,
.services-editor-nav button[data-service-editor-nav-link]:hover {
    background: #f4f6fb;
    border-color: #e0e6ef;
    transform: none;
}

.services-editor-nav a.is-active,
.services-editor-nav button[data-service-editor-nav-link].is-active {
    background: #efedf9;
    border-color: #ddd8f7;
    color: #202c3f;
    box-shadow: none;
}

.services-editor-nav a.has-error,
.services-editor-nav button[data-service-editor-nav-link].has-error {
    position: relative;
    border-color: rgba(225, 29, 72, 0.18);
}

.services-editor-nav a.has-error::after,
.services-editor-nav button[data-service-editor-nav-link].has-error::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.85rem;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
    transform: translateY(-50%);
}

.services-editor-nav a strong,
.services-editor-nav button[data-service-editor-nav-link] strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dce4;
    background: #fff;
    color: #70798b;
    font-size: 0.76rem;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 6px;
}

.services-editor-nav-divider {
    margin: 0.5rem 0;
    border-top: 1px solid #dfe5ee;
}

.services-editor-nav-group {
    margin: 0.2rem 0 0.1rem;
    color: #141f31;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.98rem;
    font-weight: 800;
}

.services-editor-main {
    gap: 0;
}

.services-editor-form {
    gap: 1rem;
}

.services-editor-section {
    border-radius: 22px;
    border: 1px solid #dbe3ed;
    background: #fff;
    box-shadow: none;
}

.services-editor-layout.is-tabbed .services-editor-section.is-active {
    box-shadow: none;
}

.services-editor-layout.is-tabbed .services-editor-section:not(.is-active) {
    display: none !important;
}

.services-editor-nav a[hidden],
.services-editor-nav button[data-service-editor-nav-link][hidden] {
    display: none !important;
}

.services-editor-section-head {
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #dfe5ee;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.97) 0%, rgba(239, 245, 252, 0.92) 100%);
}

.services-editor-section-head h2 {
    font-size: 1.2rem;
    color: #111b2b;
}

.services-editor-section-head p {
    margin: 0.26rem 0 0;
    color: #62758e;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: none;
}

.services-editor-section-head p a {
    color: #4f46e5;
}

.services-editor-section-body {
    padding: 1rem 1.1rem 1.1rem;
}

.services-editor-form .form-group > label,
.services-editor-form .services-editor-counter-field label,
.services-editor-form .services-editor-field-head label {
    margin-bottom: 0.12rem;
    color: #223247;
    font-weight: 700;
    font-size: 0.94rem;
    text-transform: none;
    letter-spacing: 0;
}

.services-editor-form .form-group {
    margin-bottom: 0.18rem;
}

.services-editor-form .form-group.is-invalid > label,
.services-editor-form .services-editor-counter-field.is-invalid .services-editor-field-head label {
    color: #b42318;
}

.services-editor-two-cols,
.services-editor-pricing-grid,
.services-editor-addon-grid,
.services-editor-three-cols {
    gap: 1.05rem;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']),
.services-editor-form select,
.services-editor-form textarea {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #112338;
    font-size: 0.94rem;
    padding: 0.78rem 0.9rem;
    box-shadow: none;
}

.services-editor-form textarea {
    min-height: 120px;
}

.services-editor-form input[type='file'] {
    min-height: 46px;
    border-radius: 12px;
    border: 1px dashed #cfd8e7;
    background: #fff;
    font-size: 0.9rem;
    padding: 0.72rem 0.85rem;
}

.services-editor-form input:not([type='checkbox']):not([type='hidden']):not([type='file']):focus,
.services-editor-form select:focus,
.services-editor-form textarea:focus,
.services-editor-form input[type='file']:focus {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-field-head {
    gap: 0.7rem;
    margin-bottom: 0.12rem;
}

.services-editor-section-body > .mt-1,
.services-editor-section-body .form-group.mt-1 {
    margin-top: 0.82rem;
}

#service-basic .services-editor-two-cols.mt-1 {
    margin-top: 1.18rem;
}

#service-basic .services-editor-counter-field.mt-1 {
    margin-top: 1.18rem;
}

.services-editor-subsection {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e1e7f0;
}

.services-editor-subsection-head {
    margin-bottom: 1rem;
}

.services-editor-subsection-head h2 {
    margin: 0;
    color: #111b2b;
    font-size: 1.2rem;
    font-weight: 800;
}

.services-editor-subsection-head p {
    margin: 0.25rem 0 0;
    color: #62758e;
    font-size: 0.9rem;
    line-height: 1.45;
}

.services-editor-field-head span,
.services-editor-counter-field span[data-char-counter] {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #758092;
    font-weight: 700;
    font-size: 0.82rem;
}

.services-editor-hint {
    margin-top: 0.45rem;
    color: #6a778a;
    font-size: 0.8rem;
    line-height: 1.4;
}

.services-editor-field-error {
    display: block;
    margin-top: 0.32rem;
    color: #e11d48;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
}

.services-editor-form .form-group.is-invalid input:not([type='checkbox']):not([type='hidden']):not([type='file']),
.services-editor-form .form-group.is-invalid select,
.services-editor-form .form-group.is-invalid textarea,
.services-editor-price-input.is-invalid {
    border-color: #f04438;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.09);
}

.services-editor-textarea-shell textarea {
    min-height: 170px;
    padding-bottom: 4.6rem;
}

.services-editor-ai-bar {
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.85rem;
    gap: 0.7rem;
}

.services-editor-price-input {
    min-height: 46px;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    gap: 0.7rem;
    padding: 0 0.9rem;
}

.services-editor-price-input span {
    color: #5d728b;
    font-size: 0.92rem;
    font-weight: 800;
}

.services-editor-pill-btn {
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid #cfd8e7;
    background: #ffffff;
    color: #18253a;
    padding: 0.58rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

.services-editor-pill-btn:hover {
    transform: none;
    border-color: #cfd8e7;
    box-shadow: none;
}

.services-editor-extra-time {
    margin-top: 0.9rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.services-editor-center-shell {
    display: grid;
    gap: 1rem;
    max-width: none;
}

.services-editor-center-shell.is-invalid .services-editor-center-all,
.services-editor-center-shell.is-invalid .services-editor-center-card {
    box-shadow: inset 0 0 0 1px rgba(240, 68, 56, 0.48);
}

.services-editor-center-all,
.services-editor-center-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 52px minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid #d6e1ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.services-editor-center-all {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
}

.services-editor-center-card {
    grid-template-columns: auto 52px minmax(0, 1fr);
}

.services-editor-center-all input,
.services-editor-center-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-editor-center-check {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #cdd7e4;
    background: #fff;
    color: #6d5ef6;
    display: grid;
    place-items: center;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.services-editor-center-check::before {
    content: "check";
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 650, 'GRAD' 0, 'opsz' 20;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 160ms ease, transform 160ms ease;
}

.services-editor-center-all.is-selected .services-editor-center-check,
.services-editor-center-card.is-selected .services-editor-center-check,
.services-editor-center-all.is-partial .services-editor-center-check {
    border-color: rgba(109, 94, 246, 0.65);
    background: #fff;
    color: #6d5ef6;
    box-shadow: none;
}

.services-editor-center-all.is-partial .services-editor-center-check {
    background: #fff;
}

.services-editor-center-all.is-selected .services-editor-center-check::before,
.services-editor-center-card.is-selected .services-editor-center-check::before,
.services-editor-center-all.is-partial .services-editor-center-check::before {
    opacity: 1;
    transform: scale(1);
}

.services-editor-center-all.is-selected,
.services-editor-center-card.is-selected {
    border-color: rgba(94, 106, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-center-all.is-selected,
.services-editor-center-all.is-partial {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

.services-editor-center-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f1efff 0%, #ece8ff 100%);
    color: #6d5ef6;
}

.services-editor-center-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-editor-center-avatar [data-icon] {
    font-size: 1.35rem;
}

.services-editor-center-copy {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
    justify-content: start;
}

.services-editor-center-copy strong {
    color: #142033;
    font-size: 0.95rem;
    font-weight: 700;
}

.services-editor-center-copy small {
    color: #65758b;
    font-size: 0.8rem;
    line-height: 1.34;
}

.services-editor-center-fields {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.6rem;
    padding: 0 0 0.1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 200ms ease, opacity 200ms ease, padding 200ms ease;
}

.services-editor-center-card.is-selected .services-editor-center-fields,
.services-editor-center-all.is-selected .services-editor-center-fields {
    max-height: 80px;
    opacity: 1;
    padding: 0.4rem 0 0.1rem;
}

.services-editor-center-field {
    flex: 1;
    display: grid;
    gap: 0.2rem;
}

.services-editor-center-field small {
    color: #65758b;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.services-editor-center-field input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(20, 32, 51, 0.12);
    border-radius: 6px;
    font-size: 0.82rem;
    background: #fff;
    color: #142033;
    outline: none;
    transition: border-color 160ms ease;
}

.services-editor-center-card.is-selected .services-editor-center-fields input,
.services-editor-center-all.is-selected .services-editor-center-fields input {
    border-color: rgba(20, 32, 51, 0.08);
}

.services-editor-center-field input:focus {
    border-color: rgba(94, 106, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(120, 113, 255, 0.08);
}

.services-editor-center-field input::placeholder {
    color: #9fb0c4;
    font-size: 0.78rem;
}

.services-editor-center-all-main {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    justify-content: flex-start;
}

.services-editor-center-all-main strong {
    color: #111b2b;
    font-size: 0.95rem;
    font-weight: 700;
}

.services-editor-center-total {
    min-width: 22px;
    height: 22px;
    padding: 0 0.28rem;
    border-radius: 999px;
    border: 1px solid #d8dce4;
    background: #fff;
    color: #70798b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    width: auto !important;
    max-width: 28px;
    justify-self: start;
    flex: 0 0 auto;
}

.services-editor-center-grid {
    display: grid;
    gap: 0.8rem;
}

.services-editor-center-all:hover,
.services-editor-center-card:hover {
    opacity: 0.92;
}

.services-editor-section-centers .services-editor-center-all,
.services-editor-section-centers .services-editor-center-card {
    max-width: none;
}

.services-editor-team-grid {
    gap: 0.8rem;
}

.services-editor-team-card,
.services-editor-resource-item,
.services-editor-addon-item {
    border-radius: 14px;
    border: 1px solid #d6e1ef;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: none;
    transform: none;
}

.services-editor-team-card:hover,
.services-editor-resource-item:hover,
.services-editor-addon-item:hover {
    transform: none;
    box-shadow: none;
}

.services-editor-team-card {
    padding: 0.85rem;
}

.services-editor-team-card.is-selected {
    border-color: rgba(94, 106, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.services-editor-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.services-editor-team-copy strong {
    font-size: 0.95rem;
}

.services-editor-team-copy small {
    font-size: 0.84rem;
}

.services-resource-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.1rem;
}

.services-resource-search-shell {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: min(320px, 100%);
    min-height: 44px;
    padding: 0 1rem 0 0.85rem;
    border: 1px solid #d3dbe7;
    border-radius: 999px;
    background: #ffffff;
    cursor: text;
}

.services-resource-search-shell:focus-within {
    border-color: #b8c5d8;
    background: #fafcff;
}

.services-resource-search-shell input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: #172436;
    font: inherit;
    text-align: left;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.services-editor-form .services-resource-search-shell input[type='search'],
.services-editor-form .services-resource-search-shell input {
    min-height: 42px;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.services-editor-form .services-resource-search-shell input[type='search']:focus,
.services-editor-form .services-resource-search-shell input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.services-resource-search-shell input::-webkit-search-cancel-button,
.services-resource-search-shell input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.services-resource-search-shell span[data-icon] {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: #55667c;
    pointer-events: none;
}

.services-resource-search-shell span[data-icon]::before,
.services-resource-pill-icon span[data-icon]::before,
.services-resource-actions summary [data-icon]::before,
.services-resource-action span[data-icon]::before,
.services-resource-type-icon span[data-icon]::before,
.services-resource-specific-check[data-icon]::before,
.services-resource-specific-icon span[data-icon]::before,
.services-resource-center-avatar span[data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.15rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
}

.services-resource-center-list {
    display: grid;
    gap: 1rem;
    overflow: visible;
}

.services-resource-center-row {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem 0 1rem;
    border-bottom: 1px solid #e4eaf2;
    overflow: visible;
}

.services-resource-center-row:last-child {
    border-bottom: 0;
}

.services-resource-center-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.services-resource-center-ident {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.services-resource-center-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f1efff 0%, #ece8ff 100%);
    color: #6d5ef6;
}

.services-resource-center-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-resource-center-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.services-resource-center-copy strong {
    color: #152335;
    font-size: 0.98rem;
    font-weight: 800;
}

.services-resource-center-copy small {
    color: #6e7a8b;
    font-size: 0.88rem;
    line-height: 1.4;
}

.services-resource-center-empty {
    margin: -0.15rem 0 0 calc(52px + 0.85rem);
    color: #768296;
    font-size: 0.88rem;
}

.services-resource-pill-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-left: calc(52px + 0.85rem);
}

.services-resource-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    border: 1px solid #d5dde7;
    border-radius: 999px;
    background: #ffffff;
    padding: 0.4rem 0.8rem;
    color: #1b2a3d;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.services-resource-pill:hover {
    border-color: #bfcbd9;
    background: #f8fbff;
}

.services-resource-pill-icon {
    color: #8b6b17;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services-resource-actions {
    position: relative;
    flex: 0 0 auto;
    z-index: 1;
}

.services-resource-actions[open] {
    z-index: 30;
}

.services-resource-actions summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid #d3dbe7;
    border-radius: 999px;
    background: #ffffff;
    color: #172436;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.services-resource-actions summary::-webkit-details-marker {
    display: none;
}

.services-resource-actions summary:hover,
.services-resource-actions[open] summary {
    border-color: #c7d0dc;
    background: #fafcff;
}

.services-resource-actions-chevron {
    color: #5f6f84;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services-resource-actions[open] .services-resource-actions-chevron {
    transform: rotate(180deg);
}

.services-resource-actions-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    left: auto;
    bottom: auto;
    z-index: 20;
    width: max-content;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 1.5rem));
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem;
    border: 1px solid #d8dfeb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(18, 28, 43, 0.14);
    text-align: left;
}

#service-resources {
    overflow: visible;
}

#service-resources .services-editor-section-body {
    overflow: visible;
}

#service-resources .services-resource-center-row:last-child .services-resource-actions-menu {
    top: auto;
    bottom: calc(100% + 0.65rem);
    right: 0;
    left: auto;
}

.services-resource-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    padding: 0.7rem 0.8rem;
    color: #162437;
    font: inherit;
    font-size: 0.93rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.services-resource-action span[data-icon] {
    flex: 0 0 auto;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.services-resource-action > span:last-child {
    flex: 1 1 auto;
    text-align: left;
    line-height: 1.3;
    white-space: normal;
}

.services-resource-action:hover {
    background: #f4f6fb;
}

.services-resource-action.is-danger {
    color: #d93a58;
}

.services-resource-action.is-danger:hover {
    background: #fff3f5;
}

.services-resource-action.is-disabled,
.services-resource-action:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.services-resource-empty-state {
    margin: 0;
    color: #6e7a8b;
    font-size: 0.92rem;
}

.services-resource-empty-state.is-inline {
    display: grid;
    place-items: center;
    min-height: 120px;
    border: 1px dashed #d6dfea;
    border-radius: 18px;
    background: #fbfcff;
}

.services-resource-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(4px);
}

.services-resource-modal-backdrop[hidden] {
    display: none;
}

.services-resource-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.5rem;
}

.services-resource-modal-head h2 {
    margin: 0;
    color: #111924;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.services-resource-modal-head p {
    margin: 0.8rem 0 0;
    color: #687486;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 720px;
}

.services-resource-modal-actions-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.services-resource-modal-actions-top .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.services-resource-modal {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: none;
}

.services-resource-modal .services-resource-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 1.2rem 3rem 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
}

.services-resource-modal .services-resource-modal-head > div:first-child,
.services-resource-modal .services-resource-modal-body {
    width: min(980px, 100%);
    margin: 0 auto;
}

.services-resource-modal .services-resource-modal-head > div:first-child {
    padding-top: 3rem;
}

.services-resource-modal .services-resource-modal-actions-top {
    padding-top: 0.25rem;
}

.services-resource-copy-modal {
    width: min(760px, calc(100% - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(16, 26, 41, 0.18);
}

.services-resource-copy-modal .services-resource-modal-head {
    padding: 2rem 2rem 1rem;
}

.services-resource-modal-body {
    display: grid;
    gap: 1rem;
    padding: 1rem 3rem 2.25rem;
}

.services-resource-modal .services-resource-modal-body .form-group,
.services-resource-modal .services-resource-type-list,
.services-resource-modal .services-resource-choice-list,
.services-resource-modal .services-resource-specific-shell {
    width: min(760px, 100%);
}

.services-resource-type-list {
    display: grid;
    gap: 0.8rem;
}

.services-resource-type-list[hidden] {
    display: none;
}

.services-resource-type-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    width: 100%;
    min-height: 78px;
    border: 1px solid #dbe2ec;
    border-radius: 18px;
    background: #ffffff;
    padding: 0.85rem 0.95rem;
    text-align: left;
    cursor: pointer;
}

.services-resource-type-card:hover {
    border-color: #cdd8e5;
    background: #fbfcff;
}

.services-resource-type-card.is-selected {
    border-color: rgba(109, 94, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(109, 94, 246, 0.1);
}

.services-resource-type-icon,
.services-resource-specific-icon {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--resource-accent, #efe9ff) 18%, #ffffff);
    color: color-mix(in srgb, var(--resource-accent, #6d5ef6) 60%, #513fe1);
}

.services-resource-type-icon {
    width: 54px;
    height: 54px;
}

.services-resource-type-copy,
.services-resource-specific-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.services-resource-type-copy strong,
.services-resource-specific-copy strong {
    color: #152335;
    font-size: 1rem;
    font-weight: 800;
}

.services-resource-type-copy small,
.services-resource-specific-copy small {
    color: #6d7888;
    font-size: 0.9rem;
    line-height: 1.45;
}

.services-resource-type-copy small.is-warning {
    color: #b9631f;
}

.services-resource-choice-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.15rem;
}

.services-resource-choice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    cursor: pointer;
}

.services-resource-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-resource-choice-radio {
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
    border-radius: 999px;
    border: 1.5px solid #d1d8e3;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.services-resource-choice input:checked + .services-resource-choice-radio {
    border-color: #6d5ef6;
    background: radial-gradient(circle at center, #6d5ef6 0 5px, #ffffff 6px 100%);
    box-shadow: 0 0 0 4px rgba(109, 94, 246, 0.1);
}

.services-resource-choice-copy {
    display: grid;
    gap: 0.1rem;
}

.services-resource-choice-copy strong {
    color: #162437;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-resource-choice-copy small {
    color: #6b7789;
    font-size: 0.88rem;
    line-height: 1.35;
}

.services-resource-specific-shell {
    display: grid;
    gap: 0.65rem;
}

.services-resource-specific-list,
.services-resource-copy-list {
    display: grid;
    gap: 0.65rem;
}

.services-resource-specific-card,
.services-resource-copy-item {
    display: grid;
    grid-template-columns: 24px 40px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 60px;
    border: 1px solid #dbe2ec;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.7rem 0.85rem;
    text-align: left;
    cursor: pointer;
}

.services-resource-specific-card:hover,
.services-resource-copy-item:hover {
    border-color: #cdd8e5;
    background: #fbfcff;
}

.services-resource-specific-card.is-selected,
.services-resource-copy-item:has(input:checked) {
    border-color: rgba(109, 94, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(109, 94, 246, 0.1);
}

.services-resource-specific-card[data-service-resource-option-card] {
    cursor: pointer;
}

.services-resource-specific-check {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid #d0d9e6;
    background: #ffffff;
    color: transparent;
    display: grid;
    place-items: center;
}

.services-resource-specific-card.is-selected .services-resource-specific-check,
.services-resource-copy-item:has(input:checked) .services-editor-center-check {
    border-color: #6d5ef6;
    background: #6d5ef6;
    color: #ffffff;
}

.services-resource-specific-check::before {
    opacity: 0;
}

.services-resource-specific-card.is-selected .services-resource-specific-check::before {
    opacity: 1;
}

.services-resource-specific-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.services-resource-copy-item {
    grid-template-columns: 24px 52px minmax(0, 1fr);
}

.services-resource-copy-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-resource-modal-empty {
    margin: 0;
    color: #6e7a8b;
    font-size: 0.92rem;
}

.services-resource-modal .services-resource-modal-empty {
    min-height: 40px;
    display: grid;
    align-items: center;
}

.services-editor-addon-item {
    padding: 0.9rem;
}

.services-editor-addon-remove {
    margin-top: 0.7rem;
    color: #8d3f48;
    font-size: 0.88rem;
    font-weight: 700;
}

@media (max-width: 820px) {
    .services-portfolio-dropzone,
    .services-portfolio-meta {
        flex-direction: column;
        align-items: stretch;
    }

    .services-portfolio-dropzone-btn {
        width: 100%;
    }

    .services-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-online-booking-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .services-online-booking-toggle {
        justify-content: space-between;
    }

    .services-online-booking-fields-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-commissions-hero,
    .services-commissions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .services-commissions-search {
        max-width: none;
    }

    .services-commissions-filter summary {
        width: 100%;
        justify-content: center;
    }

    .services-commissions-head {
        display: none;
    }

    .services-commissions-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .services-commissions-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-settings-advanced-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-settings-tax-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-settings-cost-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-settings-type-toggle {
        width: 100%;
    }

    .services-tax-modal-backdrop {
        padding: 1rem;
    }

    .services-tax-modal {
        width: min(100%, 520px);
        padding: 1.1rem 1rem;
    }

    .services-tax-modal-head {
        gap: 0.8rem;
    }

    .services-tax-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .services-tax-modal-actions .btn {
        width: 100%;
    }

    .services-settings-inline-panel,
    .services-settings-inline-fields {
        margin-left: 0;
    }

    .services-settings-inline-fields,
    .services-settings-cost-row,
    .services-settings-secondary-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .services-settings-advanced-grid {
        max-width: none;
    }

    .services-settings-tax-actions {
        max-width: none;
    }

    .services-resource-center-head {
        flex-direction: column;
        align-items: stretch;
    }

    .services-resource-pill-list {
        margin-left: 0;
    }

    .services-resource-modal-backdrop {
        padding: 0;
    }

    .services-resource-modal-head {
        flex-direction: column;
        align-items: stretch;
    }

    .services-resource-modal-actions-top {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .services-resource-modal .services-resource-modal-head,
    .services-resource-modal .services-resource-modal-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .services-resource-modal .services-resource-modal-head > div:first-child {
        padding-top: 1.25rem;
    }
}

.services-editor-forms-head {
    padding: 0 0.15rem 0.85rem;
    border-bottom: 1px solid #e4eaf1;
    color: #22344a;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.services-editor-form-item {
    padding: 1.05rem 0.15rem;
}

.services-editor-form-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid #d9e2ec;
    background: #fff;
}

.services-editor-form-title-input {
    color: #14283f;
    font-size: 0.98rem;
    font-weight: 700;
}

.services-editor-form-status {
    font-size: 0.83rem;
}

.services-editor-form-policy select {
    min-height: 46px;
}

.services-editor-form-actions summary {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.services-editor-form-actions[open] summary,
.services-editor-form-actions summary:hover {
    background: #f2f5fa;
}

.services-editor-day-pill {
    min-height: 38px;
    border: 1px solid #d6e0ee;
    padding: 0.45rem 0.8rem;
    background: #fff;
    color: #213147;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: none;
}

.services-editor-day-pill.is-selected,
.services-editor-day-pill:has(input:checked) {
    border-color: #c8c6f4;
    background: #efedf9;
    color: #213147;
}

.services-editor-footer {
    position: static;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.services-editor-footer .btn,
.services-editor-footer button[type='submit'] {
    min-height: 44px;
    border-radius: 14px;
    padding-inline: 1rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.services-editor-footer .services-editor-submit-btn {
    border: 1px solid #16a34a;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(34, 197, 94, 0.22);
}

.services-editor-footer .services-editor-submit-btn:hover,
.services-editor-footer .services-editor-submit-btn:focus-visible {
    border-color: #15803d;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(21, 128, 61, 0.28);
}

@media (max-width: 1320px) {
    .services-editor-layout {
        grid-template-columns: 1fr;
    }

    .services-editor-side {
        position: static;
    }
}

@media (max-width: 640px) {
    .services-editor-top .clients-pro-actions,
    .services-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .services-editor-top .clients-pro-actions .btn,
    .services-editor-footer .btn,
    .services-editor-footer button[type='submit'] {
        width: 100%;
    }
}

.services-order-panel,
.services-settings-panel,
.services-settings-side {
    padding: 0;
    overflow: hidden;
}

.services-order-workspace {
    min-height: 100vh;
    background: #ffffff;
}

.services-order-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #edf1f6;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.services-order-topbar-spacer {
    min-width: 1px;
    min-height: 1px;
    flex: 1 1 auto;
}

.services-order-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
}

.services-order-shell {
    width: min(1240px, calc(100% - 4rem));
    margin: 0 auto;
    padding: 2.75rem 0 4rem;
}

.services-order-hero {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.8rem;
}

.services-order-hero h1 {
    margin: 0;
    color: #10151d;
    font-size: clamp(2.35rem, 4vw, 3.5rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.services-order-hero p {
    width: min(720px, 100%);
    margin: 0;
    color: #66707d;
    font-size: 1.04rem;
    line-height: 1.55;
}

.services-order-mode-field {
    width: fit-content;
}

.services-order-mode-field select {
    min-height: 52px;
    min-width: 240px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    background: #ffffff;
    color: #191f27;
    padding: 0 1rem;
    font: inherit;
    font-weight: 700;
}

.services-order-form {
    display: grid;
    gap: 1rem;
}

.services-order-groups {
    display: grid;
    gap: 1rem;
}

.services-order-group {
    margin: 0;
    padding: 1.3rem 1.45rem 1.45rem;
    border: 1px solid #d9e1eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(17, 29, 46, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.services-order-group.is-dragging {
    opacity: 0.6;
    transform: scale(0.995);
}

.services-order-group.is-drop-target {
    border-color: #85d9ff;
    box-shadow: 0 0 0 3px rgba(133, 217, 255, 0.24), 0 18px 44px rgba(17, 29, 46, 0.08);
}

.services-order-group.has-service-drop {
    border-color: #cfe3f3;
}

.services-order-group-head {
    margin-bottom: 0.95rem;
}

.services-order-group-title {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.services-order-group-title h2 {
    margin: 0;
    color: #131a23;
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 800;
}

.services-order-group-title p {
    margin: 0.22rem 0 0;
    color: #6d7581;
    font-size: 0.9rem;
}

.services-order-handle {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #717b88;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: grab;
}

.services-order-handle:active {
    cursor: grabbing;
}

.services-order-handle:hover,
.services-order-handle:focus-visible {
    background: #f4f7fb;
    color: #222c37;
    outline: none;
}

.services-order-handle .material-symbols-outlined {
    font-size: 1.35rem;
}

.services-order-handle.is-service {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 10px;
}

.services-order-group-list {
    display: grid;
    gap: 0.75rem;
    padding-left: 1.4rem;
}

.services-order-group-list.is-drop-target {
    border-radius: 16px;
}

.services-order-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid #d8e0ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(20, 31, 47, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.services-order-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 8px;
    border-radius: 14px 0 0 14px;
    background: #9ad9f5;
}

.services-order-card.is-dragging {
    opacity: 0.58;
    transform: scale(0.992);
}

.services-order-card.is-drop-target {
    border-color: #85d9ff;
    box-shadow: 0 0 0 3px rgba(133, 217, 255, 0.18), 0 10px 24px rgba(20, 31, 47, 0.05);
}

.services-order-card-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.services-order-card-copy {
    min-width: 0;
}

.services-order-card-copy h3 {
    margin: 0;
    color: #131a23;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 700;
}

.services-order-card-copy p {
    margin: 0.22rem 0 0;
    color: #6e7784;
    font-size: 0.88rem;
}

.services-order-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.services-order-empty {
    padding: 2rem;
}

.services-settings-grid {
    align-items: start;
}

.services-settings-form .form-group label {
    color: #304763;
}

.services-settings-select {
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid #cedaec;
    background: #fff;
    color: #22354c;
    padding: 0.7rem 0.95rem;
    font: inherit;
}

.services-settings-select:focus {
    outline: none;
    border-color: rgba(35, 192, 214, 0.7);
    box-shadow: 0 0 0 4px rgba(31, 198, 215, 0.12);
}

.services-settings-hint {
    display: block;
    margin-top: 0.34rem;
    color: #66788f;
    font-size: 0.79rem;
    line-height: 1.4;
}

.services-settings-check {
    display: flex;
    align-items: flex-start;
    gap: 0.62rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid #d5deeb;
    border-radius: 12px;
    background: #f8fbff;
    color: #24374f;
    font-weight: 600;
}

.services-settings-check input {
    margin-top: 0.22rem;
}

.services-online-booking-shell {
    display: grid;
    gap: 1rem;
}

.services-online-booking-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.services-online-booking-hero-copy {
    display: grid;
    gap: 0.4rem;
}

.services-online-booking-hero-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.services-online-booking-hero-label strong {
    color: #122235;
    font-size: 1.04rem;
    font-weight: 800;
}

.services-online-booking-hero-copy p {
    margin: 0;
    color: #62758e;
    line-height: 1.55;
    max-width: 66ch;
}

.services-online-booking-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.65rem;
    border: 1px solid #d9e2ec;
    border-radius: 999px;
    background: #f3f6fa;
    color: #607287;
    font-size: 0.78rem;
    font-weight: 800;
}

.services-online-booking-status.is-active {
    border-color: #bfe6cd;
    background: #ecfbf1;
    color: #2f7a48;
}

.services-online-booking-toggle {
    flex: 0 0 auto;
}

.services-online-booking-content {
    display: grid;
    gap: 0.9rem;
    transition: opacity 0.2s ease;
}

.services-online-booking-content.is-disabled {
    opacity: 0.58;
}

.services-online-booking-card,
.services-online-booking-note {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #ffffff;
}

.services-online-booking-field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.services-online-booking-field > span {
    color: #223247;
    font-size: 0.94rem;
    font-weight: 700;
}

.services-online-booking-field small {
    color: #66788f;
    font-size: 0.82rem;
    line-height: 1.45;
}

.services-online-booking-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    cursor: pointer;
}

.services-online-booking-option input[type="checkbox"] {
    margin: 0.25rem 0 0;
    accent-color: #26c6d6;
}

.services-online-booking-option-copy {
    display: grid;
    gap: 0.12rem;
}

.services-online-booking-option-copy strong {
    color: #15263a;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-online-booking-option-copy small {
    color: #66788f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.services-online-booking-fields {
    display: grid;
    gap: 0.85rem;
}

.services-online-booking-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-online-booking-fields[hidden] {
    display: none;
}

.services-online-booking-note {
    gap: 0.35rem;
    border-style: dashed;
    background: #f8fbff;
}

.services-online-booking-note strong {
    color: #15263a;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-online-booking-note p {
    margin: 0;
    color: #65778e;
    line-height: 1.55;
}

.services-online-booking-note a {
    color: #2563eb;
    font-weight: 700;
}

.services-commissions-shell {
    display: grid;
    gap: 1rem;
}

.services-commissions-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.services-commissions-hero-copy {
    display: grid;
    gap: 0.38rem;
}

.services-commissions-hero-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.services-commissions-hero-label strong {
    color: #122235;
    font-size: 1.04rem;
    font-weight: 800;
}

.services-commissions-hero-copy p {
    margin: 0;
    color: #62758e;
    line-height: 1.55;
    max-width: 68ch;
}

.services-commissions-toggle {
    flex: 0 0 auto;
}

.services-commissions-content {
    display: grid;
    gap: 1rem;
    transition: opacity 0.2s ease;
}

.services-commissions-content.is-disabled {
    opacity: 0.58;
}

.services-commissions-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #f8fbff;
}

.services-commissions-search {
    max-width: 320px;
    flex: 1 1 280px;
}

.services-commissions-filter {
    position: relative;
    flex: 0 0 auto;
}

.services-commissions-filter summary {
    list-style: none;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 1px solid #d5deeb;
    border-radius: 999px;
    background: #ffffff;
    color: #17314a;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-weight: 700;
}

.services-commissions-filter summary::-webkit-details-marker {
    display: none;
}

.services-commissions-filter summary [data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.services-commissions-filter summary [data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
}

.services-commissions-filter-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 180px;
    padding: 0.45rem;
    border: 1px solid #d9e2ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 0.2rem;
    z-index: 16;
}

.services-commissions-filter-menu button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #18304a;
    text-align: left;
    padding: 0.75rem 0.85rem;
    font-weight: 700;
}

.services-commissions-filter-menu button:hover,
.services-commissions-filter-menu button.is-active {
    background: #f3f6fa;
}

.services-commissions-table {
    display: grid;
    gap: 0;
}

.services-commissions-head,
.services-commissions-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.95fr);
    gap: 1rem;
    align-items: center;
}

.services-commissions-head {
    padding: 0 0.15rem 0.85rem;
    border-bottom: 1px solid #e4eaf1;
    color: #22344a;
    font-weight: 700;
}

.services-commissions-list {
    display: grid;
}

.services-commissions-row {
    padding: 1rem 0.15rem;
    border-bottom: 1px solid #edf2f7;
}

.services-commissions-row[hidden] {
    display: none;
}

.services-commissions-member {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.services-commissions-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.services-commissions-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.services-commissions-copy strong {
    color: #14283f;
    font-size: 1rem;
    font-weight: 800;
}

.services-commissions-copy small {
    color: #66788f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.services-commissions-controls {
    display: grid;
    grid-template-columns: minmax(0, 170px) auto;
    gap: 0.55rem;
    align-items: center;
    justify-content: start;
}

.services-commissions-value-shell input {
    min-height: 48px;
}

.services-commissions-type-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.services-commissions-value-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1px solid #cfd6df;
    border-radius: 12px;
    background: #ffffff;
}

.services-commissions-value-shell span {
    color: #586b83;
    font-size: 0.9rem;
    font-weight: 700;
}

.services-commissions-value-shell input {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.services-commissions-value-shell input:focus {
    outline: none;
    box-shadow: none;
}

.services-commissions-type-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, 42px);
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid #d7dfe9;
    border-radius: 12px;
    background: #f3f5f8;
}

.services-commissions-type-btn {
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #172e45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
}

.services-commissions-type-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.services-commissions-type-btn.is-active {
    border-color: #d5dce6;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.services-commissions-type-symbol {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
}

.services-commissions-type-coins {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 16px;
}

.services-commissions-type-coins span {
    position: absolute;
    width: 10px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: #fff6e8;
    box-shadow: inset 0 -1px 0 rgba(255, 214, 153, 0.65);
}

.services-commissions-type-coins span:nth-child(1) {
    left: 0;
    top: 7px;
}

.services-commissions-type-coins span:nth-child(2) {
    left: 5px;
    top: 3px;
}

.services-commissions-type-coins span:nth-child(3) {
    left: 10px;
    top: 7px;
}

.services-commissions-empty-state {
    margin: 0;
    padding: 1rem 0.15rem 0;
    color: #66788f;
    font-size: 0.92rem;
    line-height: 1.55;
}

.services-commissions-note {
    gap: 0.35rem;
}

.services-commissions-note strong {
    color: #15263a;
    font-size: 0.96rem;
    font-weight: 800;
}

.services-commissions-note p {
    margin: 0;
    color: #65778e;
    line-height: 1.55;
}

.services-commissions-note a {
    color: #2563eb;
    font-weight: 700;
}

.services-settings-shell {
    display: grid;
    gap: 1.25rem;
}

.services-settings-group {
    display: grid;
    gap: 0.85rem;
}

.services-settings-group-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.services-settings-checklist {
    display: grid;
    gap: 0.9rem;
}

.services-settings-row {
    padding: 0.1rem 0;
}

.services-settings-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.services-settings-card,
.services-settings-compact-field {
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1.05rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #ffffff;
}

.services-settings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-settings-card-head strong {
    color: #122235;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.45;
}

.services-settings-card-head strong span {
    color: #66788f;
    font-size: 0.84rem;
    font-weight: 600;
}

.services-settings-tax-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.services-settings-tax-pill {
    min-height: 38px;
    padding: 0 0.9rem;
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    background: #ffffff;
    color: #13263a;
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
}

.services-settings-inline-link {
    border: 0;
    background: transparent;
    color: #5b50f4;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: flex-start;
}

.services-settings-inline-link:hover {
    background: transparent;
    color: #4c43d8;
}

.services-settings-tax-editor[hidden] {
    display: none;
}

.services-tax-modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.28);
    z-index: 1320;
}

.services-tax-modal-backdrop[hidden] {
    display: none;
}

.services-tax-modal {
    width: min(520px, 100%);
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem 1.3rem 1.2rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dbe4ef;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

.services-tax-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.services-tax-modal-head h2 {
    margin: 0 0 0.25rem;
    color: #101828;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
}

.services-tax-modal-head p {
    margin: 0;
    color: #66788f;
    font-size: 0.92rem;
    line-height: 1.5;
}

.services-tax-modal-close {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #122235;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: none;
}

.services-tax-modal-close:hover {
    background: #f3f6fa;
}

.services-tax-modal-body {
    display: grid;
    gap: 1rem;
}

.services-tax-modal-row {
    display: grid;
    gap: 0.45rem;
}

.services-tax-modal-row-title {
    color: #122235;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
}

.services-tax-modal-row select {
    min-height: 46px;
    width: 100%;
}

.services-tax-modal-empty {
    margin: 0;
    color: #66788f;
    font-size: 0.92rem;
    line-height: 1.55;
}

.services-tax-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.services-tax-modal-actions .btn {
    min-width: 110px;
}

.services-settings-compact-field > label,
.services-settings-compact-field > span {
    color: #122235;
    font-size: 0.92rem;
    font-weight: 700;
}

.services-settings-compact-field input,
.services-settings-compact-field select {
    min-height: 46px;
}

.services-settings-field-note {
    color: #66788f;
    font-size: 0.8rem;
    line-height: 1.45;
}

.services-settings-cost-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.services-settings-cost-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0 0.9rem;
    border: 1px solid #cfd6df;
    border-radius: 12px;
    background: #ffffff;
}

.services-settings-cost-input span {
    color: #586b83;
    font-size: 0.88rem;
    font-weight: 700;
}

.services-settings-cost-input input {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    min-height: 44px;
}

.services-settings-cost-input input:focus {
    outline: none;
    box-shadow: none;
}

.services-settings-type-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid #d7dfe9;
    border-radius: 12px;
    background: #f3f5f8;
}

.services-settings-type-btn {
    min-width: 48px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #172e45;
    padding: 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: none;
}

.services-settings-type-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.services-settings-type-btn.is-active {
    border-color: #d5dce6;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.services-settings-group textarea {
    min-height: 128px;
}

.services-settings-shell {
    max-width: 860px;
    gap: 1.9rem;
}

.services-settings-group {
    gap: 0.8rem;
}

.services-settings-group-head h3 {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.services-settings-checklist {
    gap: 1rem;
}

.services-settings-row {
    padding: 0;
}

.services-settings-row .appointment-settings-checkbox-copy strong {
    color: #101828;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
}

.services-settings-row .appointment-settings-checkbox-copy small {
    color: #697689;
    font-size: 0.72rem;
    line-height: 1.35;
}

.services-settings-stack {
    display: grid;
    gap: 0.7rem;
}

.services-settings-inline-panel,
.services-settings-inline-fields {
    margin-left: 1.65rem;
}

.services-settings-inline-panel[hidden],
.services-settings-inline-fields[hidden] {
    display: none;
}

.services-settings-inline-panel textarea {
    min-height: 72px;
    padding: 0.8rem 0.9rem;
    border-radius: 4px;
}

.services-settings-inline-fields {
    display: grid;
    grid-template-columns: 96px minmax(0, 300px);
    gap: 0.55rem;
    max-width: 430px;
}

.services-settings-advanced-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.05rem;
    max-width: 460px;
}

.services-settings-card,
.services-settings-compact-field,
.services-settings-field-block {
    display: grid;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.services-settings-card-head {
    gap: 0.45rem;
}

.services-settings-card-head strong {
    font-size: 0.82rem;
    line-height: 1.3;
}

.services-settings-card-head strong span {
    font-size: 0.72rem;
    font-weight: 600;
}

.services-settings-tax-actions {
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    max-width: 360px;
}

.services-settings-tax-pill {
    min-height: 30px;
    padding: 0 0.75rem;
    border: 1px solid #6d5ef7;
    border-radius: 4px;
    color: #15263a;
    font-size: 0.76rem;
    font-weight: 800;
}

.services-settings-inline-link {
    color: #6d5ef7;
    font-size: 0.78rem;
    font-weight: 800;
}

.services-settings-inline-link:hover {
    color: #5948ef;
}

.services-settings-compact-field > label,
.services-settings-compact-field > span,
.services-settings-notes-field > label {
    color: #122235;
    font-size: 0.78rem;
    font-weight: 800;
}

.services-settings-compact-field input,
.services-settings-compact-field select,
.services-settings-notes-field textarea,
.services-settings-inline-panel textarea,
.services-settings-inline-fields input,
.services-settings-inline-fields select {
    min-height: 40px;
}

.services-settings-field-note {
    color: #6e7c90;
    font-size: 0.68rem;
    line-height: 1.35;
}

.services-settings-cost-row {
    grid-template-columns: minmax(0, 190px) auto;
    gap: 0.4rem;
    max-width: 380px;
}

.services-settings-cost-input {
    min-height: 40px;
    padding: 0 0.7rem;
    border-radius: 6px;
}

.services-settings-cost-input span {
    font-size: 0.74rem;
}

.services-settings-cost-input input {
    min-height: 38px;
    font-size: 0.88rem;
}

.services-settings-type-toggle {
    gap: 0.2rem;
    padding: 0.16rem;
    border-radius: 6px;
}

.services-settings-type-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 5px;
    padding: 0 0.45rem;
    font-size: 0.82rem;
}

.services-settings-sku-field {
    max-width: 420px;
}

.services-settings-group-secondary {
    padding-top: 0.1rem;
}

.services-settings-checklist-secondary {
    max-width: 560px;
}

.services-settings-secondary-grid {
    display: grid;
    gap: 1rem;
    max-width: 620px;
}

.services-settings-compact-field-plain {
    gap: 0.38rem;
}

.services-settings-notes-field {
    display: grid;
    gap: 0.38rem;
}

.services-settings-notes-field textarea {
    min-height: 96px;
}

.services-settings-summary {
    display: grid;
    gap: 0.8rem;
}

.services-settings-summary div {
    display: grid;
    gap: 0.22rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid #d6e1ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.services-settings-summary strong {
    color: #15304c;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.services-settings-summary span {
    color: #5b7088;
    line-height: 1.48;
    word-break: break-word;
}

body.has-service-category-modal {
    overflow: hidden;
}

.services-category-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(17, 20, 28, 0.26);
    z-index: 120;
}

.services-category-modal.is-open {
    display: flex;
}

.services-category-dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(14, 18, 28, 0.18);
    position: relative;
}

.services-category-form {
    padding: 2.2rem 2.2rem 1.95rem;
}

.services-category-form h2 {
    margin: 0 0 1.9rem;
    color: #0f1827;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.services-category-modal-close {
    position: absolute;
    top: 1.35rem;
    right: 1.45rem;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #2a2d34;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.services-category-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.services-category-field {
    display: grid;
    gap: 0.48rem;
}

.services-category-field label {
    color: #202228;
    font-size: 0.95rem;
    font-weight: 700;
}

.services-category-field input,
.services-category-field textarea {
    width: 100%;
    border: 1px solid #d2d5dc;
    border-radius: 11px;
    background: #ffffff;
    color: #1f2127;
    font-size: 0.98rem;
    font-weight: 600;
}

.services-category-field input {
    min-height: 56px;
    padding: 0 1rem;
}

.services-category-field input::placeholder,
.services-category-field textarea::placeholder {
    color: #b1b4bc;
}

.services-category-field input:focus,
.services-category-field textarea:focus {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.services-category-field-wide {
    margin-top: 1rem;
}

.services-category-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.48rem;
}

.services-category-counter {
    color: #787c85;
    font-size: 0.82rem;
    font-weight: 700;
}

.services-category-field textarea {
    min-height: 124px;
    resize: vertical;
    padding: 0.9rem 1rem;
}

.services-category-textarea-shell {
    position: relative;
}

.services-category-textarea-shell textarea {
    padding-bottom: 4.7rem;
}

.services-category-ai-bar {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.services-category-ai-btn {
    min-height: 44px;
    padding: 0.72rem 1.15rem;
    border: 1px solid #cdc6ff;
    border-radius: 999px;
    background: #ffffff;
    color: #1b1e24;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    box-shadow: 0 10px 18px rgba(128, 113, 255, 0.12);
    font-size: 0.98rem;
    font-weight: 700;
}

.services-category-ai-btn:hover {
    border-color: #bcaeff;
    background: #fcfbff;
    color: #16191f;
    box-shadow: 0 12px 22px rgba(128, 113, 255, 0.16);
}

.services-category-ai-btn:focus-visible {
    outline: none;
    border-color: #a995ff;
    box-shadow: 0 0 0 4px rgba(148, 128, 255, 0.16);
}

.services-category-ai-btn:disabled {
    cursor: wait;
    opacity: 0.9;
}

.services-category-ai-icon[data-icon]::before {
    color: #7b61ff;
    font-size: 1.1rem;
}

.services-category-ai-btn.is-loading .services-category-ai-icon {
    animation: servicesAiPulse 1s ease-in-out infinite;
}

.services-category-ai-status {
    color: #707580;
    font-size: 0.79rem;
    font-weight: 700;
    text-align: right;
}

.services-category-ai-status[data-state='success'] {
    color: #3f6852;
}

.services-category-ai-status[data-state='error'] {
    color: #8a4b4b;
}

@keyframes servicesAiPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.68;
    }
}

.services-category-color-select {
    position: relative;
}

.services-category-color-trigger {
    width: 100%;
    min-height: 56px;
    border: 1px solid #d2d5dc;
    border-radius: 11px;
    background: #ffffff;
    color: #1f2127;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0 1rem;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}

.services-category-color-trigger:focus,
.services-category-color-select.is-open .services-category-color-trigger {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.services-category-color-trigger-value {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.services-category-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--category-color, #9ad9f5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(16, 19, 28, 0.06);
    flex: 0 0 auto;
}

.services-category-color-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    max-height: 430px;
    overflow: auto;
    border: 1px solid #d9dde5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(19, 24, 34, 0.2);
    padding: 0.42rem;
    display: grid;
    gap: 0.18rem;
    z-index: 24;
}

.services-category-color-dropdown[hidden] {
    display: none;
}

.services-category-color-option {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #ffffff;
    color: #1e2128;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    justify-content: flex-start;
    position: relative;
    padding: 0.78rem 0.8rem;
    padding-right: 2.5rem;
    font-size: 0.98rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.services-category-color-option:hover {
    background: #f3f5f8;
}

.services-category-color-option.is-selected {
    border-color: #c9cfd8;
    background: #eceff3;
    box-shadow: inset 0 0 0 1px rgba(18, 23, 31, 0.06);
    color: #15181e;
}

.services-category-color-option.is-selected::after {
    content: 'check';
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    color: #171a20;
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.services-category-color-option:focus-visible {
    outline: none;
    border-color: #bfc7d1;
    background: #f1f3f6;
    box-shadow: 0 0 0 3px rgba(172, 180, 192, 0.18);
}

.services-category-actions {
    margin-top: 1.9rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

.services-category-btn {
    min-width: 104px;
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.services-category-btn-secondary {
    border: 1px solid #d0d4db;
    background: #ffffff;
    color: #171a20;
}

.services-category-btn-primary {
    border: 1px solid #09090d;
    background: #09090d;
    color: #ffffff;
}

@media (max-width: 1320px) {
    .services-catalog-grid {
        grid-template-columns: 1fr;
    }

    .services-categories-panel {
        position: static;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
        overflow: visible;
    }

    .services-categories-nav {
        display: flex;
        overflow-x: auto;
        gap: 0.4rem;
        padding: 0.4rem 0.75rem;
        -webkit-overflow-scrolling: touch;
    }

    .services-categories-nav a {
        white-space: nowrap;
        min-height: 36px;
        font-size: 0.8rem;
    }

    .services-admin-grid {
        grid-template-columns: 1fr;
    }

    .services-settings-grid {
        grid-template-columns: 1fr;
    }

    .services-editor-layout {
        grid-template-columns: 1fr;
    }

    .services-editor-side {
        position: static;
    }
}

@media (max-width: 980px) {
    .services-catalog-top,
    .services-catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .services-catalog-top-actions {
        justify-content: flex-start;
    }

    .services-catalog-search-box {
        min-width: 0;
        max-width: 100%;
    }

    .service-catalog-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .service-catalog-price-wrap {
        text-align: left;
        min-width: 0;
    }

    .service-admin-item {
        grid-template-columns: 1fr;
    }

    .service-admin-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    .services-category-form-row {
        grid-template-columns: 1fr;
    }

    .services-order-item-meta .btn {
        margin-left: 0;
    }

    .services-order-form-actions {
        justify-content: stretch;
    }

    .services-order-form-actions .btn,
    .services-order-form-actions button {
        width: 100%;
    }

    .services-editor-two-cols,
    .services-editor-pricing-grid,
    .services-editor-resource-grid,
    .services-editor-addon-grid,
    .services-editor-three-cols,
    .services-editor-team-grid {
        grid-template-columns: 1fr;
    }

    .services-editor-forms-head,
    .services-editor-form-item {
        grid-template-columns: 1fr;
    }

    .services-editor-forms-head span:last-child {
        display: none;
    }

    .services-editor-form-actions {
        justify-self: end;
    }
}

@media (max-width: 640px) {
    .services-catalog-search {
        flex-direction: column;
        align-items: stretch;
    }

    .services-catalog-search-box {
        min-width: 0;
        max-width: none;
    }

    .service-catalog-card {
        grid-template-columns: 1fr;
    }

    .service-catalog-price-wrap {
        justify-content: flex-start;
    }

    .services-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-form-actions button {
        width: 100%;
        margin-left: 0;
    }

    .service-admin-main {
        flex-direction: column;
    }

    .service-admin-thumb {
        width: 100%;
        height: 150px;
    }

    .service-admin-actions {
        grid-template-columns: 1fr;
    }

    .services-category-modal {
        padding: 1rem;
        align-items: flex-start;
    }

    .services-category-dialog {
        width: 100%;
        max-height: calc(100vh - 2rem);
        margin-top: 0.4rem;
    }

    .services-category-form {
        padding: 1.55rem 1rem 1.1rem;
    }

    .services-category-modal-close {
        top: 0.9rem;
        right: 1rem;
    }

    .services-category-actions {
        flex-direction: column-reverse;
    }

    .services-category-btn {
        width: 100%;
    }

    .services-category-textarea-shell textarea {
        padding-bottom: 5.9rem;
    }

    .services-category-ai-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .services-category-ai-btn {
        width: 100%;
    }

    .services-category-ai-status {
        text-align: left;
    }

    .services-order-item-meta {
        flex-direction: column;
        align-items: stretch;
    }

    .services-order-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-order-form-actions {
        flex-direction: column-reverse;
    }

    .services-settings-check {
        align-items: flex-start;
    }

    .services-editor-ai-bar,
    .services-editor-footer,
    .services-editor-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.portfolio-admin-grid {
    align-items: start;
}

.portfolio-form-panel,
.portfolio-list-panel {
    padding: 0;
    overflow: hidden;
}

.portfolio-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #d7e2ef;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.96) 0%, rgba(238, 245, 253, 0.9) 100%);
}

.portfolio-panel-kicker {
    margin: 0;
    color: #5f7691;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.71rem;
    font-weight: 700;
}

.portfolio-panel-head h2 {
    margin: 0.15rem 0 0;
    font-size: 1.12rem;
    color: #132c48;
    line-height: 1.15;
}

.portfolio-panel-body {
    padding: 0.95rem 1rem 1rem;
}

.portfolio-form .form-group label {
    color: #4f6580;
}

.portfolio-form-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #2f4762;
    font-weight: 600;
}

.portfolio-form-toggle input {
    width: auto;
}

.portfolio-form-actions {
    display: flex;
    justify-content: flex-end;
}

.portfolio-list-scroll {
    max-height: clamp(340px, 66vh, 760px);
    overflow: auto;
    border: 1px solid #d5e0ed;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
    scrollbar-gutter: stable both-edges;
}

.portfolio-list-scroll::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.portfolio-list-scroll::-webkit-scrollbar-track {
    background: #e9f0f8;
}

.portfolio-list-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid #e9f0f8;
    background: linear-gradient(180deg, #71c7e6 0%, #2e95c0 100%);
}

.portfolio-table {
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.portfolio-table th,
.portfolio-table td {
    border-bottom: 1px solid #dbe6f2;
    vertical-align: middle;
    text-align: center;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.portfolio-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg, #f4f8fd 0%, #ecf3fb 100%);
    box-shadow: inset 0 -1px 0 #cfdcec;
}

.portfolio-table tbody tr {
    background: rgba(255, 255, 255, 0.9);
    transition: background 0.18s ease;
}

.portfolio-table tbody tr:hover {
    background: #f2f9ff;
}

.portfolio-thumb-cell {
    width: 172px;
}

.portfolio-thumb {
    width: 148px;
    height: 96px;
    border-radius: 10px;
    border: 1px solid #d0ddea;
    object-fit: cover;
    box-shadow: 0 7px 14px rgba(18, 38, 59, 0.11);
    margin-inline: auto;
}

.portfolio-thumb-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    cursor: zoom-in;
}

.portfolio-thumb-btn:focus-visible {
    outline: 2px solid #3bbddc;
    outline-offset: 3px;
    border-radius: 10px;
}

.portfolio-titles {
    min-width: 220px;
    text-align: center;
}

.portfolio-titles div + div {
    margin-top: 0.22rem;
}

.portfolio-titles strong {
    color: #123657;
}

.portfolio-order-cell {
    width: 72px;
    color: #1f3f62;
    font-weight: 700;
    white-space: nowrap;
}

.portfolio-status-cell {
    width: 110px;
}

.portfolio-actions-dropdown {
    display: inline-block;
    text-align: left;
}

.portfolio-actions-trigger {
    width: 38px;
    min-height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #c8d5e6;
    background: linear-gradient(180deg, #f7fbff 0%, #ecf3fb 100%);
    color: #2f435c;
    font-size: 0.92rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 12px rgba(17, 35, 55, 0.1);
}

.portfolio-actions-trigger:hover {
    background: #eaf2fb;
}

.portfolio-actions-trigger::-webkit-details-marker {
    display: none;
}

.portfolio-actions-trigger::marker {
    content: '';
}

.portfolio-actions-menu {
    display: none;
    min-width: 188px;
    padding: 0.24rem 0;
    border: 1px solid #d4dfec;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 24px rgba(17, 35, 55, 0.16);
    position: fixed;
    top: var(--portfolio-menu-top, 0);
    left: var(--portfolio-menu-left, 0);
    z-index: 220;
}

.portfolio-actions-dropdown[open] .portfolio-actions-menu {
    display: block;
}

.portfolio-actions-menu > * + * {
    border-top: 1px solid #e6edf6;
}

.portfolio-actions-menu form {
    margin: 0;
}

.portfolio-actions-item {
    appearance: none;
    border: 0;
    background: transparent;
    color: #2f425a;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
    width: 100%;
    min-height: 36px;
    padding: 0.48rem 0.72rem;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.portfolio-actions-item:hover {
    background: #f3f8ff;
}

.portfolio-actions-item-icon {
    width: 15px;
    text-align: center;
    color: #667b96;
    font-size: 0.82rem;
}

.portfolio-actions-item.is-danger {
    color: #b33a3a;
}

.portfolio-actions-item.is-danger .portfolio-actions-item-icon {
    color: #b33a3a;
}

.portfolio-actions-item.is-danger:hover {
    background: #fff0f0;
}

.portfolio-row-editable {
    cursor: pointer;
}

.portfolio-row-editable:focus-visible {
    outline: 2px solid rgba(59, 189, 220, 0.55);
    outline-offset: -2px;
}

.portfolio-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 290;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.15rem;
    background: rgba(11, 18, 28, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.portfolio-preview-modal.is-open {
    display: flex;
}

.portfolio-preview-image {
    width: min(1100px, 92vw);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(191, 208, 227, 0.5);
    background: #0d121b;
    box-shadow: 0 18px 36px rgba(5, 10, 18, 0.5);
}

.portfolio-preview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(195, 211, 230, 0.62);
    background: rgba(20, 29, 43, 0.84);
    color: #f5f8ff;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
    box-shadow: 0 8px 18px rgba(5, 10, 18, 0.42);
}

.portfolio-preview-close:hover {
    background: rgba(34, 45, 61, 0.96);
}

.portfolio-preview-caption {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(178, 197, 219, 0.58);
    background: rgba(14, 22, 34, 0.72);
    color: #e4edf9;
    font-size: 0.84rem;
    font-weight: 600;
}

@media (max-width: 1320px) {
    .portfolio-admin-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-list-scroll {
        max-height: 500px;
    }
}

@media (max-width: 760px) {
    .portfolio-panel-head {
        padding: 0.78rem 0.85rem;
    }

    .portfolio-panel-body {
        padding: 0.8rem 0.85rem 0.9rem;
    }

    .portfolio-form-actions button {
        width: 100%;
    }

    .portfolio-list-scroll {
        max-height: none;
    }

    .portfolio-table {
        min-width: 700px;
    }
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem;
}

.blocks-sortable {
    display: grid;
    gap: 0.75rem;
}

.block-item {
    margin: 0;
    padding: 0.96rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d2ddec;
    border-radius: 13px;
    box-shadow: 0 10px 22px rgba(17, 35, 55, 0.08);
    cursor: grab;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.block-item:active {
    cursor: grabbing;
}

.block-item.is-dragging {
    opacity: 0.4;
    border-style: dashed;
}

.block-item.drag-over {
    border-color: #2ec5db;
    box-shadow: 0 0 0 2px rgba(31, 199, 216, 0.2), 0 10px 22px rgba(17, 35, 55, 0.08);
    transform: translateY(-1px);
}

.block-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.42rem;
}

.block-item-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.block-order {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2ac8dd, #1b9cc8);
    color: #fff;
    font-weight: 700;
    font-size: 0.86rem;
    box-shadow: 0 6px 12px rgba(19, 56, 84, 0.22);
}

.block-item h3 {
    margin: 0;
    font-size: 1.02rem;
}

.block-item p {
    margin: 0 0 0.62rem;
    color: #5f6d83;
}

.block-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-weight: 600;
    color: #26364a;
}

.block-drag-handle {
    border: 1px solid #c5d3e5;
    border-radius: 8px;
    background: #f4f8fd;
    color: #4d617a;
    font-weight: 700;
    line-height: 1;
    padding: 0.4rem 0.56rem;
    cursor: grab;
    transition: all 0.18s ease;
}

.block-drag-handle:hover {
    border-color: #9eb8d4;
    background: #edf4fc;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(760px 340px at 90% -20%, rgba(31, 198, 215, 0.2), transparent 62%),
        linear-gradient(180deg, #f7f9fd 0%, #eceff5 100%);
}

.login-card {
    width: min(460px, 100%);
    border-radius: 20px;
    border: 1px solid #dce2de;
    background: #fff;
    box-shadow: var(--lh-shadow);
    padding: 1.35rem;
}

.login-card h1 {
    margin-bottom: 0.25rem;
    font-size: 2.1rem;
}

.login-card p {
    color: #5f6f6d;
}

.login-page-auth {
    display: block;
    padding: 0;
    background: #ffffff;
}

.login-card-auth {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.login-auth-layout {
    display: grid;
    grid-template-columns: minmax(320px, 58%) minmax(360px, 42%);
    gap: 0;
    min-height: 100vh;
    align-items: stretch;
}

.login-brand-panel {
    position: relative;
    min-height: 100vh;
    padding: 3rem 2rem;
    background-image: var(--login-brand-bg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff6f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.84) 0%, rgba(59, 130, 246, 0.58) 48%, rgba(30, 58, 138, 0.36) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0.18));
    pointer-events: none;
}

.login-brand-inner {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    text-align: center;
}

.login-brand-logo {
    display: block;
    width: 200px;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    margin: 0 auto 1.2rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

.login-brand-wordmark {
    color: #ffffff;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.02;
}

.login-brand-description {
    display: inline-block;
    max-width: min(440px, 92%);
    margin: 0;
    padding: 1rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.015em;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(15, 23, 42, 0.45);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.28);
}

.login-form-panel {
    position: relative;
    padding: 2.5rem 2rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-form-shell {
    width: min(420px, 100%);
}

.login-form-logo {
    display: block;
    width: 160px;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    margin: 0 auto 1rem;
}

.login-form-wordmark {
    margin-bottom: 1rem;
    color: #24334c;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.login-form-subtitle {
    margin: 0 0 1.9rem;
    color: #60656f;
    text-align: center;
    font-size: 0.98rem;
}

.login-auth-flashes {
    margin: 0 0 1.25rem;
}

.login-form-panel-head,
.login-form-kicker,
.login-form-panel-head h2,
.login-card .login-form-panel-head p {
    display: none;
}

.login-auth-form {
    width: 100%;
}

.login-form-panel .form-group {
    margin-bottom: 1rem;
}

.login-form-panel .form-group label {
    color: #4f5561;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.login-form-panel .form-group input {
    min-height: 48px;
    border-radius: 10px;
    border: 1px solid #d5dce5;
    background: #ffffff;
    padding-inline: 0.95rem;
    font-size: 1.08rem;
    box-shadow: none;
}

.login-form-panel .form-group input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.login-form-panel button.w-full {
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    box-shadow: none;
}

.login-form-panel button.w-full:hover {
    background: #1d4ed8;
    filter: none;
}

.login-form-foot {
    margin-top: 1.2rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.login-forgot-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.login-forgot-link:hover {
    text-decoration: underline;
}

.login-form-divider {
    width: 100%;
    height: 1px;
    background: #dde2e9;
}

.login-form-copy {
    margin: 0;
    color: #5b6573;
    text-align: center;
    font-size: 0.92rem;
}

.login-page-forgot {
    background:
        radial-gradient(460px 240px at 50% 0%, rgba(226, 51, 69, 0.1), transparent 72%),
        linear-gradient(180deg, #f7fbff 0%, #edf2f7 100%);
}

.login-card-forgot {
    width: min(540px, 100%);
    padding: 2.2rem 2rem;
    border-radius: 22px;
    border-color: #dde5ee;
    background: #ffffff;
    box-shadow: 0 26px 62px rgba(20, 36, 66, 0.1);
}

.login-recovery-shell {
    width: min(410px, 100%);
    margin: 0 auto;
    text-align: center;
}

.login-card-forgot .flash-wrap {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: left;
}

.login-recovery-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    color: #e33245;
    font-size: 3.9rem;
}

.login-card-forgot .login-recovery-title {
    margin: 0 0 0.55rem;
    color: #16233c;
    font-size: 1.42rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.login-recovery-subtitle {
    margin: 0 0 1.55rem;
    color: #607082;
    font-size: 0.9rem;
    line-height: 1.7;
}

.login-recovery-form {
    text-align: left;
}

.login-card-forgot .form-group label {
    color: #586576;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.login-recovery-input-shell {
    position: relative;
}

.login-recovery-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #647284;
    font-size: 1rem;
    pointer-events: none;
}

.login-recovery-input-shell input {
    padding-left: 2.65rem;
    font-size: 1.08rem;
}

.login-card-forgot button.w-full {
    min-height: 50px;
    border: 0;
    border-radius: 10px;
    background: #e33245;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    text-transform: none;
    box-shadow: none;
}

.login-card-forgot button.w-full:hover {
    background: #d92c3e;
}

.login-recovery-divider {
    margin: 1.5rem 0 1rem;
    height: 1px;
    background: #dfe5ec;
}

.login-recovery-actions {
    display: flex;
    justify-content: center;
}

.login-recovery-back {
    color: #445365;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.login-recovery-back:hover {
    text-decoration: underline;
}

.login-page-reset {
    background:
        radial-gradient(520px 260px at 50% 0%, rgba(86, 143, 244, 0.12), transparent 70%),
        linear-gradient(180deg, #f7fbff 0%, #edf2f7 100%);
}

.login-card-reset {
    width: min(560px, 100%);
    padding: 2rem 1.9rem;
    border-radius: 24px;
    border: 1px solid #dde4ef;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(27, 44, 78, 0.12);
}

.login-reset-shell {
    width: min(405px, 100%);
    margin: 0 auto;
}

.login-card-reset .flash-wrap {
    margin-top: 0;
    margin-bottom: 1rem;
}

.login-reset-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 1.3rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef2f8 0%, #e2e8f1 100%);
    box-shadow: 0 10px 26px rgba(68, 84, 112, 0.12);
    color: #4a5565;
}

.login-reset-avatar svg {
    width: 42px;
    height: 42px;
}

.login-reset-avatar-alert {
    color: #e33245;
}

.login-card-reset .login-reset-title {
    margin: 0;
    color: #16233c;
    font-size: 1.9rem;
    line-height: 1.25;
    text-align: center;
    letter-spacing: -0.01em;
}

.login-reset-email {
    margin: 0.4rem 0 0;
    color: #687788;
    text-align: center;
    font-size: 0.98rem;
}

.login-reset-form {
    margin-top: 1.7rem;
}

.login-reset-field + .login-reset-field {
    margin-top: 1.35rem;
}

.login-reset-label {
    display: block;
    margin: 0 0 0.55rem;
    color: #607084;
    font-size: 0.93rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: none;
}

.login-reset-input-shell {
    display: flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid #d7dfe9;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.login-reset-input-shell:focus-within {
    border-color: #6f99e9;
    box-shadow: 0 0 0 3px rgba(108, 150, 235, 0.14);
}

.login-reset-input-shell.is-valid {
    border-color: #19a56f;
    box-shadow: 0 0 0 3px rgba(25, 165, 111, 0.12);
}

.login-reset-input-shell.is-invalid {
    border-color: #e35a6a;
    box-shadow: 0 0 0 3px rgba(227, 90, 106, 0.12);
}

.login-reset-input-icon {
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: #556478;
}

.login-reset-input-icon svg,
.login-reset-input-action svg {
    width: 18px;
    height: 18px;
}

.login-reset-input-shell input {
    flex: 1 1 auto;
    min-height: 46px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0.9rem 0 0.1rem;
    font-size: 1rem;
    color: #22324b;
}

.login-reset-input-shell input:focus {
    box-shadow: none;
}

.login-reset-input-action {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: #8c6b3d;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.login-reset-rules {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.login-reset-rule {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #a6b1c0;
    font-size: 0.99rem;
    line-height: 1.35;
}

.login-reset-rule-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #b7c0cc;
    color: transparent;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
}

.login-reset-rule.is-valid {
    color: #16895f;
}

.login-reset-rule.is-valid .login-reset-rule-icon {
    background: #169764;
    color: #ffffff;
}

.login-reset-submit {
    margin-top: 1.7rem;
    min-height: 50px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #6ea2f5 0%, #5c8de3 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    box-shadow: none;
}

.login-reset-submit:hover {
    background: linear-gradient(180deg, #679cef 0%, #547fd2 100%);
}

.login-reset-submit:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.login-reset-invalid-copy {
    margin: 0.85rem 0 0;
    color: #637385;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.7;
}

.login-reset-actions {
    margin-top: 1.55rem;
    padding-top: 1.15rem;
    border-top: 1px solid #dfe5ec;
    display: flex;
    justify-content: center;
}

.login-reset-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #445365;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
}

.login-reset-back:hover {
    text-decoration: underline;
}

@media (max-width: 1120px) {
    .login-card-auth {
        min-height: 100vh;
    }

    .login-auth-layout {
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    .login-brand-panel {
        min-height: 360px;
        padding: 2rem 1.4rem;
    }

    .login-form-panel {
        padding: 2rem 1.4rem 2.3rem;
    }

    .lh-nav-shell {
        grid-template-columns: 260px 1fr;
    }

    .lh-nav-cta {
        display: none;
    }

    .lh-card-grid,
    .lh-contact-main-grid,
    .lh-service-circles,
    .lh-team-grid,
    .lh-calm-grid,
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-kpi-card-wide {
        grid-column: span 3;
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-live-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lh-catalog-strip {
        grid-template-columns: 1fr;
        max-width: 820px;
    }

    .lh-catalog-preview-btn img {
        height: clamp(280px, 52vw, 430px);
    }

    .lh-contact-map-frame iframe {
        height: clamp(300px, 48vw, 390px);
    }

    .lh-about-overview-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        min-height: 580px;
    }

    .lh-about-overview-card {
        padding: 2.3rem 2rem 2rem;
    }

    .lh-about-member-body h3 {
        font-size: 1.45rem;
    }

    .lh-about-member-body p {
        font-size: 0.94rem;
    }

    .cms-cards-global {
        grid-template-columns: 1fr;
    }

    .lh-team-card,
    .lh-team-card-inner {
        min-height: 380px;
    }

    .lh-team-photo {
        height: 300px;
    }

    .lh-portfolio-marquee-track .lh-portfolio-set {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 240px;
    }

    .lh-portfolio-shell {
        padding-inline: 0.5rem;
    }

    .lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(n) {
        grid-column: auto;
        grid-row: auto;
    }

    .lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(1) {
        grid-column: 1 / -1;
        min-height: 300px;
    }

    .lh-proof-slides {
        max-width: 760px;
    }

    .lh-booking-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lh-booking-hours,
    .lh-booking-card {
        max-width: 980px;
        width: 100%;
        margin-inline: auto;
    }

    .lh-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lh-footer-about {
        grid-column: 1 / -1;
    }

    .lh-footer-map-frame {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .admin-body.admin-page-content .admin-content {
        --cms-sidebar-width: 214px;
    }

    .lh-topline-inner {
        min-height: auto;
        padding: 0.6rem 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .lh-nav-shell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--lh-nav-h);
    }

    .lh-logo-wrap {
        background: transparent;
        padding-left: 0;
    }

    .lh-logo-wrap .brand-logo {
        max-height: 62px;
    }

    .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 1rem;
        right: 1rem;
        background: #0b1422;
        border: 1px solid rgba(78, 111, 145, 0.38);
        border-radius: 10px;
        box-shadow: var(--lh-shadow);
        padding: 0.5rem;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: all 0.2s ease;
        flex-direction: column;
        align-items: stretch;
    }

    .site-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-nav a {
        min-height: 44px;
        border-radius: 8px;
    }

    .lh-nav-mobile-tagline {
        display: block;
        padding: 0.35rem 0.55rem 0.65rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 0.35rem;
    }

    .lh-nav-mobile-tagline p {
        margin: 0;
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        letter-spacing: 0.02em;
    }

    .site-body.page-home .lh-hero {
        --lh-hero-mobile-top-offset: 0px;
        --lh-hero-mobile-frame-h: clamp(320px, 62vw, 420px);
        margin-top: 0;
        padding-top: 0;
        min-height: var(--lh-hero-mobile-frame-h);
        padding-bottom: 1rem;
        background: #f3f4f6;
    }

    .site-body.page-home .lh-hero .lh-hero-slides {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        overflow: hidden;
        background: #111a28;
    }

    .site-body.page-home .lh-hero .lh-hero-overlay {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        background: linear-gradient(180deg, rgba(21, 29, 40, 0.58), rgba(20, 28, 39, 0.48));
    }

    .site-body.page-home .lh-hero .lh-hero-controls {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        padding: 0 0.45rem;
    }

    .site-body.page-home .lh-hero .lh-hero-control {
        width: 44px;
        height: 44px;
        font-size: 1.62rem;
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        margin-inline: auto;
        text-align: center;
        min-height: var(--lh-hero-mobile-frame-h);
        justify-content: center;
        gap: 0.55rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-body.page-home .lh-hero .lh-script {
        margin: 0;
        max-width: 16ch;
        font-size: clamp(3.075rem, 10.2vw, 4.29rem);
        line-height: 0.95;
        letter-spacing: 0.012em;
        color: #d8aa4d;
        background: linear-gradient(180deg, #f6df9b 0%, #e2bf6c 48%, #b8862b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:
            0 2px 10px rgba(20, 16, 8, 0.35),
            0 1px 0 rgba(255, 238, 180, 0.35);
    }

    .site-body.page-home .lh-hero h1 {
        margin: 0;
        max-width: 11.5ch;
        font-size: clamp(1.95rem, 6.9vw, 2.7rem);
        line-height: 1;
    }

    .site-body.page-home .lh-hero p {
        margin: 0 auto 0.75rem;
        max-width: 29ch;
        font-size: clamp(0.98rem, 3vw, 1.1rem);
        line-height: 1.34;
    }

    .site-body.page-home .lh-hero .lh-btn-primary {
        min-width: clamp(210px, 48vw, 290px);
        padding: 0.8rem 1.2rem;
    }

    .site-body.page-home .lh-hero .lh-hero-slide,
    .site-body.page-home .lh-hero .lh-hero-slide.is-active {
        transform: none;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::before {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center 34%;
        z-index: 1;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::after {
        display: none;
    }

    .lh-proof-bg {
        inset: -120px 0 -120px;
    }

    .lh-proof::before,
    .lh-proof::after {
        display: none;
    }

    .lh-proof-quote {
        font-size: clamp(1.2rem, 4.1vw, 1.8rem);
        line-height: 1.45;
    }

    .lh-proof-slides {
        min-height: 268px;
    }

    .lh-proof-slide {
        padding: 1.8rem 1.5rem;
    }

    .admin-layout {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .admin-topbar {
        margin: 0 -0.82rem 1.02rem;
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 0.52rem;
        padding-inline: 0.82rem;
    }

    .admin-topbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-topbar-quick {
        width: 100%;
        order: 2;
        overflow-x: auto;
        padding-bottom: 0.12rem;
    }

    .admin-topbar-search-wrap {
        width: 100%;
    }

    .admin-topbar-search {
        width: 100%;
        min-width: 0;
    }

    .admin-body.admin-page-dashboard-pro .admin-layout {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar {
        min-height: 60px;
        align-items: center;
        flex-direction: row;
        gap: 0.55rem;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar-right {
        width: auto;
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .site-body {
        --lh-topline-h: 36px;
        --lh-header-offset: calc(var(--lh-mobile-topline-h, var(--lh-topline-h)) + var(--lh-mobile-header-h, var(--lh-nav-h)));
        padding-top: var(--lh-header-offset);
    }

    .site-body.topline-hidden {
        padding-top: var(--lh-mobile-header-h, var(--lh-nav-h));
    }

    .site-body.nav-is-hidden {
        padding-top: var(--lh-mobile-header-h, var(--lh-nav-h));
    }

    section[id] {
        scroll-margin-top: calc(var(--lh-header-offset) + 10px);
    }

    .lh-topline {
        display: block;
        background: linear-gradient(90deg, var(--lh-header-start) 0%, var(--lh-header-end) 100%);
        color: #e2e8f4;
        border-top: none;
        border-bottom: 1px solid rgba(117, 149, 182, 0.24);
        box-shadow: none;
    }

    .lh-topline-inner {
        min-height: var(--lh-topline-h);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.42rem;
        padding: 0.42rem 0 0.58rem;
    }

    .lh-topline-left {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }

    .lh-topline-left p {
        justify-content: center;
        text-align: center;
        color: #c8d4e6;
        font-size: 0.84rem;
        font-weight: 500;
        line-height: 1.33;
        letter-spacing: 0.018em;
        width: 100%;
        padding-inline: 0.2rem;
    }

    .lh-topline-copy {
        max-width: min(100%, 42ch);
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .lh-topline-social {
        display: flex;
        margin-left: 0;
        margin-top: 0.08rem;
        gap: 0.5rem;
    }

    .lh-topline-social a {
        width: 42px;
        height: 42px;
        border: 1px solid transparent;
        background: rgba(18, 34, 52, 0.66);
        color: #ffffff;
        box-shadow: 0 8px 16px rgba(4, 12, 22, 0.32);
        transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
    }

    .lh-topline-social a:hover {
        transform: translateY(-2px) scale(1.04);
        filter: saturate(1.08) brightness(1.05);
        box-shadow: 0 10px 18px rgba(3, 14, 25, 0.42);
    }

    .lh-topline-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
    }

    .lh-topline-contact a {
        color: #e2e8f4;
        font-size: 0.88rem;
        font-weight: 500;
        gap: 0.52rem;
    }

    .lh-topline-contact .lh-topline-icon {
        width: 20px;
        height: 20px;
    }

    .lh-topline .lh-lang-switch {
        display: none;
    }

    .lh-topline .lh-lang-switch a {
        min-width: 46px;
        min-height: 24px;
        font-size: 0.68rem;
    }

    .site-header {
        top: var(--lh-mobile-topline-h, var(--lh-topline-h));
        background: linear-gradient(90deg, var(--lh-header-start) 0%, var(--lh-header-end) 100%);
        backdrop-filter: blur(9px) saturate(110%);
        -webkit-backdrop-filter: blur(9px) saturate(110%);
        border-bottom: 1px solid rgba(117, 149, 182, 0.34);
        box-shadow: none;
    }

    .site-header.is-scrolled {
        background: linear-gradient(90deg, var(--lh-header-scrolled-start) 0%, var(--lh-header-scrolled-end) 100%);
        border-bottom: 0;
        box-shadow: 0 10px 22px rgba(6, 11, 18, 0.35);
    }

    .site-body.nav-is-hidden .site-header {
        transform: translateY(-118%) scale(0.82) rotateX(16deg);
        opacity: 0;
        filter: blur(1.6px);
    }

    .lh-topline-contact {
        align-items: center;
    }

    .lh-card-grid,
    .lh-service-circles,
    .lh-team-grid,
    .lh-calm-grid,
    .lh-contact-main-grid,
    .cms-translate-grid,
    .form-grid,
    .grid-2,
    .grid-3,
    .metrics,
    .dashboard-kpi-grid,
    .lh-footer-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-card-wide {
        grid-column: span 1;
    }

    .dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-live-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-activity-item,
    .dashboard-agenda-item,
    .dashboard-next-item,
    .dashboard-live-item {
        grid-template-columns: 1fr;
        gap: 0.34rem;
    }

    .dashboard-activity-status,
    .dashboard-agenda-time,
    .dashboard-next-date,
    .dashboard-live-pill {
        width: fit-content;
    }

    .admin-body.admin-page-dashboard-pro .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-dashboard-pro .admin-sidebar {
        display: none;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar {
        padding-inline: 0.75rem;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar-brand {
        font-size: 1.36rem;
    }

    .admin-body.admin-page-dashboard-pro .admin-topbar-pro-cta {
        display: none;
    }

    .lh-catalog-strip {
        margin-top: 1.45rem;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .lh-catalog-copy {
        padding: 0.2rem;
    }

    .lh-catalog-preview-btn img {
        height: clamp(230px, 70vw, 360px);
    }

    .lh-catalog-dialog {
        width: min(1280px, 98vw);
        max-height: calc(100vh - 1rem);
        padding: 0.62rem;
    }

    .cms-nav,
    .cms-actions,
    .top-title,
    .admin-body .flash-wrap {
        position: static;
    }

    .cms-editor {
        padding-bottom: 1rem;
    }

    .cms-actions {
        left: auto;
        right: auto;
        bottom: auto;
        justify-content: flex-end;
    }

    .cms-actions-copy {
        display: none;
    }

    .cms-nav {
        padding: 0.55rem;
    }

    .cms-nav a {
        font-size: 0.8rem;
        min-height: 32px;
    }

    .cms-card {
        padding: 0.75rem;
    }

    .cms-card-head {
        flex-direction: column;
        gap: 0.35rem;
    }

    .cms-rich-toolbar button {
        min-width: 28px;
        min-height: 28px;
        font-size: 0.76rem;
        padding: 0.2rem 0.3rem;
    }

    .cms-rich-editable {
        min-height: 150px;
        font-size: 0.88rem;
    }

    .lh-contact-hero {
        min-height: 300px;
    }

    .lh-about-hero {
        min-height: 286px;
    }

    .lh-about-hero-inner {
        min-height: 226px;
        justify-content: center;
        padding: 0.82rem 0 1rem;
    }

    .lh-about-hero h1 {
        font-size: clamp(1.96rem, 8.1vw, 2.72rem);
    }

    .lh-about-hero p {
        font-size: 0.88rem;
    }

    .lh-about-overview {
        padding: 0 0 2.6rem;
    }

    .lh-about-overview-grid {
        margin-top: 0;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .lh-about-overview-image {
        min-height: 350px;
    }

    .lh-about-overview-image img {
        min-height: 350px;
        max-height: 420px;
    }

    .lh-about-overview-play {
        width: 82px;
        height: 82px;
        top: 56%;
    }

    .lh-about-overview-play::before {
        inset: -12px;
    }

    .lh-about-overview-play::after {
        left: 33px;
        top: 26px;
        border-left-width: 15px;
        border-top-width: 9px;
        border-bottom-width: 9px;
    }

    .lh-about-overview-card {
        padding: 1.35rem 1rem 1.25rem;
    }

    .lh-about-overview-card p {
        font-size: 0.92rem;
        line-height: 1.5;
        font-weight: 500;
    }

    .lh-about-why-list li {
        font-size: 0.9rem;
    }

    .lh-about-stats {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .lh-about-stat {
        border-top: 1px solid #d7e0ea;
        padding-top: 0.6rem;
    }

    .lh-about-team {
        padding-bottom: 3.3rem;
    }

    .lh-about-team-grid {
        grid-template-columns: 1fr;
    }

    .lh-about-member-body h3 {
        font-size: 1.45rem;
    }

    .lh-about-member-body p {
        font-size: 0.95rem;
    }

    .lh-contact-hero-inner {
        min-height: 248px;
        padding: 1rem 0 1.4rem;
    }

    .lh-contact-hero h1 {
        font-size: clamp(2rem, 8.4vw, 2.8rem);
    }

    .lh-contact-hero p {
        font-size: 0.9rem;
    }

    .lh-page-hero {
        min-height: 286px;
    }

    .lh-page-hero-inner {
        min-height: 226px;
        justify-content: center;
        padding: 0.82rem 0 1rem;
    }

    .lh-page-hero h1 {
        font-size: clamp(1.96rem, 8.1vw, 2.72rem);
    }

    .lh-page-hero p {
        font-size: 0.88rem;
    }

    .lh-contact-map-section {
        padding: 0.75rem 0 1.35rem;
    }

    .lh-contact-map-frame iframe {
        height: 270px;
    }

    .lh-contact-main {
        padding-bottom: 3rem;
    }

    .lh-contact-form-card,
    .lh-contact-info-panel {
        padding: 1rem 0.88rem 1.05rem;
    }

    .lh-terms-doc {
        padding: 1.7rem 0 2.6rem;
    }

    .lh-terms-paper {
        padding: 1.05rem 0.9rem;
    }

    .lh-terms-item h3 {
        font-size: 1.01rem;
    }

    .lh-terms-item p {
        font-size: 0.9rem;
        line-height: 1.58;
    }

    .lh-footer-grid {
        gap: 1.6rem;
        padding: 2.1rem 0 1.25rem;
    }

    .lh-footer-about {
        grid-column: auto;
    }

    .lh-footer-line {
        margin: 0.78rem 0 1rem;
    }

    .lh-footer-tagline {
        font-size: 1.28rem;
    }

    .lh-footer-contact a,
    .lh-footer-nav a {
        font-size: 1rem;
    }

    .lh-team-card,
    .lh-team-card-inner {
        min-height: 380px;
    }

    .lh-team-photo {
        height: 300px;
    }

    .lh-team-back {
        padding: 1rem 0.95rem 0.9rem;
    }

    .lh-team-bio {
        font-size: 0.92rem;
    }

    .lh-booking {
        padding: 3.4rem 0;
    }

    .lh-booking-overlay {
        background: linear-gradient(180deg, rgba(17, 22, 30, 0.79), rgba(17, 22, 30, 0.62));
    }

    .lh-booking-hours {
        padding: 1.35rem 1.1rem;
    }

    .lh-booking-hours h2 {
        font-size: 2rem;
    }

    .lh-booking-hours li {
        font-size: 1rem;
    }

    .lh-booking-card {
        padding: 1rem 0.92rem 1.15rem;
    }

    .lh-booking-stage-controls,
    .lh-booking-agenda {
        padding: 0.92rem;
    }

    .lh-booking-checkout-card {
        padding: 0.92rem;
    }

    .lh-booking-checkout-shell {
        grid-template-columns: 1fr;
    }

    .lh-booking-service-bar {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .lh-booking-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lh-booking-head h2 {
        font-size: 1.9rem;
    }

    .lh-booking-agenda-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .lh-booking-agenda-status {
        max-width: none;
        text-align: left;
    }

    .lh-booking-scheduler {
        grid-template-columns: 1fr;
    }

    .lh-booking-summary-panel {
        grid-template-columns: 1fr;
        border-right: 0;
        border-bottom: 1px solid rgba(223, 231, 241, 0.98);
    }

    .lh-booking-summary-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lh-booking-steps {
        grid-template-columns: 1fr;
    }

    .lh-booking-step-card {
        min-height: 0;
    }

    .lh-booking-checkout-head {
        grid-template-columns: 1fr;
        display: grid;
    }

    .lh-booking-checkout-note {
        max-width: none;
        text-align: left;
    }

    .lh-booking-checkout-grid {
        grid-template-columns: 1fr;
    }

    .lh-booking-calendar-panel {
        border-right: 0;
        border-top: 1px solid rgba(137, 160, 190, 0.2);
        border-bottom: 1px solid rgba(137, 160, 190, 0.2);
    }

    .lh-booking-slot-list {
        max-height: none;
    }

    .lh-booking-calendar-day {
        min-height: 74px;
    }

    .lh-booking-weekdays span,
    .lh-booking-calendar-day-meta {
        font-size: 0.68rem;
    }

    .lh-portfolio-marquee-track .lh-portfolio-set {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
        gap: 0.8rem;
    }

    .lh-portfolio-shell {
        padding-inline: 0.35rem;
    }

    .lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .lh-portfolio-marquee-track .lh-portfolio-set .lh-portfolio-shot:nth-of-type(1) {
        min-height: 250px;
    }

    .lh-proof-stats-grid {
        grid-template-columns: 1fr;
    }

    .lh-proof-stat + .lh-proof-stat {
        border-left: 0;
        border-top: 1px solid #e5e6ea;
    }

    .lh-proof-testimonials {
        padding: 2.7rem 0 2.4rem;
    }

    .lh-proof-bg {
        inset: -90px 0 -90px;
    }

    .lh-proof-slides {
        border-radius: 18px;
        min-height: 0;
    }

    .lh-proof-slide {
        position: relative;
        inset: auto;
        display: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
        padding: 1.6rem 1.1rem;
    }

    .lh-proof-slide.is-active {
        display: flex;
    }

    .lh-proof-controls {
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .lh-proof-dots {
        max-width: calc(100vw - 7.8rem);
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.2rem;
        scrollbar-width: thin;
    }

    .lh-proof-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.32rem;
    }

    .lh-proof-dot {
        width: 52px;
        height: 52px;
    }

    .lh-contact-cards {
        margin-top: 0;
        padding-top: 1rem;
    }

    .lh-card {
        border-width: 1px;
        border-radius: 16px;
        flex-direction: column;
        text-align: center;
        padding: 1.2rem 1rem;
        min-height: auto;
    }

    .lh-card img {
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }

    .lh-card h3 {
        font-size: 1.05rem;
    }

    .lh-card p {
        font-size: 0.85rem;
    }

    .site-body.page-home .lh-hero {
        --lh-hero-mobile-top-offset: 0px;
        --lh-hero-mobile-frame-h: clamp(340px, 78vw, 430px);
        margin-top: 0;
        padding-top: 0;
        min-height: var(--lh-hero-mobile-frame-h);
        padding-bottom: 1rem;
        background: #f3f4f6;
    }

    .site-body.page-home .lh-hero .lh-hero-slides {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        overflow: hidden;
        background: #111a28;
    }

    .site-body.page-home .lh-hero .lh-hero-overlay {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        background: linear-gradient(180deg, rgba(21, 29, 40, 0.58), rgba(20, 28, 39, 0.48));
    }

    .site-body.page-home .lh-hero .lh-hero-controls {
        top: var(--lh-hero-mobile-top-offset);
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--lh-hero-mobile-frame-h);
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        padding: 0 0.35rem;
    }

    .site-body.page-home .lh-hero .lh-hero-control {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .site-body.page-home .lh-hero .lh-hero-inner {
        min-height: var(--lh-hero-mobile-frame-h);
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 0.95rem;
        justify-content: center;
        gap: 0.55rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-body.page-home .lh-hero .lh-script {
        margin: 0;
        max-width: 15.5ch;
        font-size: clamp(2.85rem, 11.85vw, 3.75rem);
        line-height: 0.95;
        letter-spacing: 0.01em;
        color: #d8aa4d;
        background: linear-gradient(180deg, #f6df9b 0%, #e2bf6c 48%, #b8862b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:
            0 2px 10px rgba(20, 16, 8, 0.35),
            0 1px 0 rgba(255, 238, 180, 0.35);
    }

    .site-body.page-home .lh-hero h1 {
        margin: 0;
        max-width: 11.5ch;
        font-size: clamp(1.85rem, 8vw, 2.4rem);
        line-height: 1;
    }

    .site-body.page-home .lh-hero p {
        margin: 0 auto;
        margin-inline: auto;
        margin-bottom: 0.78rem;
        font-size: clamp(0.93rem, 3.9vw, 1.03rem);
        line-height: 1.34;
        max-width: 23.5ch;
    }

    .site-body.page-home .lh-hero .lh-btn-primary {
        min-width: clamp(204px, 64vw, 266px);
        padding: 0.76rem 1.18rem;
    }

    .site-body.page-home .lh-hero .lh-hero-slide,
    .site-body.page-home .lh-hero .lh-hero-slide.is-active {
        transform: none;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::before {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center 36%;
        z-index: 1;
    }

    .site-body.page-home .lh-hero .lh-hero-slide::after {
        display: none;
    }

    /* Skip logo-like slides in mobile/tablet hero */
    .lh-hero-slide[data-mobile-skip="1"] {
        display: none !important;
    }

    .admin-layout {
        min-height: auto;
        height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
        position: relative;
    }

    .admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 78px;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        padding-bottom: 1rem;
        transform: translateX(-110%);
        transition: transform 0.22s ease;
        z-index: 62;
    }

    .admin-body.admin-mobile-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-content {
        min-height: 100vh;
        height: auto;
        overflow: visible;
        overflow-x: hidden;
        padding: 0 0.82rem 0.82rem;
        position: relative;
    }

    .admin-content::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(10, 16, 27, 0.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 58;
    }

    .admin-body.admin-mobile-sidebar-open .admin-content::before {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-body .flash-wrap {
        top: 0;
    }

    .admin-sidebar-toggle {
        display: inline-flex;
    }

    .admin-body.admin-sidebar-collapsed .admin-layout {
        grid-template-columns: 1fr;
    }

}




/* Brochure page (closer to provided flyer style) */
.lh-brochure-hero {
    --lh-page-hero-bg: linear-gradient(135deg, #545f72 0%, #7f5f70 50%, #2f405a 100%);
}

.lh-brochure-sheet {
    padding: clamp(2.1rem, 4.6vw, 4rem) 0 clamp(2.6rem, 4.8vw, 4.6rem);
    background: linear-gradient(180deg, #f7f1f4 0%, #efe8ee 100%);
}

.lh-brochure-paper {
    position: relative;
    max-width: 1460px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 3px dashed rgba(214, 74, 117, 0.62);
    box-shadow: 0 26px 60px rgba(42, 31, 43, 0.2);
    padding: 10px;
}

.lh-brochure-document-html {
    min-height: 0;
    background: linear-gradient(180deg, #fff 0%, #fffdfd 100%);
    padding: clamp(1rem, 2vw, 1.8rem);
}

.lh-brochure-document-html h1,
.lh-brochure-document-html h2,
.lh-brochure-document-html h3,
.lh-brochure-document-html h4 {
    color: #d54878;
    margin: 0.45rem 0 0.35rem;
    line-height: 1.2;
}

.lh-brochure-document-html h1 {
    font-size: clamp(1.3rem, 2vw, 1.9rem);
}

.lh-brochure-document-html h2 {
    font-size: clamp(1.14rem, 1.7vw, 1.55rem);
}

.lh-brochure-document-html h3 {
    font-size: clamp(1rem, 1.35vw, 1.28rem);
}

.lh-brochure-document-html p,
.lh-brochure-document-html li {
    color: #212430;
    font-size: clamp(0.84rem, 0.96vw, 1rem);
    line-height: 1.33;
}

.lh-brochure-document-html ul,
.lh-brochure-document-html ol {
    margin: 0.35rem 0 0.7rem 1.05rem;
}

.lh-brochure-document-html hr {
    border: 0;
    border-top: 1px dashed rgba(214, 74, 117, 0.45);
    margin: 0.75rem 0;
}

.lh-brochure-layout {
    display: grid;
    grid-template-columns: 31% 69%;
    min-height: 0;
    align-items: stretch;
}

.lh-brochure-left {
    background: linear-gradient(180deg, #f4e4e9 0%, #f8edf1 100%);
    padding: 1.35rem 1.18rem 1.2rem;
    border-right: 1px dashed rgba(214, 74, 117, 0.35);
}

.lh-brochure-left h2 {
    margin: 0 0 0.9rem;
    color: #6f2c48;
    font-size: clamp(1.72rem, 2.35vw, 2.45rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.lh-brochure-main {
    background: linear-gradient(180deg, #fff 0%, #fffdfd 100%);
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
}

.lh-brochure-top-photo {
    margin: 0;
    min-height: 228px;
    border-bottom: 1px dashed rgba(214, 74, 117, 0.35);
    background:
        linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
        var(--brochure-top-image, url('https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=1700&q=80')) center 26%/cover no-repeat;
}

.lh-brochure-main-columns {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: 100%;
    align-items: start;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 76%, rgba(230, 185, 205, 0.16), transparent 26%),
        radial-gradient(circle at 60% 90%, rgba(240, 221, 229, 0.22), transparent 24%);
}

.lh-brochure-main-columns::after {
    content: "";
    position: absolute;
    inset: 42% 1rem 1rem 1rem;
    border-radius: 34px;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 253, 0.76) 44%, rgba(255, 247, 250, 0.58) 100%),
        var(--brochure-spa-bg, url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=2200&q=80')) center bottom/cover no-repeat;
    opacity: 0.52;
    filter: saturate(0.9) contrast(0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.lh-brochure-center {
    position: relative;
    z-index: 1;
    padding: 0.95rem 1.05rem 1.15rem;
}

.lh-brochure-right {
    position: relative;
    z-index: 1;
    padding: 0.95rem 1.05rem 1.15rem;
    border-left: 1px dashed rgba(214, 74, 117, 0.35);
}

.lh-brochure-rich h1,
.lh-brochure-rich h2,
.lh-brochure-rich h3,
.lh-brochure-rich h4 {
    margin: 0 0 0.32rem;
    color: #d54878;
    line-height: 1.12;
    font-weight: 700;
}

.lh-brochure-left .lh-brochure-rich h2 {
    color: #6f2c48;
    font-size: clamp(1.72rem, 2.35vw, 2.45rem);
    margin-bottom: 0.7rem;
}

.lh-brochure-rich h3 {
    font-size: clamp(1rem, 1.16vw, 1.3rem);
}

.lh-brochure-rich p,
.lh-brochure-rich li {
    margin: 0;
    color: #212430;
    font-size: clamp(0.84rem, 0.94vw, 1.02rem);
    line-height: 1.29;
    font-weight: 500;
}

.lh-brochure-rich p + p {
    margin-top: 0.34rem;
}

.lh-brochure-rich ul,
.lh-brochure-rich ol {
    margin: 0.5rem 0 0;
    padding-left: 1.02rem;
}

.lh-brochure-rich hr {
    border: 0;
    border-top: 1px dashed rgba(214, 74, 117, 0.45);
    margin: 0.7rem 0 0.68rem;
}

.lh-brochure-rich > * + * {
    margin-top: 0.12rem;
}

.lh-brochure-rich-right {
    text-align: center;
}

.lh-brochure-rich-right ul,
.lh-brochure-rich-right ol {
    list-style-position: inside;
    padding-left: 0;
}

.lh-brochure-column-stack {
    display: grid;
    gap: 0.58rem;
}

.lh-brochure-column-stack-right {
    text-align: left;
}

.lh-brochure-category + .lh-brochure-category {
    border-top: 1px dashed rgba(214, 74, 117, 0.45);
    padding-top: 0.56rem;
}

.lh-brochure-category h3,
.lh-brochure-category h4 {
    margin: 0;
}

.lh-brochure-service-stack {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.24rem;
}

.lh-brochure-service-item {
    display: grid;
    gap: 0.22rem;
    position: relative;
}

.lh-brochure-service-item + .lh-brochure-service-item {
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(214, 74, 117, 0.34);
}

.lh-brochure-service-item h4 {
    margin: 0;
    color: #d54878;
    font-size: clamp(0.9rem, 1vw, 1.14rem);
    line-height: 1.12;
    font-weight: 800;
}

.lh-brochure-service-item p {
    margin: 0;
    color: #212430;
    font-size: clamp(0.79rem, 0.88vw, 0.95rem);
    line-height: 1.22;
    font-weight: 500;
}

.lh-brochure-service-copy {
    position: relative;
    display: grid;
    gap: 0.22rem;
    cursor: help;
    outline: none;
}

.lh-brochure-service-copy::after {
    content: attr(data-brochure-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    z-index: 8;
    width: min(320px, 78vw);
    padding: 0.82rem 0.9rem;
    border-radius: 16px;
    background: rgba(28, 36, 52, 0.97);
    color: #f7f9fc;
    font-size: 0.83rem;
    line-height: 1.42;
    font-weight: 600;
    box-shadow: 0 18px 34px rgba(17, 25, 40, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.lh-brochure-service-copy::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: calc(100% + 0.16rem);
    z-index: 8;
    width: 12px;
    height: 12px;
    background: rgba(28, 36, 52, 0.97);
    transform: rotate(45deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.lh-brochure-service-copy:hover::after,
.lh-brochure-service-copy:hover::before,
.lh-brochure-service-copy:focus-visible::after,
.lh-brochure-service-copy:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.lh-brochure-service-copy:hover::after,
.lh-brochure-service-copy:focus-visible::after {
    transform: translateY(0);
}

.lh-brochure-service-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.34rem;
    margin-top: 0.1rem;
}

.lh-brochure-service-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: 0.12rem;
}

.lh-brochure-service-meta span,
.lh-brochure-service-meta strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: clamp(0.72rem, 0.82vw, 0.88rem);
    line-height: 1;
}

.lh-brochure-service-meta span {
    background: rgba(111, 44, 72, 0.08);
    color: #6f2c48;
    font-weight: 700;
}

.lh-brochure-service-meta strong {
    background: rgba(213, 72, 120, 0.12);
    color: #bf2c68;
    font-weight: 800;
}

.lh-brochure-service-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0.34rem 0.78rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #26c4d3 0%, #18afc0 100%);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(24, 175, 192, 0.16);
}

.lh-brochure-service-book:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(24, 175, 192, 0.2);
}

@media (max-width: 640px) {
    .lh-brochure-service-actions {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .lh-brochure-service-book {
        width: fit-content;
    }
}

.lh-brochure-block + .lh-brochure-block {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
}

.lh-brochure-block h3 {
    margin: 0 0 0.3rem;
    color: #d54878;
    font-size: clamp(1rem, 1.16vw, 1.3rem);
    line-height: 1.14;
    font-weight: 700;
}

.lh-brochure-block p {
    margin: 0;
    color: #212430;
    font-size: clamp(0.84rem, 0.94vw, 1.02rem);
    line-height: 1.29;
    font-weight: 500;
}

.lh-brochure-block ul {
    margin: 0.5rem 0 0;
    padding-left: 1.02rem;
}

.lh-brochure-block li {
    color: #212430;
    font-size: clamp(0.83rem, 0.9vw, 0.99rem);
    line-height: 1.24;
}

.lh-brochure-two-cols {
    columns: 2;
    column-gap: 1.1rem;
}

.lh-brochure-align-right {
    text-align: right;
}

.lh-brochure-align-right ul {
    list-style-position: inside;
    padding-left: 0;
}

.lh-brochure-polaroids {
    position: relative;
    margin-top: 0.95rem;
    min-height: 188px;
}

.lh-polaroid {
    position: absolute;
    width: 52%;
    aspect-ratio: 4 / 3;
    border-radius: 5px;
    background: #fff;
    border: 8px solid #fff;
    box-shadow: 0 10px 24px rgba(37, 30, 42, 0.24);
}

.lh-polaroid::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
}

.lh-polaroid-a {
    left: 3%;
    top: 18px;
    transform: rotate(-12deg);
}

.lh-polaroid-a::after {
    background: var(--brochure-polaroid-a, url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?auto=format&fit=crop&w=900&q=80')) center/cover no-repeat;
}

.lh-polaroid-b {
    right: 2%;
    top: 26px;
    transform: rotate(10deg);
}

.lh-polaroid-b::after {
    background: var(--brochure-polaroid-b, url('https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?auto=format&fit=crop&w=900&q=80')) center/cover no-repeat;
}

@media (max-width: 1280px) {
    .lh-brochure-layout {
        grid-template-columns: 1fr;
    }

    .lh-brochure-left {
        border-right: 0;
        border-bottom: 1px dashed rgba(214, 74, 117, 0.35);
    }
}

@media (max-width: 860px) {
    .lh-brochure-main-columns {
        grid-template-columns: 1fr;
    }

    .lh-brochure-main-columns::after {
        display: none;
    }

    .lh-brochure-right {
        border-left: 0;
        border-top: 1px dashed rgba(214, 74, 117, 0.35);
    }

    .lh-brochure-align-right {
        text-align: left;
    }

    .lh-brochure-align-right ul {
        list-style-position: outside;
        padding-left: 1.02rem;
    }

    .lh-brochure-two-cols {
        columns: 1;
    }
}

/* Clients Pro Page */
.admin-body.admin-page-clients-pro .admin-content {
    background: #f6f7fa;
}

.clients-pro-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.12rem;
    align-items: start;
    margin-top: 0.35rem;
}

.clients-pro-side {
    position: sticky;
    top: 5.35rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dee3ee;
    box-shadow: 0 8px 16px rgba(17, 35, 55, 0.05);
}

.clients-pro-side-head {
    min-height: 74px;
    padding: 0 1rem;
    border-bottom: 1px solid #e2e8f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.clients-pro-side-head h2 {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 800;
    color: #111b2b;
}

.clients-pro-side-collapse {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 50%;
    border: 1px solid #d8deea;
    background: #ffffff;
    color: #222f44;
    box-shadow: 0 4px 10px rgba(16, 30, 48, 0.12);
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0;
}

.clients-pro-side-collapse:hover {
    background: #f2f4f9;
    color: #1e2b3f;
}

.clients-pro-side-nav {
    display: grid;
    gap: 0.3rem;
    padding: 0.8rem;
    background: #ffffff;
}

.clients-pro-side-nav a {
    border-radius: 11px;
    min-height: 46px;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    font-size: 1.04rem;
    font-weight: 700;
    color: #1a2739;
    border: 1px solid transparent;
}

.clients-pro-side-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6f0;
}

.clients-pro-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
    color: #1b2230;
}

.clients-pro-side-nav a[aria-disabled='true'] {
    opacity: 0.65;
}

@media (max-width: 640px) {
    .login-card-auth,
    .login-card-forgot,
    .login-card-reset {
        border-radius: 20px;
    }

    .login-card-auth {
        border-radius: 0;
    }

    .login-form-panel,
    .login-brand-panel {
        padding: 1.05rem;
    }

    .login-brand-panel {
        min-height: 300px;
    }

    .login-brand-logo {
        width: 160px;
        margin-bottom: 0.9rem;
    }

    .login-form-panel {
        padding: 1.35rem 1.05rem 1.6rem;
    }

    .login-form-logo {
        width: 130px;
    }

    .login-card-forgot {
        padding: 1.55rem 1.15rem;
    }

    .login-card-forgot .login-recovery-title {
        font-size: 1.28rem;
    }

    .login-recovery-subtitle {
        font-size: 0.95rem;
    }

    .login-recovery-back {
        font-size: 0.94rem;
    }

    .login-card-reset {
        padding: 1.55rem 1rem;
    }

    .login-reset-shell {
        width: min(100%, 360px);
    }

    .login-reset-avatar {
        width: 72px;
        height: 72px;
        margin-bottom: 1rem;
    }

    .login-card-reset .login-reset-title {
        font-size: 1.62rem;
    }

    .login-reset-email,
    .login-reset-rule,
    .login-reset-back {
        font-size: 0.93rem;
    }
}

.clients-pro-side-section {
    margin: 1.15rem 0.72rem 0.2rem;
    color: #111b2b;
    font-size: 1.04rem;
    line-height: 1.3;
    font-weight: 800;
}

.clients-pro-side-divider {
    margin: 0.55rem 0.72rem 0.35rem;
    border: 0;
    border-top: 1px solid #dfe4ec;
}

.clients-pro-main {
    min-width: 0;
}

.clients-pro-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.65rem 0 1rem;
}

.clients-pro-title-wrap h1 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    color: #0f1827;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.clients-pro-title-wrap h1 span {
    width: 29px;
    height: 29px;
    border-radius: 999px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #25354d;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clients-pro-title-wrap p {
    margin: 0.45rem 0 0;
    color: #5f6f84;
    font-size: 1rem;
    font-weight: 500;
}

.clients-pro-title-wrap p a {
    color: #5f56ff;
    font-weight: 700;
}

.clients-pro-title-wrap h1.clients-pro-title-edit {
    display: grid;
    align-items: start;
    justify-items: start;
    gap: 0.18rem;
    line-height: 1.04;
}

.clients-pro-title-wrap h1.clients-pro-title-edit small {
    display: block;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    font-weight: 700;
    color: #5f6f84;
    line-height: 1.2;
    margin-top: 0.02rem;
    letter-spacing: 0;
}

.clients-pro-actions {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    flex-shrink: 0;
}

.clients-pro-options {
    position: relative;
}

.clients-pro-options summary {
    min-height: 50px;
    border-radius: 999px;
    border: 1px solid #d5dde9;
    background: #ffffff;
    color: #111a2a;
    font-size: 1.06rem;
    font-weight: 700;
    padding: 0.68rem 1.22rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    cursor: pointer;
}

.clients-pro-options summary::-webkit-details-marker {
    display: none;
}

.clients-pro-options summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1.05rem;
    line-height: 1;
    color: #232f43;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.clients-pro-options-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.42rem);
    min-width: 210px;
    border-radius: 14px;
    border: 1px solid #d7dfeb;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(14, 28, 45, 0.16);
    padding: 0.4rem;
    display: grid;
    gap: 0.28rem;
    z-index: 9;
}

.clients-pro-options-menu a {
    border-radius: 10px;
    padding: 0.56rem 0.7rem;
    color: #203049;
    font-size: 0.92rem;
    font-weight: 700;
}

.clients-pro-options-menu a:hover {
    background: #eef4fb;
}

.clients-pro-options-menu form {
    margin: 0;
}

.clients-pro-options-menu button.clients-pro-option-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.clients-pro-add-btn {
    min-height: 50px;
    border-radius: 999px;
    padding: 0.7rem 1.42rem;
    background: #0b0b10;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
}

.clients-pro-add-btn:hover {
    background: #1d1e25;
}

.clients-pro-options.clients-pro-add-dropdown summary {
    min-height: 50px;
    border-radius: 999px;
    padding: 0.7rem 1.42rem;
    border: 1px solid #0b0b10;
    background: #0b0b10;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-shadow: none;
}

.clients-pro-options.clients-pro-add-dropdown summary:hover,
.clients-pro-options.clients-pro-add-dropdown[open] summary {
    background: #1d1e25;
    border-color: #1d1e25;
}

.clients-pro-options.clients-pro-add-dropdown summary::after {
    color: #ffffff;
}

.clients-pro-options.clients-pro-add-dropdown .clients-pro-options-menu {
    min-width: 210px;
    padding: 0.55rem 0;
    gap: 0;
}

.clients-pro-options.clients-pro-add-dropdown .clients-pro-options-menu a {
    padding: 0.86rem 1.12rem;
    font-size: 0.96rem;
    font-weight: 700;
    color: #1f2d40;
}

.clients-pro-options.clients-pro-add-dropdown .clients-pro-options-menu a:hover {
    background: #f3f6fb;
}

.clients-pro-form-panel {
    margin-bottom: 1rem;
}

.clients-pro-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.clients-pro-form-head h2 {
    margin: 0;
    color: #17263a;
    font-size: 1.44rem;
    line-height: 1.1;
}

.clients-pro-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.82rem;
    align-items: end;
}

.clients-pro-form-actions {
    justify-content: end;
}

.clients-pro-form-actions button {
    width: 100%;
}

.clients-pro-list-panel {
    overflow: visible;
}

.clients-pro-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.7rem;
    align-items: center;
}

.clients-pro-search {
    min-height: 52px;
    border-radius: 999px;
    border: 1px solid #d5ddea;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    gap: 0.6rem;
}

.clients-pro-search input {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    height: auto;
    color: #1d2a3d;
    font-size: 1rem;
    font-weight: 600;
}

.clients-pro-search input:focus {
    box-shadow: none;
}

.clients-pro-search-icon {
    color: #8a99ad;
    font-size: 1rem;
    line-height: 1;
}

.clients-pro-filter-btn {
    min-height: 50px;
    border-radius: 999px;
    padding-inline: 1.1rem;
    font-size: 1rem;
}

.clients-pro-sort {
    min-width: 295px;
}

.clients-pro-sort select {
    min-height: 52px;
    border-radius: 999px;
    border-color: #d5ddeb;
    padding-inline: 1.1rem 2.3rem;
    color: #1f2c40;
    font-size: 0.98rem;
    font-weight: 700;
}

.clients-pro-table-wrap {
    border: 1px solid #e0e5ef;
    border-radius: 14px;
    overflow: auto;
}

.clients-pro-table {
    width: 100%;
    min-width: 900px;
}

.clients-pro-table th,
.clients-pro-table td {
    border-bottom: 1px solid #e6ebf3;
    padding: 0.9rem 0.72rem;
    vertical-align: middle;
}

.clients-pro-table th {
    color: #0f1828;
    font-size: 0.79rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}

.clients-pro-table tbody tr:hover {
    background: #f8faff;
}

/* Make rows feel clickable (except on inputs/links). */
.clients-pro-row {
    cursor: pointer;
}

.clients-pro-row a,
.clients-pro-row button,
.clients-pro-row input,
.clients-pro-row select,
.clients-pro-row textarea,
.clients-pro-row label,
.clients-pro-row.team-staff-list-row {
    cursor: default;
}

.clients-pro-row [data-staff-pay-indicator],
.clients-pro-row .team-staff-list-pay-shortcuts,
.clients-pro-row .team-staff-list-pay-indicator,
.clients-pro-row .team-staff-list-pay-shortcut,
.clients-pro-row .team-staff-list-pay-blocker {
    cursor: default;
    pointer-events: auto;
}

.clients-pro-row .team-staff-list-open-target {
    cursor: pointer;
}

.clients-pro-table .is-check {
    width: 48px;
    text-align: center;
}

.clients-pro-table .is-check input {
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.clients-pro-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #111a28;
}

.clients-pro-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #eeedf9;
    color: #6656d8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
}

.clients-pro-name-copy {
    display: grid;
    gap: 0.15rem;
}

.clients-pro-name-copy strong {
    color: #101a28;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 800;
}

.clients-pro-name-copy small {
    color: #607188;
    font-size: 0.97rem;
    line-height: 1.2;
    font-weight: 500;
}

.clients-pro-results {
    margin: 1rem 0 0;
    text-align: center;
    color: #697b91;
    font-size: 0.95rem;
    font-weight: 600;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1180px) {
    .clients-pro-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .clients-pro-side {
        position: sticky;
        top: 0;
        align-self: start;
        height: calc(100vh - 68px);
        max-height: calc(100vh - 68px);
        min-height: calc(100vh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
        overflow-y: auto;
        background: #ffffff;
        padding: 0;
    }
}

@media (max-width: 980px) {
    .clients-pro-header {
        flex-direction: column;
        align-items: stretch;
    }

    .clients-pro-actions {
        justify-content: flex-start;
    }

    .clients-pro-toolbar {
        grid-template-columns: 1fr;
    }

    .clients-pro-sort {
        min-width: 0;
        width: 100%;
    }

    .clients-pro-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Clients Pro Refinement */
.admin-body.admin-page-clients-pro .admin-content {
    background: #f7f7f8;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-clients-pro .admin-topbar {
    margin: 0;
}

.clients-pro-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    min-height: calc(100vh - 86px);
    align-items: stretch;
}

.clients-pro-side {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #ffffff;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 1px solid #dedfe4;
    box-shadow: none;
    overflow-y: auto;
}

.clients-pro-side-head {
    min-height: 60px;
    padding: 0 0.85rem;
}

.clients-pro-side-head h2 {
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.clients-pro-side-collapse {
    width: 34px;
    height: 34px;
    min-height: 34px;
    box-shadow: none;
    border-color: #d9dae1;
    font-size: 1.24rem;
}

.clients-pro-side-nav {
    padding: 0.48rem 0.48rem 0.9rem;
    gap: 0.2rem;
    flex: 1 1 auto;
    overflow-y: auto;
    background: #ffffff;
}

.clients-pro-main {
    padding: 0.75rem 1rem 1.2rem;
}

.clients-pro-side-nav a {
    min-height: 40px;
    padding: 0.62rem 0.72rem;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 10px;
}

.clients-pro-header {
    margin: 0.65rem 0 0.95rem;
}

.clients-pro-header.services-editor-top {
    margin: 0 0 0.6rem;
}

.clients-pro-title-wrap h1 {
    font-size: clamp(1.2rem, 1.45vw, 1.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.clients-pro-title-wrap h1 span {
    width: 27px;
    height: 27px;
    font-size: 0.8rem;
}

.clients-pro-title-wrap p {
    margin-top: 0.3rem;
    font-size: 0.88rem;
    font-weight: 650;
    color: #6c7280;
}

.clients-pro-title-wrap h1.clients-pro-title-edit small {
    font-size: 0.9rem;
}

.clients-pro-actions {
    gap: 0.56rem;
}

.clients-pro-options summary {
    min-height: 42px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-color: #d5d7df;
}

.clients-pro-options[open] summary::after {
    content: 'expand_less';
}

.clients-pro-options-menu {
    top: calc(100% + 0.32rem);
    min-width: 218px;
    border-radius: 14px;
    border: 1px solid #e0e2e9;
    box-shadow: 0 15px 28px rgba(21, 30, 45, 0.16);
    padding: 0.4rem;
    gap: 0.12rem;
}

.clients-pro-options-label {
    margin: 0.16rem 0.3rem 0.1rem;
    color: #646d7d;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.clients-pro-options-sep {
    height: 1px;
    background: #eceef3;
    margin: 0.22rem 0;
}

.clients-pro-option-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 10px;
    padding: 0.58rem 0.62rem;
    color: #151d2d;
    font-size: 0.91rem;
    font-weight: 700;
}

.clients-pro-option-item:hover {
    background: #f2f4f9;
}

.clients-pro-option-ico {
    width: 28px;
    min-width: 28px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4f5b6f;
    font-size: 0.98rem;
    font-weight: 800;
    border-radius: 7px;
}

.clients-pro-option-ico[data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
}

.clients-pro-add-btn {
    min-height: 42px;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.clients-pro-list-panel {
    padding: 0.8rem;
    border-radius: 14px;
    box-shadow: none;
}

.clients-pro-toolbar {
    background: #f1f2f4;
    border-radius: 12px;
    padding: 0.58rem;
    gap: 0.56rem;
}

.clients-pro-search {
    min-height: 40px;
    border-color: #d8dae1;
}

.clients-pro-search input {
    font-size: 0.94rem;
    font-weight: 600;
}

.clients-pro-filter-btn {
    min-height: 40px;
    font-size: 0.9rem;
    padding-inline: 0.9rem;
}

.clients-pro-sort {
    min-width: 270px;
}

.clients-pro-sort select {
    min-height: 40px;
    font-size: 0.9rem;
    font-weight: 700;
}

.clients-pro-table-wrap {
    border: 0;
    border-radius: 0;
}

.clients-pro-table {
    min-width: 840px;
}

.clients-pro-table th,
.clients-pro-table td {
    padding: 0.72rem 0.62rem;
}

.clients-pro-table th {
    font-size: 0.88rem;
    font-weight: 800;
    color: #111827;
}

.clients-pro-table td {
    font-size: 0.9rem;
    color: #222b39;
}

.clients-pro-table .is-check {
    width: 44px;
}

.clients-pro-table .is-check input {
    width: 21px;
    height: 21px;
    border-radius: 6px;
}

.clients-pro-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
    overflow: hidden;
}

.clients-pro-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clients-pro-avatar img[hidden] {
    display: none !important;
}

.clients-pro-avatar.is-photo {
    background: transparent;
    color: transparent;
}

.clients-pro-name-copy strong {
    font-size: 0.99rem;
}

.clients-pro-name-copy small {
    font-size: 0.91rem;
    color: #617087;
}

.clients-pro-results {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.clients-pro-profile-panel {
    padding: 0.85rem;
    border-radius: 14px;
    box-shadow: none;
}

.clients-pro-profile-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.clients-pro-profile-nav {
    border: 1px solid #dedfe4;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.72rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.clients-pro-profile-nav h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #171d29;
    font-weight: 800;
}

.clients-pro-profile-nav a {
    min-height: 40px;
    border-radius: 10px;
    padding: 0.62rem 0.8rem;
    display: flex;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1c2534;
    margin: 0;
}

.clients-pro-profile-nav a:hover {
    background: #f3f4f8;
}

.clients-pro-profile-nav a.is-active {
    background: #eeedf9;
    color: #22263b;
}

.clients-pro-profile-nav hr {
    border: 0;
    height: 1px;
    background: #e8eaf0;
    margin: 0.5rem 0;
}

.clients-pro-profile-main {
    min-width: 0;
}

.clients-pro-profile-head h2 {
    margin: 0;
    font-size: 1.52rem;
    letter-spacing: -0.015em;
    line-height: 1.02;
    color: #131a27;
    display: inline-block;
    position: relative;
}

.clients-pro-profile-head h2::after {
    content: '';
    display: block;
    width: 92px;
    height: 3px;
    margin-top: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #6358e7 0%, #26c5da 100%);
    box-shadow: 0 3px 10px rgba(64, 90, 160, 0.22);
}

.clients-pro-profile-head p {
    margin: 0.34rem 0 0;
    font-size: 0.95rem;
    color: #6a7281;
    font-weight: 600;
    max-width: 720px;
}

.clients-pro-avatar-wrap {
    margin-top: 0.72rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.86rem;
    flex-wrap: wrap;
}

.clients-pro-avatar-lg {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #ecebf9;
    color: #6358e7;
    font-size: 2rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.clients-pro-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clients-pro-avatar-lg img[hidden] {
    display: none !important;
}

.clients-pro-avatar-lg-interactive {
    cursor: pointer;
    border: 2px dashed #cfd7ea;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.clients-pro-avatar-lg-interactive:hover {
    border-color: #9fb0d6;
    box-shadow: 0 8px 18px rgba(64, 82, 113, 0.16);
    transform: translateY(-1px);
}

.clients-pro-avatar-lg-interactive.has-photo {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.clients-pro-avatar-lg-interactive.has-photo:hover {
    border: 0;
    box-shadow: none;
    transform: none;
}

.clients-pro-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.clients-avatar-action-btn {
    min-height: 38px !important;
    padding: 0.4rem 0.78rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d6dde8 !important;
    box-shadow: none !important;
}

.clients-avatar-action-btn:hover,
.clients-avatar-action-btn:focus-visible {
    background: #f3f6fa !important;
    color: #0f172a !important;
    border-color: #c7d0de !important;
}

/* Ajustes para que la cabecera y avatar en `admin/clients.php` queden como en `admin/sales.php` */
.admin-body.admin-page-clients-pro .clients-pro-header {
    /* Aumentar espacio superior para que el encabezado quede un poco más abajo */
    margin: 1.15rem 0 1rem;
}

.clients-camera-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: transparent;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.clients-camera-modal-backdrop[hidden] {
    display: none !important;
}

.clients-camera-modal {
    width: min(520px, 100%);
    border-radius: 16px;
    border: 1px solid #d6dce7;
    background: #ffffff;
    box-shadow: 0 20px 42px rgba(14, 23, 36, 0.28);
    overflow: hidden;
}

.clients-camera-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.72rem 0.9rem;
    border-bottom: 1px solid #e7ebf2;
}

.clients-camera-modal-head h3 {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 800;
    color: #121a29;
}

.clients-camera-close {
    width: 34px;
    min-height: 34px !important;
    height: 34px;
    border-radius: 9px;
    border: 1px solid #d7deea;
    background: #ffffff;
    color: #243149;
    font-size: 1.42rem;
    line-height: 1;
    padding: 0;
}

.clients-camera-close:hover {
    background: #f3f6fb;
}

.clients-camera-body {
    padding: 0.9rem;
}

.clients-camera-body video {
    width: 100%;
    display: block;
    border-radius: 12px;
    border: 1px solid #d7deea;
    background: #0f1623;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.clients-camera-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.56rem;
    padding: 0.75rem 0.9rem 0.9rem;
}

.clients-pro-profile-form {
    display: grid;
    gap: 0.65rem;
}

.clients-pro-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.86rem 0.82rem;
}

.clients-pro-fields-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.clients-pro-phone-group {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.56rem;
}

.clients-pro-prefix-select {
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.clients-pro-date-year {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 0.56rem;
}

.clients-pro-profile-form .form-group label {
    font-size: 0.86rem;
    letter-spacing: 0;
    color: #2a3446;
    text-transform: none;
    font-weight: 700;
}

.clients-pro-profile-form input,
.clients-pro-profile-form textarea {
    min-height: 46px;
    border-radius: 9px;
    border-color: #d8dbe3;
    font-size: 0.93rem;
    color: #1f2a39;
    font-weight: 600;
    background: #ffffff;
}

.admin-body.admin-page-team-staff .clients-pro-profile-form .team-staff-profile-password-form .team-staff-password-field input {
    min-height: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0;
}

.clients-pro-profile-form select {
    min-height: 46px;
    border-radius: 9px;
    border-color: #d8dbe3;
    font-size: 0.93rem;
    color: #1f2a39;
    font-weight: 600;
    background: #ffffff;
}

.clients-pro-field-year input {
    max-width: 120px;
}

.clients-pro-date-input-wrap {
    position: relative;
}

.clients-pro-date-input-wrap input {
    padding-right: 2.2rem;
}

.clients-pro-date-input-wrap #birth_day_month_display {
    cursor: pointer;
}

.clients-pro-date-picker-native {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.clients-pro-date-input-wrap::after {
    content: 'calendar_month';
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #7d8798;
    pointer-events: none;
}

.clients-pro-profile-form textarea {
    min-height: 112px;
}

.clients-pro-divider {
    border: 0;
    height: 1px;
    background: #e5e8ef;
    margin: 2.1rem 0 0.85rem;
}

.clients-pro-profile-form h3 {
    margin: 0;
    font-size: 1.22rem;
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: #151d2b;
}

.clients-emergency-block {
    display: grid;
    gap: 0.78rem;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    padding: 1rem 1rem 0.96rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    box-shadow: 0 8px 20px rgba(18, 30, 48, 0.06);
}

.clients-emergency-block h3 {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.1;
    color: #141f31;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.clients-emergency-block h3::before {
    content: 'contacts';
    font-family: 'Material Symbols Outlined';
    font-size: 1.02rem;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5f54e8;
    background: rgba(95, 84, 232, 0.14);
}

.clients-emergency-block .form-group {
    margin-bottom: 0;
}

.clients-emergency-form .clients-pro-divider {
    margin: 0.36rem 0 0.24rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(99, 88, 231, 0.34) 0%, rgba(38, 197, 218, 0.28) 100%);
}

.clients-emergency-form .clients-pro-profile-actions {
    margin-top: 0.45rem;
    padding-top: 0.66rem;
    border-top: 1px solid #e3e8f2;
}

.clients-settings-form {
    gap: 0.85rem;
}

.clients-settings-group {
    display: grid;
    gap: 0.54rem;
}

.clients-settings-group h3 {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.1;
    color: #121a29;
    font-weight: 800;
}

.clients-settings-group .clients-pro-muted {
    margin: 0 0 0.34rem;
}

.clients-settings-check {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-height: 36px;
    margin: 0;
    cursor: pointer;
    color: #1a2333;
    font-size: 0.97rem;
    font-weight: 650;
    letter-spacing: 0;
}

.clients-settings-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #6358e7;
    cursor: pointer;
}

button.is-saving,
input[type="submit"].is-saving {
    cursor: wait !important;
    pointer-events: none !important;
    opacity: 0.96;
}

button.is-disabled-save,
input[type="submit"].is-disabled-save {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.58 !important;
    filter: saturate(0.56);
    box-shadow: none !important;
}

.save-overlay-open {
    cursor: progress;
}

.global-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
}

.global-save-overlay[hidden] {
    display: none !important;
}

.global-save-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(245, 247, 251, 0.58);
    backdrop-filter: blur(6px);
}

.global-save-overlay-dialog {
    position: relative;
    min-width: min(280px, calc(100vw - 32px));
    padding: 1.35rem 1.4rem 1.2rem;
    border: 1px solid rgba(214, 222, 236, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 60px rgba(15, 23, 37, 0.2);
    display: grid;
    justify-items: center;
    gap: 0.8rem;
}

.global-save-overlay-spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(31, 198, 215, 0.16);
    border-top-color: rgba(31, 198, 215, 0.98);
    border-right-color: rgba(99, 88, 231, 0.78);
    animation: clientsDrawerSpin 0.8s linear infinite;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.28);
}

.global-save-overlay-label {
    margin: 0;
    color: #1a2537;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.01em;
}

.btn-save-label {
    display: inline-flex;
    align-items: center;
}

.btn-save-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.btn-save-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.28;
    animation: btn-save-dot-pulse 1s ease-in-out infinite;
}

.btn-save-dots span:nth-child(2) {
    animation-delay: 0.14s;
}

.btn-save-dots span:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes btn-save-dot-pulse {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.25;
    }
    40% {
        transform: translateY(-2px);
        opacity: 0.92;
    }
}

.clients-pro-muted {
    margin: 0 0 0.26rem;
    font-size: 0.94rem;
    color: #697485;
    font-weight: 600;
}

.clients-pro-additional-grid {
    margin-top: 0.65rem;
}

.clients-pro-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.clients-pro-aux-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: #6358e7;
}

.clients-pro-aux-link:hover {
    text-decoration: underline;
}

.clients-pro-field-help {
    margin: 0.42rem 0 0;
    font-size: 0.86rem;
    line-height: 1.35;
    color: #697485;
    font-weight: 600;
}

.clients-pro-field-help .clients-pro-aux-link {
    margin-left: 0.2rem;
    font-size: 0.86rem;
}

.clients-pro-field-counter {
    font-size: 0.82rem;
    font-weight: 700;
    color: #6d7687;
}

.clients-address-form {
    max-width: 860px;
}

.clients-addresses-page {
    display: grid;
    gap: 0.86rem;
}

.clients-addresses-list {
    display: grid;
    gap: 0.7rem;
}

.clients-address-card {
    position: relative;
    border: 1px solid #e1e4eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.85rem 3rem 0.85rem 0.85rem;
}

.clients-address-card-main strong {
    display: block;
    font-size: 1.02rem;
    color: #111827;
}

.clients-address-card-main p {
    margin: 0.18rem 0 0;
    font-size: 0.92rem;
    color: #394357;
    line-height: 1.35;
}

.clients-address-card-menu {
    position: absolute;
    top: 0.52rem;
    right: 0.62rem;
    z-index: 30;
}

.clients-address-card-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #dce0e8;
    background: #fff;
    display: grid;
    place-items: center;
    color: #3a4356;
    font-size: 1.1rem;
}

.clients-address-card-menu > summary::-webkit-details-marker {
    display: none;
}

.clients-address-card-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 148px;
    border: 1px solid #dce0e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 37, 0.14);
    padding: 0.24rem;
    z-index: 20;
}

.clients-address-card-menu-list form {
    margin: 0;
}

.clients-address-card-menu-list a,
.clients-address-card-menu-list button {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: 0.48rem 0.62rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #212b3c;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    line-height: 1.25;
    white-space: nowrap;
}

.clients-address-card-menu-list a:hover,
.clients-address-card-menu-list button:hover {
    background: #f2f4f8;
}

.clients-address-card-menu-list form button {
    color: #bf2f2f;
}

.clients-address-card-menu-list form button:hover {
    background: #fff2f2;
}

.clients-address-add-link {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: #6358e7;
    font-size: 0.95rem;
    font-weight: 700;
}

.clients-address-add-link span {
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: 1px solid #a9a0f1;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    line-height: 1;
}

.clients-address-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 1rem 1rem;
}

.clients-address-modal {
    width: min(470px, 100%);
    max-height: calc(100vh - 5rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 16px;
    border: 1px solid #dce0e8;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(18, 27, 40, 0.2);
    overflow: hidden;
}

.clients-address-modal-head {
    padding: 0.9rem 1rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eceef4;
}

.clients-address-modal-head h3 {
    margin: 0;
    font-size: 1.78rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #121a2a;
}

.clients-address-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #202a3d;
    font-size: 1.35rem;
    line-height: 1;
}

.clients-address-modal-close:hover {
    background: #f2f4f8;
}

.clients-address-modal-body {
    overflow: auto;
    padding: 0.72rem 1rem 0.2rem;
    display: grid;
    gap: 0.74rem;
}

.clients-address-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
}

.clients-address-type {
    display: block;
}

.clients-address-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.clients-address-type-box {
    border: 1px solid #d8dce5;
    border-radius: 12px;
    min-height: 98px;
    padding: 0.72rem;
    display: grid;
    place-items: center;
    gap: 0.32rem;
    background: #ffffff;
}

.clients-address-type-icon::before {
    content: attr(data-icon);
    font-family: 'Material Symbols Outlined';
    font-size: 1.32rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #1f2a3d;
}

.clients-address-type-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #131b29;
}

.clients-address-type input:checked + .clients-address-type-box {
    border-color: #6358e7;
    box-shadow: inset 0 0 0 1px #6358e7;
    background: #fbfaff;
}

.clients-address-extra {
    border: 1px solid #e1e5ed;
    border-radius: 12px;
    padding: 0.92rem;
    background: #ffffff;
}

.clients-address-extra-head {
    margin-bottom: 0.62rem;
    color: #131b29;
    font-size: 0.96rem;
}

.clients-address-actions {
    justify-content: space-between;
    border-top: 1px solid #eceef4;
    margin-top: 0;
    padding: 0.68rem 1rem;
    background: #ffffff;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.staff-address-modal-backdrop {
    background: rgba(15, 23, 42, 0.18);
    align-items: center;
    padding: 1rem;
}

.staff-address-modal {
    width: min(720px, 100%);
    max-height: calc(100vh - 2.8rem);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.staff-address-modal .clients-address-modal-head {
    padding: 1.85rem 2rem 1rem;
    border-bottom: 0;
}

.staff-address-modal .clients-address-modal-head h3 {
    font-size: 1.15rem;
    line-height: 1.2;
}

.staff-address-modal .clients-address-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 1.55rem;
}

.staff-address-modal .clients-address-modal-body {
    padding: 0.45rem 2rem 1.5rem;
    gap: 1.3rem;
}

.staff-address-modal .form-group {
    display: grid;
    gap: 0.55rem;
}

.staff-address-modal .form-group label {
    color: #101828;
    font-size: 0.98rem;
    font-weight: 700;
}

.staff-address-modal .form-group input {
    min-height: 48px;
    border-radius: 10px;
}

.staff-address-modal .form-group select,
.staff-address-modal .clients-pro-prefix-select {
    min-height: 48px;
    border-radius: 10px;
}

.staff-compact-page,
.staff-emergency-page {
    gap: 0.72rem;
    align-content: start;
}

.staff-emergency-modal .clients-address-modal-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1rem;
    padding-top: 0.7rem;
}

.staff-emergency-modal .staff-emergency-phone-group {
    grid-template-columns: 96px minmax(0, 1fr);
}

.staff-address-modal .business-centers-location-input-wrap input,
.staff-address-modal #staff_address_line {
    padding-left: 3.35rem !important;
}

.staff-address-modal .business-centers-location-input-wrap .material-symbols-outlined {
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.05rem;
    line-height: 1;
    z-index: 2;
}

.staff-address-modal .business-centers-location-suggestions {
    margin-top: 0.4rem;
}

.staff-address-modal .business-centers-suggestion-btn {
    display: block;
    text-align: left;
    justify-content: flex-start;
}

.staff-address-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    border-top: 0;
    margin-top: 0;
    padding: 0 2rem 1.8rem;
    background: transparent;
    position: static;
}

.staff-address-actions .btn,
.staff-address-actions button {
    width: 100%;
    min-height: 54px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
}

.staff-address-actions .btn-outline {
    border-color: #d0d5dd;
    color: #101828;
    background: #ffffff;
}

.staff-address-actions .btn-outline:hover {
    background: #f8fafc;
}

.staff-address-submit {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.staff-address-submit:hover {
    background: #000000;
}

.clients-pro-profile-actions {
    margin-top: 0.4rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.58rem;
}

.clients-pro-profile-actions.clients-pro-profile-actions-float {
    position: fixed;
    left: calc(78px + 210px + 1rem);
    right: 1rem;
    bottom: 0.75rem;
    z-index: 44;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.7rem 0.86rem;
    border: 1px solid rgba(101, 147, 182, 0.42);
    border-radius: 14px;
    background: linear-gradient(105deg, rgba(10, 18, 30, 0.96) 0%, rgba(14, 34, 54, 0.96) 52%, rgba(18, 64, 92, 0.96) 100%);
    box-shadow: 0 12px 24px rgba(8, 16, 28, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.admin-body.admin-page-clients-pro .clients-pro-profile-main > .clients-pro-profile-form {
    padding-bottom: 92px;
}

.clients-pro-profile-actions .btn,
.clients-pro-profile-actions button {
    min-height: 42px;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
}

.clients-pro-profile-actions-float .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #e8f2ff;
    border-color: rgba(180, 205, 232, 0.45);
}

.clients-pro-profile-actions-float .btn-outline:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(208, 224, 245, 0.64);
}

.admin-body.admin-page-clients-embed {
    background: #f4f6f9;
}

.admin-body.admin-page-clients-embed .admin-sidebar,
.admin-body.admin-page-clients-embed .admin-topbar,
.admin-body.admin-page-clients-embed .clients-pro-side,
.admin-body.admin-page-clients-embed .clients-pro-header {
    display: none !important;
}

.admin-body.admin-page-clients-embed .admin-layout,
.admin-body.admin-page-clients-embed .admin-content {
    display: block;
    min-height: 100vh;
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
}

.admin-body.admin-page-clients-embed .admin-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100vw;
}

.admin-body.admin-page-clients-embed .flash-wrap {
    display: none;
}

.admin-body.admin-page-clients-embed .clients-pro-layout {
    display: block;
    min-height: 100vh;
    padding: 0;
}

.admin-body.admin-page-clients-embed .clients-pro-main {
    padding: 0;
    background: #ffffff;
    min-height: 100vh;
    margin-left: 0 !important;
    width: 100%;
}

.admin-body.admin-page-clients-embed,
.admin-body.admin-page-clients-embed .admin-content,
.admin-body.admin-page-clients-embed .clients-hub-main,
.admin-body.admin-page-clients-embed .clients-hub-card,
.admin-body.admin-page-clients-embed .clients-hub-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.admin-body.admin-page-clients-embed::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .admin-content::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .clients-hub-main::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .clients-hub-card::-webkit-scrollbar,
.admin-body.admin-page-clients-embed .clients-hub-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.clients-embed-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2.5rem;
    background: #ffffff;
    border-bottom: 1px solid #eceff4;
    position: sticky;
    top: 0;
    z-index: 6;
}

.clients-embed-topbar-copy h1 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 800;
}

.clients-embed-topbar-copy p {
    margin: 0.22rem 0 0;
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.4;
}

.clients-embed-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn,
.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline {
    min-width: 5.5rem;
    border-radius: 12px;
    box-shadow: none;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline {
    background: #ffffff;
    color: #111827;
    border-color: #d6dde8;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline:hover,
.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn-outline:focus-visible {
    background: #f3f6fa;
    color: #0f172a;
    border-color: #c7d0de;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn:not(.btn-outline) {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn:not(.btn-outline):hover,
.admin-body.admin-page-clients-embed .clients-embed-topbar-actions .btn:not(.btn-outline):focus-visible {
    background: #1f2937;
    border-color: #1f2937;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-shell {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 2.75rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem 2.5rem 3rem;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-nav {
    position: sticky;
    top: 5.9rem;
    align-self: start;
    background: #ffffff;
    border: 1px solid #e6ecf3;
    border-radius: 26px;
    padding: 1.7rem 1.35rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.admin-body.admin-page-clients-embed .clients-pro-profile-main {
    min-width: 0;
    width: 100%;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-form {
    gap: 0.9rem;
}

.admin-body.admin-page-clients-embed .clients-pro-profile-panel {
    min-height: calc(100vh - 84px);
}

.admin-body.admin-page-clients-embed .clients-pro-profile-actions.clients-pro-profile-actions-float {
    display: none;
}

.admin-body.admin-page-clients-embed .clients-hub-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
    height: calc(100vh - 84px);
    min-height: calc(100vh - 84px);
    overflow: hidden;
}

.admin-body.admin-page-clients-embed .clients-hub-layout {
    width: 100%;
    max-width: none;
    height: calc(100vh - 84px);
    min-height: calc(100vh - 84px);
    grid-template-columns: 280px 190px minmax(0, 1fr);
    overflow: hidden;
}

.admin-body.admin-page-clients-embed .clients-hub-card,
.admin-body.admin-page-clients-embed .clients-hub-nav,
.admin-body.admin-page-clients-embed .clients-hub-main {
    min-width: 0;
}

.admin-body.admin-page-clients-embed .clients-hub-main {
    height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-body.admin-page-clients-embed .clients-hub-close {
    display: none;
}

.admin-body.admin-page-clients-embed .clients-hub-card-actions {
    display: block;
}

.admin-body.admin-page-clients-embed .clients-hub-actions-dropdown,
.admin-body.admin-page-clients-embed .clients-hub-actions-dropdown summary {
    width: 100%;
}

.admin-body.admin-page-clients-embed .clients-hub-main.is-client-data .clients-hub-kv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 2.35rem;
}

.admin-body.admin-page-clients-embed .clients-hub-main.is-client-data .clients-hub-kv-wide {
    grid-column: 1 / -1;
}

.admin-body.admin-page-clients-embed .clients-hub-actions-dropdown summary {
    justify-content: space-between;
}

.admin-body.admin-page-clients-embed .clients-hub-actions-menu {
    min-width: 100%;
    width: 100%;
    max-width: none;
}

@media (max-width: 1180px) {
    .clients-pro-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .clients-pro-side {
        position: sticky;
        top: 0;
        align-self: start;
        height: calc(100vh - 68px);
        max-height: calc(100vh - 68px);
        min-height: calc(100vh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
        overflow-y: auto;
        background: #ffffff;
        padding: 0;
    }

    .clients-pro-profile-shell {
        grid-template-columns: 1fr;
    }

    .clients-pro-profile-actions.clients-pro-profile-actions-float {
        left: calc(78px + 1rem);
        right: 1rem;
        bottom: 0.7rem;
        padding: 0.62rem 0.72rem;
        border-radius: 12px;
    }
}

@media (max-width: 980px) {
    .admin-body.admin-page-clients-pro .admin-topbar {
        margin: 0;
    }

    .clients-pro-header {
        flex-direction: column;
        align-items: stretch;
    }

    .clients-pro-actions {
        justify-content: flex-start;
    }

    .clients-pro-toolbar {
        grid-template-columns: 1fr;
    }

    .clients-pro-sort {
        min-width: 0;
        width: 100%;
    }

    .clients-pro-fields-2 {
        grid-template-columns: 1fr;
    }

    .clients-pro-profile-form-grid {
        grid-template-columns: 1fr;
    }

    .clients-pro-phone-group {
        grid-template-columns: 1fr;
    }

    .admin-body.admin-page-team-staff .team-staff-service-row {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
    }

    .admin-body.admin-page-team-staff .team-staff-service-price,
    .admin-body.admin-page-team-staff .team-staff-service-row .team-staff-nav-count {
        grid-column: 2;
        justify-self: start;
    }

    .clients-pro-date-year {
        grid-template-columns: 1fr;
    }

    .clients-pro-field-year input {
        max-width: none;
    }

    .clients-address-type-grid {
        grid-template-columns: 1fr;
    }

    .staff-address-modal {
        width: 100%;
        max-height: calc(100vh - 1.6rem);
        border-radius: 20px;
    }

    .staff-address-modal .clients-address-modal-head,
    .staff-address-modal .clients-address-modal-body,
    .staff-address-actions {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .staff-emergency-modal .clients-address-modal-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .staff-address-actions {
        grid-template-columns: 1fr;
        padding-bottom: 1.2rem;
    }

    .clients-pro-profile-nav {
        position: static;
        top: auto;
    }

    .admin-body.admin-page-team-staff .team-staff-profile-nav {
        position: static;
        top: auto;
        max-height: none;
        overflow-y: visible;
    }

    .admin-body.admin-page-team-staff .team-staff-payroll-copy-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-body.admin-page-team-staff .team-staff-payroll-copy-controls .btn {
        width: 100%;
        justify-content: center;
    }

    .clients-pro-profile-actions.clients-pro-profile-actions-float {
        left: 0.82rem;
        right: 0.82rem;
        bottom: 0.62rem;
    }

    /* Mobile: left menu should end at last item (no long blank area) */
    .admin-body.admin-page-clients-pro .clients-pro-side {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side-nav {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible;
        padding-bottom: 0.55rem;
    }
}

/* Clients sidebar fixed on desktop */
@media (min-width: 981px) {
    .admin-body.admin-page-clients-pro .clients-pro-layout {
        display: block;
        min-height: calc(100vh - 68px);
    }

    .admin-body.admin-page-clients-pro .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
        z-index: 14;
        background: #ffffff;
        padding: 0;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-clients-pro .clients-pro-main {
        margin-left: 210px;
        padding: 0.75rem 1rem 1.2rem;
    }
}

/* Clients side panel: force full-height to viewport bottom */
.admin-body.admin-page-clients-pro .admin-content {
    padding-bottom: 0 !important;
}

.admin-body.admin-page-clients-pro .clients-pro-layout {
    min-height: calc(100vh - 68px);
}

.admin-body.admin-page-clients-pro .clients-pro-side {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 981px) {
    .admin-body.admin-page-clients-pro .clients-pro-side {
        position: fixed !important;
        top: 68px;
        left: 78px;
        bottom: 0;
        width: 210px;
        height: auto;
        min-height: 0;
        max-height: none;
        border-top: 0;
        border-right: 1px solid #dedfe4;
        border-bottom: 0;
        border-left: 0;
        background: #ffffff;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        z-index: 14;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side-nav {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .admin-body.admin-page-clients-pro .clients-pro-main {
        margin-left: 210px;
    }
}

@media (max-width: 980px) {
    .inventory-drawer .clients-drawer-panel {
        width: 100%;
    }

    .admin-body.admin-page-clients-pro .clients-pro-side {
        position: sticky !important;
        top: 0;
        left: auto;
        bottom: auto;
        width: auto;
        height: calc(100dvh - 68px);
        min-height: calc(100dvh - 68px);
        max-height: calc(100dvh - 68px);
        border-right: 0;
        border-bottom: 1px solid #dedfe4;
    }
}

/* Clients left panel: keep full white area to bottom */
.admin-body.admin-page-clients-pro .clients-pro-side {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.admin-body.admin-page-clients-pro .clients-pro-side-head,
.admin-body.admin-page-clients-pro .clients-pro-side-nav {
    background: #ffffff !important;
}

.admin-body.admin-page-clients-pro .clients-pro-side-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch;
    align-content: flex-start;
    flex: 1 1 auto !important;
    gap: 0.22rem;
    min-height: calc(100vh - 68px - 60px);
    min-height: calc(100dvh - 68px - 60px);
}

@media (max-width: 980px) {
    .admin-body.admin-page-clients-pro .clients-pro-side {
        border-bottom: 0 !important;
    }
}

/* Clients Drawer overlay */
body.clients-drawer-open {
    overflow: hidden;
}

.admin-body.admin-page-clients-pro.clients-drawer-open .admin-content,
.admin-body.admin-page-inventory-catalog.clients-drawer-open .admin-content {
    overflow: hidden;
}

/* Marketing module */
.admin-body.admin-page-marketing .clients-pro-layout {
    gap: 1.55rem;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .clients-pro-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .clients-pro-side {
    display: none;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .clients-pro-main {
    padding-inline: clamp(1.35rem, 2.8vw, 2.8rem);
    max-width: none;
}

.admin-body.admin-page-marketing.marketing-offer-create-open .admin-content {
    overflow: hidden;
}

.marketing-pro-page {
    display: grid;
    gap: 1.35rem;
}

.marketing-pro-header {
    margin-bottom: 0;
}

.marketing-list-panel {
    padding: 1rem;
}

.marketing-toolbar {
    gap: 0.9rem;
}

.marketing-filter-select {
    min-width: 220px;
}

.marketing-empty-state {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
    padding: 2rem 1rem 1.25rem;
}

.marketing-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(56, 189, 248, 0.18));
    color: #4f46e5;
    font-size: 1.7rem;
}

.marketing-empty-state h3 {
    margin: 0;
    color: #132238;
    font-size: 1.18rem;
}

.marketing-empty-state p {
    max-width: 56ch;
    margin: 0;
    color: #64748b;
}

.marketing-offer-list {
    display: grid;
    gap: 0.95rem;
    margin-top: 0.95rem;
}

.marketing-offer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 20px;
    background: #fff;
}

.marketing-offer-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.marketing-offer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.1));
    color: #5b4bff;
}

.marketing-offer-copy {
    min-width: 0;
}

.marketing-offer-copy h3 {
    margin: 0 0 0.2rem;
    color: #132238;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}

.marketing-offer-copy p {
    margin: 0;
    color: #516173;
    line-height: 1.45;
}

.marketing-offer-copy small {
    display: inline-block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 600;
}

.marketing-offer-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marketing-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    font-size: 0.87rem;
    font-weight: 800;
    white-space: nowrap;
}

.marketing-status-pill.is-active {
    background: #e8f9ea;
    color: #1e8a3f;
    border: 1px solid #b9ebc0;
}

.marketing-status-pill.is-draft {
    background: #fff7e8;
    color: #b76f00;
    border: 1px solid #f8dfac;
}

.marketing-status-pill.is-inactive {
    background: #eef2f7;
    color: #64748b;
    border: 1px solid #d7e0ea;
}

.marketing-offer-sales {
    display: grid;
    justify-items: end;
    gap: 0.15rem;
    min-width: 120px;
}

.marketing-offer-sales span {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

.marketing-offer-sales strong {
    color: #132238;
    font-size: 1.04rem;
}

.marketing-offer-actions summary {
    min-height: 40px;
}

.marketing-offer-actions .clients-pro-options-menu form {
    margin: 0;
}

.marketing-editor-card {
    padding: 1.35rem;
}

.marketing-editor-head h2 {
    margin: 0;
    color: #132238;
    font-size: 1.22rem;
}

.marketing-editor-head p {
    margin: 0.35rem 0 0;
    color: #64748b;
}

.marketing-offer-form {
    display: grid;
    gap: 1.1rem;
}

.marketing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.1rem;
}

.marketing-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding-top: 0.4rem;
}

.marketing-pro-page.is-wizard {
    gap: 0;
}

.marketing-create-wizard {
    display: grid;
    gap: 2.35rem;
    min-height: calc(100vh - 120px);
    max-width: 1360px;
    margin: 0 auto;
    padding: 0.35rem 0 1.4rem;
}

.marketing-create-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 3400;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 1.2rem 6rem;
    background: #ffffff;
}

.marketing-create-topbar {
    display: grid;
    gap: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 -1.2rem 1rem;
    padding: 1rem 1.35rem 1.05rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-create-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.marketing-create-progress span {
    height: 4px;
    border-radius: 999px;
    background: #eceff4;
}

.marketing-create-progress span.is-active {
    background: #6c63ff;
}

.marketing-create-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.marketing-create-back {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid #d9e0eb;
    background: #fff;
    color: #132238;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.marketing-create-toolbar-copy strong {
    display: block;
    color: #132238;
    font-size: 1.28rem;
    font-weight: 800;
}

.marketing-create-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
    justify-content: flex-end;
    margin-left: auto;
}

.marketing-create-surface {
    display: grid;
    align-content: start;
    min-height: calc(100vh - 270px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.marketing-create-step {
    display: grid;
}

.marketing-create-step[hidden] {
    display: none !important;
}

.marketing-create-wizard [data-marketing-type-only][hidden] {
    display: none !important;
}

.marketing-step-shell {
    width: min(760px, 100%);
    max-width: 100%;
    margin: 0 auto;
}

.marketing-step-shell-form {
    width: min(760px, 100%);
    max-width: 100%;
    margin: 0 auto;
}

.marketing-step-copy {
    margin-bottom: 2.35rem;
}

.marketing-step-copy h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.marketing-step-copy p {
    max-width: 64ch;
    margin: 0.85rem 0 0;
    color: #64748b;
    font-size: 1.18rem;
    line-height: 1.62;
}

.marketing-offer-type-list {
    display: grid;
    gap: 1.15rem;
    max-width: 760px;
}

.marketing-offer-type-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.3rem;
    width: 100%;
    min-height: 104px;
    padding: 1.5rem 1.7rem;
    border: 1px solid #d9e0eb;
    border-radius: 18px;
    background: #fff;
    color: #132238;
    text-align: left;
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.marketing-offer-type-card:hover,
.marketing-offer-type-card.is-selected {
    border-color: #6c63ff;
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.18);
}

.marketing-offer-type-copy {
    display: grid;
    gap: 0.42rem;
}

.marketing-offer-type-copy strong {
    font-size: 1.18rem;
    font-weight: 800;
}

.marketing-offer-type-copy span {
    color: #516173;
    font-size: 1.02rem;
    line-height: 1.58;
}

.marketing-offer-type-icon {
    color: #111827;
    font-size: 2.05rem;
}

.marketing-wizard-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.35rem;
    max-width: 760px;
}

.marketing-span-2 {
    grid-column: 1 / -1;
}

.marketing-counter-field textarea {
    min-height: 132px;
}

.marketing-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.38rem;
}

.marketing-field-head span {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
}

.marketing-discount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}

.marketing-discount-input {
    display: flex;
    align-items: center;
    min-height: 60px;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.marketing-discount-input span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    color: #334155;
    font-weight: 800;
}

.marketing-discount-input input {
    border: 0 !important;
    box-shadow: none !important;
}

.marketing-discount-toggle {
    display: inline-flex;
    gap: 0.45rem;
}

.marketing-toggle-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 60px;
    padding: 0.25rem 1rem;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    background: #fff;
    color: #111827;
    font-weight: 800;
    cursor: pointer;
}

.marketing-toggle-chip input {
    display: none;
}

.marketing-toggle-chip.is-active {
    border-color: #6c63ff;
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.18);
}

.marketing-info-callout {
    display: grid;
    gap: 0.4rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid #dfe2ff;
    border-radius: 16px;
    background: #f3f4ff;
}

.marketing-info-callout strong {
    color: #111827;
    font-size: 0.98rem;
}

.marketing-info-callout p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.marketing-date-input-wrap {
    width: 100%;
}

.marketing-date-input-wrap .marketing-date-display {
    width: 100%;
    cursor: pointer;
    background: #ffffff;
}

.marketing-date-input-wrap.has-clear::after {
    right: 2.9rem;
}

.marketing-date-clear {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.marketing-date-clear:hover {
    background: #f1f5f9;
    color: #132238;
}

.marketing-date-clear .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.marketing-checkbox-row {
    display: grid;
}

.marketing-checkbox-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    padding: 0.2rem 0;
}

.marketing-checkbox-card input {
    width: 20px;
    height: 20px;
    margin-top: 0.18rem;
}

.marketing-checkbox-card strong {
    display: block;
    color: #111827;
    font-size: 1rem;
}

.marketing-checkbox-card small {
    display: block;
    margin-top: 0.2rem;
    color: #64748b;
    line-height: 1.45;
}

.marketing-limit-stack,
.marketing-center-stack {
    display: grid;
    gap: 1.25rem;
}

.marketing-switch-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.9rem;
}

.marketing-switch {
    position: relative;
    display: inline-flex;
    width: 52px;
    height: 30px;
    flex: 0 0 auto;
}

.marketing-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.marketing-switch-ui {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #d1d5db;
    transition: background 0.18s ease;
}

.marketing-switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform 0.18s ease;
}

.marketing-switch input:checked + .marketing-switch-ui {
    background: #6c63ff;
}

.marketing-switch input:checked + .marketing-switch-ui::after {
    transform: translateX(22px);
}

.marketing-switch-copy {
    display: grid;
    gap: 0.18rem;
}

.marketing-switch-copy strong {
    color: #111827;
    font-size: 1.02rem;
}

.marketing-switch-copy small {
    color: #64748b;
    line-height: 1.45;
}

.marketing-limit-field {
    margin-left: 3.85rem;
}

.marketing-limit-field[hidden] {
    display: none !important;
}

.marketing-limit-amount-input span {
    width: 52px;
    color: #64748b;
    font-size: 1.1rem;
}

.marketing-helper-inline {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
}

.marketing-whatsapp-ai-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.marketing-whatsapp-test-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.85rem;
}

.marketing-whatsapp-test-field {
    display: grid;
    gap: 0.38rem;
    min-width: 240px;
    flex: 1 1 260px;
}

.marketing-whatsapp-test-field span {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

.marketing-whatsapp-test-field input {
    min-height: 46px;
}

.marketing-wa-test-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid #d7def0;
    background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
    color: #111827;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.marketing-wa-test-btn:hover {
    transform: translateY(-1px);
    border-color: #22c55e;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.14);
}

.marketing-wa-test-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.marketing-wa-test-status {
    font-size: 0.92rem;
    font-weight: 700;
    color: #64748b;
    flex: 1 1 100%;
}

.marketing-wa-test-status[data-state="success"] {
    color: #15803d;
}

.marketing-wa-test-status[data-state="error"] {
    color: #dc2626;
}

.marketing-wa-test-status[data-state="loading"] {
    color: #5b50f6;
}

.marketing-wa-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d7def0;
    background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
    color: #111827;
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.marketing-wa-ai-btn:hover {
    transform: translateY(-1px);
    border-color: #6c63ff;
    box-shadow: 0 10px 22px rgba(91, 80, 246, 0.14);
}

.marketing-wa-ai-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.marketing-wa-ai-btn .material-symbols-outlined {
    font-size: 1.15rem;
    color: #6c63ff;
}

.marketing-wa-ai-btn.is-loading .material-symbols-outlined {
    animation: marketing-spin 0.85s linear infinite;
}

.admin-body.admin-page-marketing.marketing-automation-modal-open .admin-content {
    overflow: hidden;
}

.marketing-automation-page {
    display: grid;
    gap: 1.4rem;
}

.marketing-automation-topline {
    display: flex;
    justify-content: flex-end;
}

.marketing-automation-balance {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.9rem;
    min-width: 250px;
    padding: 1rem 1.1rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    align-items: center;
    position: relative;
}

.marketing-automation-balance span {
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
}

.marketing-automation-balance strong {
    color: #111827;
    font-size: 1.62rem;
    font-weight: 800;
}

.marketing-automation-balance-menu {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-automation-balance-menu:hover {
    background: #f6f8fc;
}

.marketing-automation-balance-popover {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 12;
    min-width: 220px;
    padding: 0.35rem 0;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.marketing-automation-balance-popover[hidden] {
    display: none !important;
}

.marketing-automation-balance-popover button {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    padding: 0.72rem 1rem;
}

.marketing-automation-balance-popover button:hover {
    background: #f6f8fc;
}

.admin-body.admin-page-marketing.marketing-balance-modal-open .admin-content {
    overflow: hidden;
}

.marketing-balance-modal {
    position: fixed;
    inset: 0;
    z-index: 3550;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(8px);
}

.marketing-balance-modal[hidden] {
    display: none !important;
}

.marketing-balance-shell {
    height: 100vh;
    overflow: auto;
    background: #fff;
}

.marketing-balance-view[hidden] {
    display: none !important;
}

.marketing-balance-header,
.marketing-balance-wizard-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.6rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.marketing-balance-header-copy,
.marketing-balance-wizard-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.marketing-balance-header-copy span {
    color: #475569;
    font-size: 0.96rem;
    font-weight: 600;
}

.marketing-balance-layout {
    width: min(1360px, 100%);
    margin: 0 auto;
    padding: 2rem clamp(1.4rem, 3vw, 2.4rem) 3rem;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2rem;
}

.marketing-balance-sidebar {
    align-self: start;
    padding: 1.5rem;
    border: 1px solid #dbe5f1;
    border-radius: 20px;
    background: #fff;
    display: grid;
    gap: 1rem;
}

.marketing-balance-sidebar h2,
.marketing-balance-pane-head h2,
.marketing-balance-wizard-copy h2 {
    margin: 0;
    color: #111827;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-balance-sidebar-nav {
    display: grid;
    gap: 0.45rem;
}

.marketing-balance-sidebar-link {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
}

.marketing-balance-sidebar-link:hover {
    background: #f6f8fc;
}

.marketing-balance-sidebar-link.is-active {
    background: #eef2ff;
    color: #4338ca;
}

.marketing-balance-content {
    display: grid;
    gap: 1.4rem;
    align-content: start;
}

.marketing-billing-pane {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.marketing-balance-pane-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.marketing-balance-pane-head p,
.marketing-balance-wizard-copy p {
    margin: 0.45rem 0 0;
    color: #64748b;
    font-size: 0.98rem;
    line-height: 1.6;
}

.marketing-balance-stack,
.marketing-balance-overview,
.marketing-balance-invoices {
    display: grid;
    gap: 1rem;
}

.marketing-balance-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-balance-card {
    padding: 1.35rem 1.4rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    display: grid;
    gap: 0.4rem;
}

.marketing-balance-card span {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
}

.marketing-balance-card strong {
    color: #111827;
    font-size: 1.12rem;
    font-weight: 800;
}

.marketing-balance-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 800;
}

.marketing-balance-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

.marketing-balance-card-highlight strong {
    font-size: 2rem;
    line-height: 1;
}

.marketing-balance-quick-actions,
.marketing-billing-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.marketing-billing-info-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-billing-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-billing-field.is-full {
    grid-column: 1 / -1;
}

.marketing-billing-field span {
    color: #111827;
    font-size: 0.93rem;
    font-weight: 700;
}

.marketing-billing-field input,
.marketing-billing-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
}

.marketing-balance-invoice-month {
    display: grid;
    gap: 1rem;
}

.marketing-balance-invoice-month h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-balance-invoice-list {
    display: grid;
    gap: 0.85rem;
}

.marketing-balance-invoice-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
}

.marketing-balance-invoice-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.marketing-balance-invoice-icon.is-csv {
    background: #2f855a;
}

.marketing-balance-invoice-icon.is-pdf {
    background: #c0392b;
}

.marketing-balance-invoice-copy strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-balance-invoice-copy p {
    margin: 0.18rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.55;
}

.marketing-balance-invoice-action {
    min-width: 46px;
    height: 46px;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-balance-invoice-action .material-symbols-outlined,
.marketing-balance-inline-back .material-symbols-outlined {
    font-size: 1.15rem;
}

.marketing-balance-invoice-badge {
    min-height: 32px;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.marketing-balance-wizard-body {
    width: min(1360px, 100%);
    margin: 0 auto;
    padding: 2.4rem clamp(1.5rem, 4vw, 2.8rem) 3rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 3rem;
    align-items: start;
}

.marketing-balance-wizard-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
}

.marketing-balance-wizard-progress span {
    display: block;
    height: 4px;
    flex: 1 1 0;
    border-radius: 999px;
    background: #e5e7eb;
}

.marketing-balance-wizard-progress span.is-active {
    background: #6c63ff;
}

.marketing-balance-inline-back {
    width: 44px;
    height: 44px;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.marketing-balance-amount-block {
    display: grid;
    gap: 0.35rem;
    margin-top: 2rem;
}

.marketing-balance-amount-block span {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.marketing-balance-amount-block strong {
    color: #111827;
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.marketing-balance-amount-block small,
.marketing-balance-summary-card p {
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.55;
}

.marketing-balance-amount-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.marketing-balance-chip {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

.marketing-balance-chip.is-active {
    border-color: #6c63ff;
    color: #4338ca;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.marketing-balance-chip-icon {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
}

.marketing-balance-custom-input {
    margin-top: 1rem;
}

.marketing-balance-custom-input label,
.marketing-balance-threshold-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-balance-custom-input span,
.marketing-balance-threshold-field span {
    color: #111827;
    font-size: 0.93rem;
    font-weight: 700;
}

.marketing-balance-custom-input input {
    width: min(280px, 100%);
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
}

.marketing-balance-money-input {
    width: min(420px, 100%);
    min-height: 48px;
    padding: 0 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.marketing-balance-money-input span {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 700;
}

.marketing-balance-money-input input {
    width: 100%;
    min-height: 46px;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 1rem;
}

.marketing-balance-money-input input:focus {
    outline: none;
}

.marketing-balance-summary-card {
    padding: 1.5rem 1.6rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    display: grid;
    gap: 1.2rem;
}

.marketing-balance-summary-row,
.marketing-balance-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-balance-summary-total {
    padding-bottom: 0;
    border-bottom: 0;
}

.marketing-balance-summary-row span,
.marketing-balance-summary-total span {
    color: #475569;
    font-size: 0.98rem;
}

.marketing-balance-summary-row strong,
.marketing-balance-summary-total strong {
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
}

.marketing-balance-summary-total strong {
    font-size: 2rem;
    line-height: 1;
}

.marketing-balance-modal button,
.marketing-balance-sidebar-link,
.marketing-balance-invoice-action {
    cursor: pointer;
}

.marketing-automation-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.8rem 1.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #6758ff 0%, #5a74f9 55%, #6b89ff 100%);
    color: #fff;
}

.marketing-automation-banner h3,
.marketing-automation-banner p {
    margin: 0;
}

.marketing-automation-banner h3 {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-banner p {
    margin-top: 0.45rem;
    max-width: 52ch;
    opacity: 0.96;
    line-height: 1.45;
    font-size: 0.96rem;
}

.marketing-automation-banner button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.marketing-automation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.marketing-automation-tab {
    min-height: 42px;
    padding: 0.68rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font-size: 0.94rem;
    font-weight: 700;
}

.marketing-automation-tab.is-active {
    background: #111111;
    color: #fff;
}

.marketing-automation-group-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.38rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
    margin-top: 1rem;
}

.marketing-automation-card,
.marketing-automation-create-card {
    min-height: 310px;
    padding: 1.4rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
}

.marketing-automation-card {
    display: grid;
    align-content: start;
    gap: 1rem;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.marketing-automation-card:hover,
.marketing-automation-card:focus-visible {
    border-color: #cfdaf0;
    background: #fcfdff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.marketing-automation-card:focus-visible {
    outline: 0;
}

.marketing-automation-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.marketing-automation-options summary {
    min-height: 34px;
    width: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    box-shadow: none;
}

.marketing-automation-options summary::after {
    content: 'more_vert';
    font-family: 'Material Symbols Outlined';
    font-size: 1.2rem;
    line-height: 1;
    color: #111827;
}

.marketing-automation-options[open] summary,
.marketing-automation-options summary:hover {
    background: #f5f7fb;
}

.marketing-automation-options .clients-pro-options-menu {
    min-width: 160px;
    padding: 0.18rem 0;
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

.marketing-automation-options .clients-pro-option-item {
    min-height: unset !important;
    padding: 0.34rem 0.9rem !important;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    gap: 0;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.08;
}

.marketing-automation-options .clients-pro-option-item span {
    line-height: 1.08;
}

.marketing-automation-options .clients-pro-option-item:hover {
    background: #f6f7fb;
}

.marketing-automation-options .clients-pro-option-ico {
    display: none;
}

.marketing-automation-options .clients-pro-option-item.is-danger {
    color: #dc2626;
}

.marketing-automation-options .clients-pro-option-item.is-danger:hover {
    background: #fff3f3;
}

.marketing-automation-card-head > .material-symbols-outlined {
    color: #c8670d;
    font-size: 2rem;
}

.marketing-automation-card h3 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.marketing-automation-card-meta {
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: -0.25rem;
}

.marketing-automation-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
    font-size: 0.94rem;
}

.marketing-automation-card-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
}

.marketing-automation-channel-icons {
    display: flex;
    gap: 0.55rem;
    color: #111827;
}

.marketing-automation-channel-icons [data-marketing-automation-card-channel][hidden] {
    display: none !important;
}

.marketing-automation-channel-icons[hidden] {
    display: none !important;
}

.marketing-automation-create-card {
    display: grid;
    place-items: center;
    gap: 0.7rem;
    color: #5b4bff;
    text-align: center;
}

.marketing-automation-create-card .material-symbols-outlined {
    font-size: 2rem;
}

.marketing-automation-create-card strong {
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-modal {
    position: fixed;
    inset: 0;
    z-index: 3600;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(8px);
    padding: 0;
}

.marketing-automation-modal[hidden] {
    display: none !important;
}

.marketing-automation-modal-shell {
    height: 100vh;
    background: #fff;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.marketing-automation-modal-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.marketing-automation-modal-topbar-copy span {
    color: #111827;
    font-size: 1.18rem;
    font-weight: 800;
}

.marketing-automation-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.marketing-automation-modal-actions .btn,
.marketing-automation-modal-actions .clients-pro-add-btn,
.marketing-automation-trigger-actions .btn,
.marketing-automation-trigger-actions .clients-pro-add-btn,
.marketing-automation-stage-body > .btn {
    min-height: 40px;
    padding: 0.52rem 1rem;
    font-size: 0.94rem;
    border-radius: 999px;
    width: auto;
    justify-self: start;
}

.marketing-automation-modal-body {
    padding: 2rem clamp(1.4rem, 4vw, 2.8rem) 3rem;
    height: calc(100vh - 88px);
    overflow: auto;
    min-height: 0;
}

.marketing-automation-flow {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 2rem;
    min-height: 0;
}

.marketing-automation-summary {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
    min-height: min-content;
}

.marketing-automation-summary[hidden],
.marketing-automation-flow[hidden] {
    display: none !important;
}

.marketing-automation-modal[data-mode="summary"] [data-marketing-automation-save] {
    display: none !important;
}

.marketing-automation-summary-head h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: #111827;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.marketing-automation-summary-head p {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 0.98rem;
}

.marketing-automation-summary-tabs {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.marketing-automation-summary-tab {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
}

.marketing-automation-summary-tab.is-active {
    background: #111111;
    color: #fff;
}

.marketing-automation-summary-pane[hidden] {
    display: none !important;
}

.marketing-automation-summary-filter {
    padding: 1rem;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    background: #fff;
    position: relative;
}

.marketing-automation-summary-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.marketing-automation-summary-filter-popover {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 1rem;
    z-index: 12;
    width: min(620px, calc(100vw - 4rem));
    padding: 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 0.9rem;
}

.marketing-automation-summary-filter-popover[hidden] {
    display: none !important;
}

.marketing-automation-summary-filter-popover-head strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-filter-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-automation-summary-filter-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-automation-summary-filter-preset-wrap {
    position: relative;
}

.marketing-automation-summary-filter-field span {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
}

.marketing-automation-summary-filter-field select,
.marketing-automation-summary-filter-field input {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
}

.marketing-automation-summary-filter-select {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
}

.marketing-automation-summary-filter-select:focus {
    outline: none;
    border-color: #6c63ff;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.marketing-automation-summary-filter-select-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 4;
    max-height: 280px;
    overflow: auto;
    padding: 0.35rem 0;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.marketing-automation-summary-filter-select-menu[hidden] {
    display: none !important;
}

.marketing-automation-summary-filter-select-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    padding: 0.55rem 0.95rem;
}

.marketing-automation-summary-filter-select-option:hover {
    background: #f5f7fb;
}

.marketing-automation-summary-filter-select-option.is-active {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
}

.marketing-automation-summary-filter-field input[readonly] {
    cursor: pointer;
    caret-color: transparent;
}

.marketing-automation-summary-filter-field select:focus,
.marketing-automation-summary-filter-field input:focus {
    outline: none;
    border-color: #6c63ff;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.marketing-automation-summary-filter-help {
    margin: 0;
    color: #dc2626;
    font-size: 0.88rem;
    font-weight: 600;
}

.marketing-automation-summary-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.marketing-automation-summary-filter-calendar {
    display: grid;
    gap: 1rem;
}

.marketing-automation-summary-filter-calendar-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) 36px;
    align-items: center;
    gap: 1rem;
}

.marketing-automation-summary-filter-calendar-nav {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    cursor: pointer;
}

.marketing-automation-summary-filter-calendar-nav:hover {
    background: #f3f4f6;
}

.marketing-automation-summary-filter-calendar-month-title {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}

.marketing-automation-summary-filter-calendar-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-automation-summary-filter-calendar-month {
    display: grid;
    gap: 0.65rem;
}

.marketing-automation-summary-filter-calendar-weekdays,
.marketing-automation-summary-filter-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}

.marketing-automation-summary-filter-calendar-weekdays span {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    text-transform: lowercase;
}

.marketing-automation-summary-filter-calendar-day {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.marketing-automation-summary-filter-calendar-day:hover {
    background: #e5e7eb;
}

.marketing-automation-summary-filter-calendar-day.is-outside {
    color: #94a3b8;
    background: #f8fafc;
}

.marketing-automation-summary-filter-calendar-day.is-in-range {
    background: #e5e7eb;
}

.marketing-automation-summary-filter-calendar-day.is-start,
.marketing-automation-summary-filter-calendar-day.is-end,
.marketing-automation-summary-filter-calendar-day.is-single {
    background: #111111;
    color: #ffffff;
}

.marketing-automation-summary-filter-calendar-day.is-start:hover,
.marketing-automation-summary-filter-calendar-day.is-end:hover,
.marketing-automation-summary-filter-calendar-day.is-single:hover {
    background: #111111;
    transform: translateY(-1px);
}

.marketing-automation-summary-filter-field input.is-range-target {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

@media (max-width: 860px) {
    .marketing-automation-summary-filter-popover {
        width: min(94vw, 620px);
        left: 50%;
        transform: translateX(-50%);
    }

    .marketing-automation-summary-filter-calendar-head {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }

    .marketing-automation-summary-filter-calendar-head .marketing-automation-summary-filter-calendar-month-title:last-of-type {
        display: none;
    }

    .marketing-automation-summary-filter-calendar-months {
        grid-template-columns: minmax(0, 1fr);
    }

    .marketing-automation-summary-filter-calendar-month[data-marketing-automation-summary-filter-month="right"] {
        display: none;
    }
}

.marketing-automation-summary-chart {
    padding: 1.2rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    position: relative;
}

.marketing-automation-summary-chart.is-sparse .marketing-automation-summary-chart-labels {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: auto;
}

.marketing-automation-summary-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.marketing-automation-summary-chart-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-chart-grid {
    display: grid;
    height: 100%;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    align-content: stretch;
    gap: 0.7rem;
    padding: 0.2rem 0 0.8rem;
    color: #64748b;
    font-size: 0.88rem;
}

.marketing-automation-summary-chart-stage {
    position: relative;
}

.marketing-automation-summary-chart-grid span {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-automation-summary-chart-plot {
    position: absolute;
    inset: 0 0 0.8rem 0;
    pointer-events: none;
}

.marketing-automation-summary-chart-plot svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.marketing-automation-summary-chart-line {
    display: none;
}

.marketing-automation-summary-chart-line.is-email {
    stroke: #6c63ff;
}

.marketing-automation-summary-chart-line.is-sms {
    stroke: #fb923c;
}

.marketing-automation-summary-chart-line.is-whatsapp {
    stroke: #2f9e1d;
}

.marketing-automation-summary-chart-dot {
    display: none;
}

.marketing-automation-summary-chart-bar {
    opacity: 0.92;
    shape-rendering: geometricPrecision;
}

.marketing-automation-summary-chart-bar.is-email {
    fill: #6c63ff;
}

.marketing-automation-summary-chart-bar.is-sms {
    fill: #fb923c;
}

.marketing-automation-summary-chart-bar.is-whatsapp {
    fill: #2f9e1d;
}

.marketing-automation-summary-chart-dot.is-email {
    fill: #6c63ff;
}

.marketing-automation-summary-chart-dot.is-sms {
    fill: #fb923c;
}

.marketing-automation-summary-chart-dot.is-whatsapp {
    fill: #2f9e1d;
}

.marketing-automation-summary-chart-labels {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0.55rem;
    min-height: 1.9rem;
    max-height: 1.9rem;
    height: auto !important;
    overflow: hidden;
    color: #64748b;
    font-size: 0.78rem;
}

.marketing-automation-summary-chart-point {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0.2rem 0;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.marketing-automation-summary-chart.is-sparse .marketing-automation-summary-chart-point {
    flex: 0 0 auto;
    min-width: 2.75rem;
    text-align: center;
}

.marketing-automation-summary-chart-point span {
    display: inline-block;
    padding: 0.15rem 0;
}

.marketing-automation-summary-chart-point:hover span,
.marketing-automation-summary-chart-point:focus-visible span {
    color: #111827;
    font-weight: 700;
}

.marketing-automation-summary-chart-tooltip {
    position: absolute;
    top: 4.35rem;
    transform: translateX(-50%);
    min-width: 180px;
    padding: 0.85rem 0.9rem;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
    z-index: 3;
    display: grid;
    gap: 0.55rem;
    pointer-events: none;
}

.marketing-automation-summary-chart-tooltip[hidden] {
    display: none !important;
}

.marketing-automation-summary-chart-tooltip strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.marketing-automation-summary-chart-tooltip-total,
.marketing-automation-summary-chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marketing-automation-summary-chart-tooltip-total span,
.marketing-automation-summary-chart-tooltip-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #111827;
}

.marketing-automation-summary-chart-tooltip-total b,
.marketing-automation-summary-chart-tooltip-row b {
    color: #111827;
    font-weight: 800;
}

.marketing-automation-summary-chart-tooltip-row i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #6c63ff;
    display: inline-block;
}

.marketing-automation-summary-chart-tooltip-row i.is-sms {
    background: #fb923c;
}

.marketing-automation-summary-chart-tooltip-row i.is-whatsapp {
    background: #2f9e1d;
}

.marketing-automation-summary-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    color: #475569;
    font-size: 0.88rem;
}

.marketing-automation-summary-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.marketing-automation-summary-legend i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #6c63ff;
    display: inline-block;
}

.marketing-automation-summary-legend i.is-sms {
    background: #fb923c;
}

.marketing-automation-summary-legend i.is-whatsapp {
    background: #22c55e;
}

.marketing-automation-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.marketing-automation-summary-stat {
    padding: 1.25rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    display: grid;
    gap: 0.55rem;
}

.marketing-automation-summary-stat strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-stat b {
    color: #111827;
    font-size: 2rem;
    line-height: 1;
}

.marketing-automation-summary-stat small {
    color: #64748b;
    line-height: 1.55;
}

.marketing-automation-summary-preview {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1.4rem;
    min-height: 0;
}

.marketing-automation-summary-preview-pane {
    height: calc(100vh - 320px);
    max-height: calc(100vh - 320px);
    overflow: auto;
    padding-right: 0.4rem;
    scrollbar-gutter: stable;
    min-height: 0;
}

.marketing-automation-summary-preview-pane::-webkit-scrollbar {
    width: 10px;
}

.marketing-automation-summary-preview-pane::-webkit-scrollbar-thumb {
    background: #d8dde8;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.marketing-automation-summary-preview-card {
    padding: 1.35rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
}

.marketing-automation-summary-preview-card strong {
    display: block;
    margin-bottom: 0.7rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-summary-preview-card p {
    margin: 0;
    color: #111827;
    line-height: 1.6;
}

.marketing-automation-summary-preview-card.is-phone,
.marketing-automation-summary-preview-card.is-chat {
    max-width: 420px;
    margin: 0 auto;
}

.marketing-automation-summary-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 2.5rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
}

.marketing-automation-summary-details article {
    display: grid;
    gap: 0.3rem;
    align-content: start;
}

.marketing-automation-summary-details strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 800;
}

.marketing-automation-summary-details span {
    color: #475569;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .marketing-automation-summary-details {
        grid-template-columns: 1fr;
    }
}

.marketing-automation-flow-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.75rem, 2.8vw, 2.3rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.marketing-automation-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.marketing-automation-stage-icon {
    position: relative;
    width: 28px;
    min-height: 100%;
    display: flex;
    justify-content: center;
}

.marketing-automation-stage-icon::after {
    content: "";
    position: absolute;
    top: 44px;
    bottom: -28px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #d7def0;
}

.marketing-automation-stage:last-child .marketing-automation-stage-icon::after {
    display: none;
}

.marketing-automation-stage-icon .material-symbols-outlined {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #efeefe;
    color: #6c63ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.marketing-automation-stage-body {
    display: grid;
    gap: 1rem;
    justify-items: start;
}

.marketing-automation-stage-body h3,
.marketing-automation-stage-body p {
    margin: 0;
}

.marketing-automation-stage-body h3 {
    color: #111827;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-stage-body p {
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.5;
}

.marketing-automation-channel-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #dbe5f1;
    border-radius: 16px;
    background: #fff;
    min-height: 92px;
    width: 100%;
    box-sizing: border-box;
}

.marketing-automation-channel-card-secondary {
    margin-top: 1rem;
    width: 100%;
}

.marketing-automation-channel-copy {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 60px;
}

.marketing-automation-channel-copy .material-symbols-outlined {
    color: #5b4bff;
    font-size: 1.9rem;
}

.marketing-automation-channel-copy strong,
.marketing-automation-channel-copy small {
    display: block;
}

.marketing-automation-channel-copy strong {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
}

.marketing-automation-channel-copy small {
    color: #64748b;
    margin-top: 0.15rem;
    font-size: 0.9rem;
}

.marketing-automation-channel-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 210px;
    justify-content: flex-end;
    flex: 0 0 210px;
}

.marketing-automation-channel-card .marketing-status-pill {
    min-height: 28px;
    padding: 0.22rem 0.72rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.marketing-automation-channel-actions summary {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid #d5dbe7;
    background: #fff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
}

.marketing-automation-channel-actions summary::after {
    font-size: 1rem;
}

.marketing-automation-channel-actions .clients-pro-options-menu {
    min-width: 160px;
    padding: 0.18rem 0 !important;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    gap: 0 !important;
}

.marketing-automation-channel-actions .clients-pro-option-item {
    width: 100%;
    border-radius: 0;
    min-height: unset !important;
    padding: 0.34rem 0.9rem !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.08 !important;
}

.marketing-automation-channel-actions .clients-pro-option-item span {
    display: block;
    line-height: 1.08 !important;
}

.marketing-automation-channel-actions .clients-pro-option-item:hover,
.marketing-automation-channel-actions .clients-pro-option-item:focus-visible,
.marketing-automation-content-options .clients-pro-option-item:hover,
.marketing-automation-content-options .clients-pro-option-item:focus-visible,
.marketing-automation-options .clients-pro-option-item:hover,
.marketing-automation-options .clients-pro-option-item:focus-visible {
    background: #f6f8fc;
}

.marketing-automation-channel-actions .clients-pro-option-ico {
    display: none;
}

.marketing-automation-channel-actions .clients-pro-option-item.is-danger {
    color: #dc2626;
}

.marketing-automation-content-options .clients-pro-options-menu {
    min-width: 180px;
    padding: 0.25rem 0;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    gap: 0;
}

.marketing-automation-content-options .clients-pro-option-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: unset !important;
    padding: 0.52rem 0.95rem !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: none;
    line-height: 1.22;
}

.marketing-automation-content-options .clients-pro-option-item span {
    white-space: nowrap;
    line-height: 1.22;
}

.marketing-automation-content-options .clients-pro-option-item:hover {
    background: #f6f7fb;
}

.marketing-automation-content-options .clients-pro-option-item.is-danger {
    color: #dc2626;
}

.marketing-automation-channel-split {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.marketing-automation-channel-split p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.95rem;
}

.marketing-automation-channel-split a {
    color: #5b4bff;
    text-decoration: none;
}

.marketing-automation-connector-options {
    flex: 0 0 auto;
}

.marketing-automation-connector-options > summary {
    min-width: 68px;
    justify-content: center;
}

.marketing-automation-connector-options .clients-pro-options-menu {
    min-width: 84px;
}

.marketing-automation-connector-options .clients-pro-option-item.is-active {
    background: #f4f3ff;
    color: #4338ca;
    font-weight: 700;
}

.marketing-automation-channel-toggle {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border: 1px solid #d5dbe7;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.marketing-automation-channel-toggle .material-symbols-outlined {
    color: #111827;
    font-size: 1rem;
}

.marketing-automation-trigger-modal {
    position: fixed;
    inset: 0;
    z-index: 3700;
    background: rgba(17, 24, 39, 0.28);
    display: grid;
    place-items: center;
    padding: 2rem;
}

.marketing-automation-trigger-modal[hidden] {
    display: none !important;
}

.marketing-automation-trigger-dialog {
    width: min(720px, 100%);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
}

.marketing-automation-trigger-close {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-automation-trigger-close:hover {
    background: #f5f7fb;
}

.marketing-automation-trigger-dialog-body {
    padding: 3rem 2.2rem 1.6rem;
}

.marketing-automation-trigger-dialog-body h3 {
    margin: 0 0 1.8rem;
    color: #111827;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-trigger-dialog-body .form-label {
    margin-bottom: 0.7rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.marketing-automation-trigger-dialog-body .form-select {
    min-height: 48px;
    border-radius: 0.95rem;
    border-color: #d5dbe7;
}

.marketing-automation-trigger-actions {
    padding: 0 2.2rem 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.9rem;
}

.marketing-automation-content-editor {
    position: fixed;
    inset: 0;
    z-index: 3690;
    background: #fff;
    overflow: auto;
}

.marketing-automation-content-editor[hidden] {
    display: none !important;
}

.marketing-automation-send-test-modal {
    position: fixed;
    inset: 0;
    z-index: 3710;
    background: rgba(17, 24, 39, 0.28);
    display: grid;
    place-items: center;
    padding: 2rem;
}

.marketing-automation-send-test-modal[hidden] {
    display: none !important;
}

.marketing-automation-send-test-dialog {
    width: min(520px, 100%);
    border-radius: 1.45rem;
    background: #fff;
    box-shadow: 0 32px 60px rgba(15, 23, 42, 0.18);
    position: relative;
    overflow: hidden;
}

.marketing-automation-send-test-body {
    padding: 2.8rem 2rem 1.35rem;
    display: grid;
    gap: 1rem;
}

.marketing-automation-send-test-body h3 {
    margin: 0 0 0.55rem;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.marketing-automation-send-test-body .marketing-automation-field {
    gap: 0.55rem;
}

.marketing-automation-send-test-status {
    border-radius: 0.95rem;
    padding: 0.8rem 0.95rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.marketing-automation-send-test-status.is-loading {
    background: #f3f4f6;
    color: #111827;
}

.marketing-automation-send-test-status.is-success {
    background: #ecfdf3;
    color: #166534;
}

.marketing-automation-send-test-status.is-error {
    background: #fef2f2;
    color: #b91c1c;
}

.marketing-automation-send-test-body input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d5dbe7;
    border-radius: 0.95rem;
    padding: 0.85rem 1rem;
    font: inherit;
    color: #111827;
    background: #fff;
}

.marketing-automation-send-test-actions {
    padding: 0 2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.marketing-automation-send-test-actions .btn,
.marketing-automation-send-test-actions .clients-pro-add-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    border-radius: 999px;
}

.marketing-automation-send-test-dialog .marketing-automation-trigger-close {
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
}

.marketing-automation-content-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #fff;
}

.swal2-container {
    z-index: 5000 !important;
}

.appointments-checkout-adjustment-popup {
    width: min(680px, calc(100vw - 2rem)) !important;
    padding: 1.7rem 1.7rem 1.45rem !important;
    border-radius: 14px !important;
    color: #1f2937 !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24) !important;
}

.appointments-checkout-adjustment-popup .swal2-title {
    margin: 0 2.6rem 0.65rem 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-size: 1.25rem !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

.appointments-checkout-adjustment-popup .swal2-close {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    color: #94a3b8 !important;
    font-size: 2rem !important;
    line-height: 1 !important;
}

.appointments-checkout-adjustment-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #4b5563 !important;
}

.appointments-checkout-adjustment-dialog {
    display: grid;
    gap: 1.5rem;
    text-align: left;
}

.appointments-checkout-adjustment-copy {
    max-width: none;
    margin: 0 2rem 0 0 !important;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: left;
}

.appointments-checkout-adjustment-label {
    display: block;
    margin-bottom: 0.45rem;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 800;
}

.appointments-checkout-adjustment-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.appointments-checkout-adjustment-input {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 min(280px, 100%);
    min-height: 48px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.appointments-checkout-adjustment-input:focus-within {
    border-color: #6b5bff;
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.12);
}

.appointments-checkout-adjustment-prefix {
    min-width: 54px;
    padding: 0 0.7rem;
    color: #475569;
    font-weight: 800;
    text-align: center;
    border-right: 0;
    white-space: nowrap;
}

.appointments-checkout-adjustment-input input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 0.85rem 0 0;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.appointments-checkout-adjustment-toggle {
    display: inline-flex;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.18rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.appointments-checkout-adjustment-chip {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
}

.appointments-checkout-adjustment-chip.is-active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.appointments-checkout-adjustment-chip .material-symbols-outlined {
    font-size: 1.2rem;
}

.appointments-checkout-adjustment-preview {
    display: grid;
    gap: 0.2rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #111827;
    font-size: 0.95rem;
}

.appointments-checkout-adjustment-preview strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
}

.appointments-checkout-adjustment-popup .swal2-actions {
    justify-content: flex-end !important;
    margin: 0.9rem 0 0 !important;
    gap: 0.7rem !important;
}

.appointments-checkout-adjustment-confirm,
.appointments-checkout-adjustment-remove {
    min-height: 48px;
    padding: 0 1.45rem;
    border-radius: 999px !important;
    border: 0 !important;
    font: inherit !important;
    font-weight: 800 !important;
}

.appointments-checkout-adjustment-confirm {
    background: #111318 !important;
    color: #ffffff !important;
}

.appointments-checkout-adjustment-remove {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.marketing-swal-popup {
    border-radius: 18px !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
}

.marketing-swal-actions {
    gap: 0.75rem !important;
}

.marketing-swal-confirm,
.marketing-swal-cancel {
    min-width: 122px;
    min-height: 46px;
    padding: 0.72rem 1.2rem;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

.marketing-swal-confirm {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

.marketing-swal-cancel {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

.marketing-swal-confirm:hover,
.marketing-swal-cancel:hover {
    filter: brightness(0.98);
}

/* Bungee booking custom SweetAlert2 styles */
.bk-swal-popup {
    border-radius: 18px !important;
    padding: 1.8rem 1.8rem 1.4rem !important;
    box-shadow: 0 20px 50px rgba(15, 35, 68, 0.15) !important;
}

.bk-swal-title {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f2344 !important;
    letter-spacing: -0.02em !important;
}

.bk-swal-content {
    font-size: 1rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

.bk-swal-confirm {
    min-height: 48px !important;
    padding: 0 1.8rem !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
    transition: all 0.2s ease !important;
}

.bk-swal-confirm:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35) !important;
}

.marketing-automation-content-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.98);
}

.marketing-automation-content-topbar h3 {
    margin: 0;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 800;
}

.marketing-automation-content-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.marketing-automation-content-body {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    min-height: calc(100vh - 73px);
}

.marketing-automation-content-form {
    padding: 2rem 1.1rem 2rem 1.1rem;
    border-right: 1px solid #e5e7eb;
    display: grid;
    align-content: start;
    gap: 1.35rem;
    position: sticky;
    top: 73px;
    align-self: start;
    max-height: calc(100vh - 73px);
    overflow: auto;
    background: #fff;
    z-index: 1;
}

.marketing-automation-content-copy h4 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111827;
}

.marketing-automation-content-copy p {
    margin: 0;
    color: #64748b;
    line-height: 1.45;
}

.marketing-automation-checkline {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: #111827;
}

.marketing-automation-checkline input {
    width: 1.35rem;
    height: 1.35rem;
}

.marketing-automation-field {
    display: grid;
    gap: 0.45rem;
}

.marketing-automation-field label {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.marketing-automation-field-counter {
    justify-self: end;
    margin-top: -1.65rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.marketing-automation-field textarea {
    width: 100%;
    min-height: 126px;
    border: 1px solid #d5dbe7;
    border-radius: 1rem;
    padding: 1rem;
    font: inherit;
    color: #111827;
    resize: vertical;
}

.marketing-automation-field small {
    color: #6b7280;
    line-height: 1.45;
}

.marketing-automation-test-email-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.marketing-automation-test-email-controls input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    border: 1px solid #d5dbe7;
    border-radius: 0.95rem;
    padding: 0.85rem 1rem;
    font: inherit;
    color: #111827;
    background: #fff;
}

.marketing-automation-test-email-btn {
    flex: 0 0 auto;
    min-height: 46px;
    white-space: nowrap;
}

.marketing-automation-content-preview {
    padding: 2rem;
    overflow: auto;
    background:
        linear-gradient(180deg, #f8f7ff 0%, #ffffff 100%);
}

.marketing-automation-preview-switch {
    width: min(700px, 100%);
    margin: 0 auto 2rem;
    padding: 0.22rem;
    border: 1px solid #d8dde8;
    border-radius: 0.85rem;
    background: #f7f7f8;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.18rem;
}

.marketing-automation-preview-switch-btn {
    min-height: 40px;
    border: 0;
    border-radius: 0.68rem;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.marketing-automation-preview-switch-btn.is-active {
    background: #fff;
    box-shadow: inset 0 0 0 1px #d5dbe7;
}

.marketing-automation-preview-stage {
    width: 100%;
    display: grid;
    place-items: start center;
}

.marketing-automation-preview-pane[hidden] {
    display: none !important;
}

.marketing-automation-preview-shell {
    width: min(900px, 100%);
    margin: 0 auto;
    border: 6px solid #ddd6fe;
    border-radius: 1.5rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(91, 75, 255, 0.08);
}

.marketing-automation-preview-browser {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.2rem;
    background: #f6f3ff;
    border-bottom: 1px solid #eadfff;
}

.marketing-automation-preview-browser span {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #c4b5fd;
}

.marketing-automation-preview-head {
    padding: 1.5rem 1.8rem;
    border-bottom: 1px solid #eceff5;
}

.marketing-automation-preview-head h4 {
    margin: 0 0 1.35rem;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 800;
}

.marketing-automation-preview-from {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marketing-automation-preview-from .material-symbols-outlined {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2edff;
    color: #6555ff;
}

.marketing-automation-preview-from strong,
.marketing-automation-preview-from small {
    display: block;
}

.marketing-automation-preview-from strong {
    color: #111827;
    font-size: 0.98rem;
}

.marketing-automation-preview-from small {
    color: #64748b;
}

.marketing-automation-preview-card {
    width: min(700px, calc(100% - 3rem));
    margin: 3rem auto;
    padding: 2.2rem 2rem;
    border: 1px solid #e6eaf2;
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 1.4rem;
}

.marketing-automation-preview-card h5 {
    margin: 0;
    color: #111827;
    font-size: 1.55rem;
    line-height: 1.15;
    font-weight: 900;
}

.marketing-automation-preview-card > p {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.55;
}

.marketing-automation-preview-line {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.95rem;
    padding-top: 0.3rem;
    border-top: 1px solid #eceff5;
}

.marketing-automation-preview-icon-frame {
    width: 46px;
    height: 46px;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 46px;
}

.marketing-automation-preview-icon-frame.is-circle {
    border-radius: 999px;
}

.marketing-automation-preview-icon-frame img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.marketing-automation-preview-line strong,
.marketing-automation-preview-line small {
    display: block;
}

.marketing-automation-preview-line strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.marketing-automation-preview-line small {
    color: #64748b;
    line-height: 1.45;
}

.marketing-automation-preview-note {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: #f8fafc;
    color: #475569;
    font-size: 0.94rem;
    line-height: 1.55;
}

.marketing-automation-preview-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.marketing-automation-preview-stack {
    width: min(700px, calc(100% - 3rem));
    margin: -0.6rem auto 2.4rem;
    display: grid;
    gap: 1rem;
}

.marketing-automation-preview-summary,
.marketing-automation-preview-panel {
    border: 1px solid #e6eaf2;
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
    padding: 1.35rem 1.4rem;
}

.marketing-automation-preview-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.72rem;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b4bff;
    font-size: 0.8rem;
    font-weight: 700;
}

.marketing-automation-preview-summary h6,
.marketing-automation-preview-panel h6 {
    margin: 1rem 0 0.9rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-automation-preview-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0 0.9rem;
    border-bottom: 1px solid #eceff5;
}

.marketing-automation-preview-summary-row strong,
.marketing-automation-preview-summary-row small,
.marketing-automation-preview-panel strong,
.marketing-automation-preview-panel small {
    display: block;
}

.marketing-automation-preview-summary-row strong,
.marketing-automation-preview-panel strong {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.marketing-automation-preview-summary-row small,
.marketing-automation-preview-panel small,
.marketing-automation-preview-reference {
    color: #64748b;
    line-height: 1.45;
}

.marketing-automation-preview-summary-row > span,
.marketing-automation-preview-summary-row.is-total > span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.marketing-automation-preview-summary-row.is-total {
    align-items: center;
    padding: 0.9rem 0 0;
    border-bottom: 0;
}

.marketing-automation-preview-reference {
    margin-top: 0.6rem;
    font-size: 0.84rem;
}

.marketing-automation-preview-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.marketing-automation-preview-panel-head .marketing-automation-preview-icon-frame {
    width: 46px;
    height: 46px;
    border-radius: 0.95rem;
    flex: 0 0 46px;
}

.marketing-automation-preview-panel-head .marketing-automation-preview-icon-frame img {
    width: 46px;
    height: 46px;
}

.marketing-automation-preview-panel .btn {
    margin-top: 1rem;
}

.marketing-automation-phone {
    width: min(390px, 100%);
    min-height: 720px;
    margin: 0 auto;
    border-radius: 3.4rem;
    border: 9px solid #ddd6fe;
    box-shadow: 0 30px 60px rgba(91, 75, 255, 0.14);
    overflow: hidden;
    position: relative;
}

.marketing-automation-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    z-index: 2;
}

.marketing-automation-phone-sms {
    background:
        radial-gradient(circle at 18% 88%, rgba(255, 40, 219, 0.92) 0%, rgba(255, 40, 219, 0) 26%),
        linear-gradient(145deg, #9b6dff 0%, #8617ff 42%, #8d00ff 68%, #7a1cf6 100%);
    padding: 4.9rem 1.35rem 1.7rem;
}

.marketing-automation-phone-clock {
    color: #fff;
    text-align: center;
    display: grid;
    gap: 0.4rem;
}

.marketing-automation-phone-clock small {
    font-size: 1.05rem;
    font-weight: 700;
}

.marketing-automation-phone-clock strong {
    font-size: 4.7rem;
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.06em;
}

.marketing-automation-sms-card {
    margin-top: 3.2rem;
    border-radius: 1.45rem;
    background: #fff;
    padding: 1rem 1.15rem 1.15rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}

.marketing-automation-sms-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.marketing-automation-sms-app {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.marketing-automation-sms-app-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #8b8b8b;
    position: relative;
    flex: 0 0 22px;
}

.marketing-automation-sms-app-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-62%, -50%) rotate(45deg);
}

.marketing-automation-sms-card p {
    margin: 0;
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.45;
}

.marketing-automation-phone-whatsapp {
    background: #efeae2;
}

.marketing-automation-phone-whatsapp::before {
    content: "";
    position: absolute;
    inset: 58px 0 62px;
    background:
        radial-gradient(circle at 15% 15%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 22%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        radial-gradient(circle at 36% 70%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        radial-gradient(circle at 60% 48%, rgba(0, 0, 0, 0.045) 0 2px, transparent 3px),
        linear-gradient(transparent, transparent);
    opacity: 0.78;
    pointer-events: none;
}

.marketing-automation-whatsapp-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 2.35rem 1rem 0.95rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-automation-whatsapp-back {
    color: #2563eb;
    font-size: 2rem;
    line-height: 1;
}

.marketing-automation-whatsapp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #7c3aed 0%, #c4b5fd 60%, #ffffff 100%);
    box-shadow: 0 0 0 3px #fff;
}

.marketing-automation-whatsapp-head strong {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 800;
}

.marketing-automation-whatsapp-body {
    position: relative;
    z-index: 1;
    min-height: 566px;
    padding: 1.35rem 1rem 1rem;
    display: flex;
    align-items: flex-start;
}

.marketing-automation-whatsapp-bubble {
    width: min(292px, 100%);
    border-radius: 1.1rem;
    background: #fff;
    padding: 1rem 1rem 0.9rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 0.9rem;
    color: #111827;
}

.marketing-automation-whatsapp-bubble p,
.marketing-automation-whatsapp-bubble small,
.marketing-automation-whatsapp-row span,
.marketing-automation-whatsapp-row strong {
    margin: 0;
}

.marketing-automation-whatsapp-whole,
.marketing-automation-whatsapp-row {
    display: grid;
    gap: 0.2rem;
}

.marketing-automation-whatsapp-row strong {
    font-size: 0.86rem;
    font-weight: 800;
}

.marketing-automation-whatsapp-row span {
    font-size: 0.93rem;
    line-height: 1.4;
}

.marketing-automation-whatsapp-bubble > p {
    font-size: 0.94rem;
    line-height: 1.45;
}

.marketing-automation-whatsapp-bubble > small {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.35;
}

.marketing-automation-whatsapp-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.9rem 1rem;
    background: #efeae2;
}

.marketing-automation-whatsapp-plus {
    color: #3b82f6;
    font-size: 2rem;
    line-height: 1;
}

.marketing-automation-whatsapp-input {
    flex: 1 1 auto;
    min-height: 40px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #dbe3ef;
}

.marketing-automation-whatsapp-foot-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #3b82f6;
}

.marketing-automation-whatsapp-foot-icon.is-mic {
    width: 14px;
    height: 20px;
    border-radius: 999px;
}

.marketing-automation-modal .clients-pro-add-btn,
.marketing-automation-trigger-actions .clients-pro-add-btn {
    background: #111111;
    border-color: #111111;
    color: #fff;
    box-shadow: none;
}

.marketing-automation-modal .clients-pro-add-btn:hover,
.marketing-automation-trigger-actions .clients-pro-add-btn:hover {
    background: #1f2937;
    border-color: #1f2937;
}

.marketing-automation-modal .btn-outline,
.marketing-automation-trigger-actions .btn-outline,
.marketing-automation-stage-body > .btn-outline {
    border-color: #d5dbe7;
    color: #111827;
    background: #fff;
}

.marketing-automation-modal .btn-outline:hover,
.marketing-automation-trigger-actions .btn-outline:hover,
.marketing-automation-stage-body > .btn-outline:hover {
    background: #f8fafc;
    border-color: #cfd7e6;
    color: #111827;
}

@media (max-width: 980px) {
    .marketing-automation-grid {
        grid-template-columns: 1fr;
    }

    .marketing-automation-banner {
        align-items: start;
        flex-direction: column;
    }

    .marketing-automation-channel-card {
        align-items: start;
        flex-direction: column;
    }

    .marketing-automation-channel-meta {
        width: 100%;
        justify-content: space-between;
    }

    .marketing-automation-channel-split {
        flex-direction: column;
        align-items: flex-start;
    }
}

.marketing-wa-ai-status {
    font-size: 0.92rem;
    font-weight: 700;
    color: #64748b;
}

.marketing-wa-ai-status[data-state="success"] {
    color: #15803d;
}

.marketing-wa-ai-status[data-state="error"] {
    color: #dc2626;
}

.marketing-wa-ai-status[data-state="loading"] {
    color: #5b50f6;
}

.marketing-whatsapp-composer {
    display: grid;
    gap: 0.85rem;
}

.marketing-whatsapp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.marketing-wa-chip {
    border: 1px solid #d8dee8;
    background: #fff;
    color: #111827;
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.marketing-wa-chip:hover {
    border-color: #6c63ff;
    color: #6c63ff;
    background: #f7f5ff;
}

.marketing-wa-chip.is-variable {
    font-weight: 600;
    color: #5b50f6;
}

.marketing-whatsapp-composer textarea {
    min-height: 190px;
    resize: vertical;
}

.marketing-whatsapp-preview {
    display: grid;
    gap: 0.55rem;
}

.marketing-whatsapp-preview-label {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
}

.marketing-whatsapp-bubble {
    max-width: 620px;
    padding: 1rem 1.1rem;
    border-radius: 18px 18px 18px 6px;
    background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
    border: 1px solid #d8e7f5;
    color: #0f172a;
    line-height: 1.55;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    white-space: normal;
    word-break: break-word;
}

.marketing-whatsapp-bubble.is-empty {
    color: #94a3b8;
    font-style: italic;
}

.marketing-whatsapp-token {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    margin: 0 0.08rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #5b50f6;
    font-weight: 700;
    font-size: 0.95em;
}


@keyframes marketing-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.marketing-center-list {
    display: grid;
}

.marketing-center-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eef2f7;
}

.marketing-center-row-select-all {
    padding-top: 0;
}

.marketing-center-check {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.marketing-center-check input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.marketing-center-check > span {
    width: 24px;
    height: 24px;
    border: 2px solid #c7d2e2;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.marketing-center-check > span::after {
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    margin: 2px 0 0 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.marketing-center-check input:checked + span {
    border-color: #6c63ff;
    background: #6c63ff;
}

.marketing-center-check input:checked + span::after {
    opacity: 1;
}

.marketing-center-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-center-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketing-center-thumb.is-placeholder {
    color: #6c63ff;
}

.marketing-center-copy {
    display: grid;
    gap: 0.12rem;
}

.marketing-center-copy strong {
    color: #111827;
    font-size: 1.04rem;
}

.marketing-center-copy small {
    color: #64748b;
    line-height: 1.45;
}

.marketing-success-screen {
    min-height: calc(100vh - 120px);
}

.marketing-success-shell {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    padding-top: 3rem;
}

.marketing-success-mark {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #4ade80 0%, #22c55e 58%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(34, 197, 94, 0.22);
}

.marketing-success-mark .material-symbols-outlined {
    font-size: 2.2rem;
    line-height: 1;
}

.marketing-success-copy {
    margin-bottom: 0;
    text-align: center;
}

.marketing-success-card {
    width: min(760px, 100%);
    padding: 2rem 2.1rem;
    border: 1px solid #d8dee8;
    border-radius: 18px;
    background: #fff;
}

.marketing-success-card h3 {
    margin: 0 0 1rem;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 800;
}

.marketing-success-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.marketing-success-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    color: #111827;
    line-height: 1.5;
}

.marketing-success-list .material-symbols-outlined {
    color: #6c63ff;
    font-size: 1.2rem;
    margin-top: 0.1rem;
}

.marketing-scope-stack {
    display: grid;
    gap: 0.8rem;
}

.marketing-scope-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: 0.95rem 1.1rem;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    background: #fff;
}

.marketing-scope-card > span,
.marketing-scope-card-copy > span {
    color: #111827;
    font-weight: 700;
}

.marketing-scope-card strong {
    color: #6c63ff;
    font-weight: 700;
}

.marketing-scope-card-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.marketing-scope-card-selectable {
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.marketing-scope-card-selectable:hover,
.marketing-scope-card-selectable:focus-visible {
    border-color: #6c63ff;
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.marketing-scope-card.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
}

.marketing-scope-action {
    color: #6c63ff;
    font-weight: 800;
    white-space: nowrap;
}

.marketing-scope-error {
    margin: -0.1rem 0 0;
    color: #dc2626;
    font-size: 0.94rem;
    font-weight: 600;
}

.marketing-scope-modal {
    position: fixed;
    inset: 0;
    z-index: 3600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px);
}

.marketing-scope-modal[hidden] {
    display: none !important;
}

.marketing-scope-picker {
    width: min(880px, 100%);
    max-height: min(84vh, 760px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.marketing-scope-picker-head,
.marketing-scope-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid #e5e7eb;
}

.marketing-scope-picker-foot {
    border-top: 1px solid #e5e7eb;
    border-bottom: 0;
}

.marketing-scope-picker-head h3 {
    margin: 0;
    color: #111827;
    font-size: 1.35rem;
    font-weight: 800;
}

.marketing-scope-picker-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d8dee8;
    border-radius: 999px;
    background: #fff;
    color: #132238;
    cursor: pointer;
}

.marketing-scope-picker-search {
    padding: 1rem 1.4rem 0;
}

.marketing-scope-picker-search input {
    width: 100%;
}

.marketing-scope-picker-body {
    min-height: 240px;
    overflow: auto;
    padding: 1rem 1.4rem 1.2rem;
}

.marketing-scope-picker-group + .marketing-scope-picker-group {
    margin-top: 1.1rem;
}

.marketing-scope-picker-group header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.marketing-scope-picker-group h4 {
    margin: 0;
    color: #132238;
    font-size: 1rem;
    font-weight: 800;
}

.marketing-scope-picker-group header span {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 700;
}

.marketing-scope-picker-items {
    display: grid;
}

.marketing-scope-picker-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid #eef2f7;
}

.marketing-scope-picker-item input {
    width: 18px;
    height: 18px;
}

.marketing-scope-picker-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.marketing-scope-picker-copy strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
}

.marketing-scope-picker-copy small {
    color: #64748b;
    font-size: 0.85rem;
}

.marketing-scope-picker-price {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.marketing-scope-picker-empty {
    padding: 2.2rem 0.5rem;
    color: #64748b;
    text-align: center;
}

.marketing-inline-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: 0.75rem;
}

.marketing-offer-copy-topline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.marketing-offer-copy-topline span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.12rem 0.65rem;
    border-radius: 999px;
    background: #f4f5fb;
    color: #5b4bff;
    font-size: 0.8rem;
    font-weight: 800;
}

.marketing-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.marketing-placeholder-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.35rem;
}

.marketing-placeholder-card-soft {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.marketing-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(56, 189, 248, 0.14));
    color: #1d4ed8;
    font-size: 1.55rem;
}

.marketing-placeholder-card h3 {
    margin: 0 0 0.25rem;
    color: #132238;
}

.marketing-placeholder-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
}

@media (max-width: 1080px) {
    .marketing-offer-card {
        grid-template-columns: 1fr;
    }

    .marketing-offer-meta {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .marketing-form-grid,
    .marketing-placeholder-grid,
    .marketing-wizard-form-grid,
    .marketing-inline-split {
        grid-template-columns: 1fr;
    }

    .marketing-scope-picker {
        width: min(720px, 100%);
    }
}

@media (max-width: 640px) {
    .marketing-toolbar,
    .marketing-editor-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .marketing-filter-select,
    .marketing-offer-sales {
        min-width: 0;
        justify-items: start;
    }

    .marketing-offer-main {
        align-items: flex-start;
    }

    .marketing-scope-modal {
        padding: 1rem;
    }

    .marketing-scope-picker-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .marketing-scope-picker-price {
        grid-column: 2;
        padding-left: 0.1rem;
    }

    .marketing-offer-meta {
        align-items: stretch;
    }

    .marketing-create-toolbar {
        grid-template-columns: 1fr;
    }

    .marketing-create-surface {
        padding: 0;
    }

    .marketing-create-modal-shell {
        padding-inline: 0.8rem;
    }

    .marketing-create-topbar {
        margin-inline: -0.8rem;
        padding-inline: 0.95rem;
    }

    .marketing-create-toolbar-actions {
        justify-content: flex-end;
        flex-direction: column;
        align-items: stretch;
        margin-left: auto;
    }

    .marketing-create-toolbar-actions > * {
        width: 100%;
    }

    .marketing-discount-row {
        grid-template-columns: 1fr;
    }

    .marketing-scope-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

.clients-drawer[hidden] {
    display: none;
}

.clients-drawer {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
}

.clients-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.14);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: auto;
}

.clients-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(1240px, 96vw);
    background: #ffffff;
    border-left: 1px solid rgba(214, 220, 232, 0.9);
    box-shadow: 0 24px 50px rgba(10, 16, 26, 0.22);
    transform: translateX(104%);
    transition: transform 0.22s ease;
    pointer-events: auto;
    overflow: visible;
}

.clients-drawer.is-open .clients-drawer-backdrop {
    opacity: 1;
}

.clients-drawer.is-open .clients-drawer-panel {
    transform: translateX(0);
}

.clients-drawer-close,
.clients-hub-close {
    position: absolute;
    top: 0.9rem;
    left: -42px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #d8dde6;
    background: #f4f6f8;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    z-index: 6;
    cursor: pointer;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.10),
        0 1px 2px rgba(15, 23, 42, 0.05);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.clients-drawer-close::before,
.clients-drawer-close::after,
.clients-hub-close::before,
.clients-hub-close::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2.5px;
    border-radius: 999px;
    background: #111827;
}

.clients-drawer-close::before,
.clients-hub-close::before {
    transform: rotate(45deg);
}

.clients-drawer-close::after,
.clients-hub-close::after {
    transform: rotate(-45deg);
}

.clients-drawer-close:hover,
.clients-hub-close:hover {
    background: #ffffff;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.13),
        0 1px 2px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.clients-drawer-body {
    height: 100%;
    overflow: hidden;
}

.clients-drawer-loading {
    height: 100%;
    display: grid;
    place-content: center;
    gap: 0.65rem;
    color: #52627a;
    font-weight: 700;
}

.clients-drawer-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(31, 198, 215, 0.18);
    border-top-color: rgba(31, 198, 215, 0.95);
    animation: clientsDrawerSpin 0.75s linear infinite;
    margin-inline: auto;
}

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

.clients-drawer-error {
    padding: 1.2rem;
    color: #6a2a2a;
    font-weight: 700;
}

.clients-drawer .clients-hub-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.clients-drawer .clients-hub-close {
    display: none;
}

.clients-drawer .clients-hub-layout {
    height: 100%;
    min-height: 0;
}

.clients-drawer .clients-hub-card,
.clients-drawer .clients-hub-nav {
    overflow-y: auto;
}

.clients-drawer .clients-hub-main {
    overflow-y: auto;
    min-height: 0;
    padding-top: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #ffffff !important;
}

.clients-drawer .clients-hub-main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.clients-drawer .clients-hub-section-head {
    margin: 0;
    padding: 1.05rem 1.25rem 0.85rem;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.clients-drawer .clients-hub-sales-shell {
    gap: 0.75rem;
}

.clients-drawer .clients-hub-sticky-head,
.clients-drawer .clients-hub-sticky-head-appointments {
    top: 0 !important;
    margin-top: 0 !important;
}

.inventory-drawer .clients-drawer-panel {
    width: min(1120px, 96vw);
    background: #f7f7f8;
    overflow: visible;
}

.inventory-drawer .clients-drawer-body {
    background: #f7f7f8;
    overflow: hidden;
}

.inventory-drawer .inventory-hub-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.inventory-drawer .inventory-hub-layout {
    grid-template-columns: 278px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.inventory-drawer .inventory-hub-card {
    position: relative;
    z-index: 4;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100dvh;
    scrollbar-width: thin;
    scrollbar-color: rgba(121, 164, 214, 0.7) rgba(214, 220, 230, 0.55);
}

.inventory-drawer .inventory-hub-card::-webkit-scrollbar {
    width: 5px;
}

.inventory-drawer .inventory-hub-card::-webkit-scrollbar-track {
    background: rgba(214, 220, 230, 0.55);
    border-radius: 999px;
}

.inventory-drawer .inventory-hub-card::-webkit-scrollbar-thumb {
    background: rgba(121, 164, 214, 0.7);
    border-radius: 999px;
}

.inventory-drawer .inventory-hub-main {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    min-height: 0;
}

.inventory-hub-card {
    padding: 1.45rem 1.15rem 1.15rem;
}

.inventory-hub-photo-shell {
    position: relative;
    width: 100%;
    max-width: 232px;
    margin: 0 auto;
}

.inventory-hub-photo-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    min-height: 30px;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.94);
    color: #111a2a;
    font-size: 0.82rem;
    font-weight: 700;
}

.inventory-hub-photo-stage {
    position: relative;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
}

.inventory-hub-photo-stage.has-image {
    background: #ffffff;
}

.inventory-hub-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.24s ease;
}

.inventory-hub-photo-glow {
    position: absolute;
    left: 20%;
    bottom: 31%;
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 215, 150, 0.44);
    filter: blur(20px);
}

.inventory-hub-photo-jar,
.inventory-hub-photo-candle {
    position: absolute;
    bottom: 16%;
    border-radius: 12px 12px 10px 10px;
    box-shadow: 0 14px 22px rgba(38, 22, 15, 0.22);
}

.inventory-hub-photo-jar {
    left: 13%;
    width: 29%;
    height: 40%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #5d331f 0%, #87472a 62%, #3d2318 100%);
}

.inventory-hub-photo-jar::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 26%;
    width: 48%;
    height: 17%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #d5d7dc, #a9b0b8);
}

.inventory-hub-photo-candle {
    left: 60%;
    width: 31%;
    height: 43%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #eee8dd 0%, #d4c7b6 70%, #96806c 100%);
}

.inventory-hub-photo-candle::before {
    content: "";
    position: absolute;
    top: -13%;
    left: 45%;
    width: 9%;
    height: 17%;
    border-radius: 999px;
    background: #202328;
}

.inventory-hub-photo-candle::after {
    content: "";
    position: absolute;
    top: -27%;
    left: 34%;
    width: 24%;
    height: 27%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.9) 34%, rgba(255, 175, 73, 0.9) 60%, rgba(255, 138, 45, 0.1) 100%);
}

.inventory-hub-photo-surface {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: 24%;
    background:
        linear-gradient(90deg, rgba(88, 109, 141, 0.55) 0 14%, rgba(241, 226, 195, 0.85) 14% 28%, rgba(110, 128, 159, 0.5) 28% 42%, rgba(241, 226, 195, 0.85) 42% 56%, rgba(110, 128, 159, 0.5) 56% 70%, rgba(241, 226, 195, 0.85) 70% 84%, rgba(110, 128, 159, 0.5) 84% 100%);
    opacity: 0.8;
}

.inventory-hub-photo-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.8rem 0 0.95rem;
}

.inventory-hub-photo-dots.is-hidden {
    display: none;
}

.inventory-hub-photo-dots span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #dedfe4;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.inventory-hub-photo-dots span:hover {
    transform: scale(1.08);
}

.inventory-hub-photo-dots span.is-active {
    background: #c5c7cf;
}

.inventory-order-product-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.inventory-hub-card-subtitle {
    margin: 0.22rem 0 0.8rem;
    text-align: center;
    color: #6a778a;
    font-size: 0.9rem;
    font-weight: 600;
}

.inventory-hub-stock-pill {
    width: fit-content;
    margin: 0 auto 1rem;
    padding: 0.4rem 0.82rem;
    border-radius: 999px;
    border: 1px solid #d7d7f4;
    background: #f1f0ff;
    color: #5f56ff;
    font-size: 0.88rem;
    font-weight: 700;
}

.inventory-hub-pill-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.inventory-hub-pill-row .inventory-hub-stock-pill {
    margin: 0;
}

.inventory-hub-order-pill {
    width: fit-content;
    padding: 0.4rem 0.82rem;
    border-radius: 999px;
    border: 1px solid #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
    font-size: 0.88rem;
    font-weight: 700;
}

.inventory-hub-card-actions {
    justify-content: center;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown,
.inventory-hub-card-actions .clients-hub-actions-dropdown summary {
    width: 100%;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown summary {
    position: relative;
    justify-content: center;
    padding-right: 2.8rem;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown summary::after {
    content: 'expand_more';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    font-family: 'Material Symbols Outlined';
    font-size: 1.1rem;
    line-height: 1;
    color: #1f2938;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.inventory-hub-card-actions .clients-hub-actions-dropdown[open] summary::after {
    content: 'expand_less';
}

.inventory-hub-actions-menu {
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0.42rem;
    gap: 0.2rem;
}

.inventory-hub-actions-menu .inventory-hub-action-item {
    width: 100%;
    padding: 0.8rem 0.88rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #171f30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    text-align: left;
    text-decoration: none;
    font-size: 0.96rem;
    font-weight: 650;
    cursor: pointer;
}

.inventory-hub-actions-menu .inventory-hub-action-item:hover {
    background: #f4f6fb;
}

.inventory-hub-action-item .material-symbols-outlined {
    font-size: 1.28rem;
    color: currentColor;
}

.inventory-hub-action-item.is-pending {
    opacity: 0.54;
    cursor: not-allowed;
}

.inventory-hub-action-item.is-danger {
    color: #eb2c4b;
}

.inventory-stock-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    background: rgba(15, 23, 42, 0.14);
}

.inventory-stock-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.inventory-stock-modal-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    color: transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.inventory-stock-modal-backdrop:hover,
.inventory-stock-modal-backdrop:focus-visible,
.inventory-stock-modal-backdrop:active {
    background: transparent;
    box-shadow: none;
    outline: none;
}

.inventory-stock-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 92vw);
    max-height: min(760px, calc(100vh - 2.4rem));
    min-height: 0;
    border-radius: 18px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    box-shadow: 0 28px 54px rgba(12, 23, 36, 0.24);
    padding: 1.7rem 1.8rem 1.9rem;
    display: grid;
    gap: 1.35rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.inventory-stock-dialog::-webkit-scrollbar {
    width: 6px;
}

.inventory-stock-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.inventory-stock-dialog::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(121, 134, 156, 0.38);
}

.inventory-stock-dialog::-webkit-scrollbar-thumb:hover {
    background: rgba(121, 134, 156, 0.56);
}

.inventory-stock-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.inventory-stock-close::before,
.inventory-stock-close::after {
    content: "";
    position: absolute;
    inset: 18px 9px auto;
    height: 2px;
    border-radius: 999px;
    background: #111827;
}

.inventory-stock-close::before {
    transform: rotate(45deg);
}

.inventory-stock-close::after {
    transform: rotate(-45deg);
}

.inventory-stock-dialog-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.75rem, 2vw, 2.1rem);
    font-weight: 900;
}

.inventory-stock-dialog-body {
    display: grid;
    gap: 1.3rem;
}

.inventory-order-email-dialog {
    width: min(760px, 92vw);
}

.inventory-order-email-form {
    display: grid;
    gap: 1.35rem;
}

.inventory-order-email-config {
    display: grid;
    gap: 0.28rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    border: 1px solid #dbe2ed;
    background: #f7f8fb;
}

.inventory-order-email-config strong {
    color: #101a2b;
    font-size: 0.95rem;
    font-weight: 800;
}

.inventory-order-email-config p {
    margin: 0;
    color: #5f7088;
    font-size: 0.9rem;
    line-height: 1.45;
}

.inventory-order-email-config.is-ready {
    border-color: #cfe7bf;
    background: #eef8e8;
}

.inventory-order-email-config.is-pending {
    border-color: #f4b8bf;
    background: #fff1f3;
}

.inventory-order-email-config.is-pending strong {
    color: #a11d33;
}

.inventory-order-email-config.is-pending p {
    color: #b42338;
}

.inventory-order-email-config.is-pending .clients-hub-section-link {
    color: #c01048;
}

.inventory-order-email-body {
    gap: 1.15rem;
}

.inventory-order-delete-modal {
    align-items: center;
    justify-items: center;
}

.inventory-order-delete-dialog {
    width: min(640px, 92vw);
    margin: 0 auto;
    padding: 2.15rem 2.5rem 1.95rem;
    justify-self: center;
    align-self: center;
}

.inventory-order-delete-head {
    display: grid;
    justify-items: center;
    text-align: center;
    padding: 0 2.4rem;
}

.inventory-order-delete-head h3 {
    font-size: clamp(1.28rem, 1.6vw, 1.6rem);
}

.inventory-order-delete-body {
    display: grid;
    justify-items: center;
    padding-top: 0.4rem;
    text-align: center;
}

.inventory-order-delete-body p {
    max-width: 380px;
    margin: 0;
    color: #1a2434;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.55;
    font-weight: 500;
}

.inventory-order-delete-actions {
    margin-top: 0.8rem;
    justify-content: center;
}

.inventory-order-delete-actions .btn {
    min-width: 186px;
    min-height: 48px;
}

.inventory-order-delete-submit {
    border-radius: 999px;
    border-color: #e3133f;
    background: #e3133f;
    color: #ffffff;
    box-shadow: none;
}

.inventory-order-delete-submit:hover,
.inventory-order-delete-submit:focus-visible {
    border-color: #c80f37;
    background: #c80f37;
    color: #ffffff;
}

.service-delete-modal {
    z-index: 360;
}

.service-delete-modal .inventory-stock-modal-backdrop {
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

.service-delete-modal .inventory-stock-modal-backdrop:hover,
.service-delete-modal .inventory-stock-modal-backdrop:focus-visible,
.service-delete-modal .inventory-stock-modal-backdrop:active {
    background: rgba(15, 23, 42, 0.28);
}

.service-delete-dialog {
    width: min(700px, 92vw);
    padding: 2.05rem 2.55rem 2rem;
    gap: 1.65rem;
}

.service-delete-head {
    display: grid;
    justify-items: start;
    text-align: left;
    padding: 0 3rem 0 0;
}

.service-delete-head h3 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.12rem, 1.32vw, 1.34rem);
    font-weight: 800;
    line-height: 1.15;
}

.service-delete-body {
    display: grid;
    justify-items: start;
    text-align: left;
    padding-top: 0;
}

.service-delete-body p {
    max-width: none;
    color: #101828;
    text-align: left;
    font-size: 1.08rem;
    line-height: 1.55;
    font-weight: 500;
}

.service-delete-actions {
    margin-top: 0.2rem;
    justify-content: center;
    gap: 1rem;
}

.service-delete-actions .btn {
    min-width: 190px;
    min-height: 52px;
}

.inventory-order-calendar-modal {
    z-index: 1260;
}

.inventory-order-calendar-dialog {
    width: min(660px, 88vw);
    padding: 1.45rem 1.8rem 1.45rem;
    gap: 1.15rem;
}

.inventory-order-calendar-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.22rem, 1.55vw, 1.55rem);
    font-weight: 900;
}

.inventory-order-calendar-body {
    display: grid;
    gap: 0.8rem;
}

.inventory-order-calendar-nav {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 0.8rem;
}

.inventory-order-calendar-title {
    color: #0f1728;
    font-size: 1.02rem;
    font-weight: 900;
    text-align: center;
}

.inventory-order-calendar-nav-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.inventory-order-calendar-nav-button:hover,
.inventory-order-calendar-nav-button:focus-visible {
    background: #f4f6fb;
    color: #111827;
}

.inventory-order-calendar-weekdays,
.inventory-order-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.inventory-order-calendar-weekdays span {
    color: #68778d;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: center;
    text-transform: lowercase;
}

.inventory-order-calendar-day {
    width: min(52px, 100%);
    height: 52px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    font-size: 0.96rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-calendar-day:hover,
.inventory-order-calendar-day:focus-visible {
    background: #f5f7fb;
    color: #111827;
    border-color: #eef2f7;
}

.inventory-order-calendar-day.is-outside {
    color: #a8b2c1;
    font-weight: 500;
}

.inventory-order-calendar-day.is-today {
    border-color: #cfd7e3;
}

.inventory-order-calendar-day.is-selected {
    border-color: #6558f5;
    background: #6558f5;
    color: #ffffff;
}

.inventory-order-calendar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.2rem;
}

.inventory-order-calendar-actions .btn {
    min-width: 112px;
}

.inventory-order-calendar-save {
    border-radius: 999px;
}

.inventory-order-center-modal {
    z-index: 1260;
}

.inventory-order-center-dialog {
    width: min(700px, 92vw);
    max-height: min(720px, calc(100vh - 2.4rem));
    box-sizing: border-box;
    min-height: 0;
    padding: 1.55rem 1.8rem 1.7rem;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 1rem;
    overflow: hidden;
}

.inventory-order-center-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
    font-weight: 900;
}

.inventory-order-center-copy {
    margin: -0.2rem 0 0;
    color: #667588;
    font-size: 0.94rem;
    line-height: 1.55;
}

.inventory-order-center-list {
    display: grid;
    gap: 0.75rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.2rem;
}

.inventory-order-center-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid #d8e0eb;
    border-radius: 18px;
    background: #ffffff;
    color: #0f1728;
    text-align: left;
    box-shadow: none;
}

.inventory-order-center-option:hover,
.inventory-order-center-option:focus-visible {
    border-color: #c8d1df;
    background: #f9fbfe;
    color: #0f1728;
}

.inventory-order-center-option.is-selected {
    border-color: #c9c5ff;
    background: #f6f5ff;
    box-shadow: inset 0 0 0 1px rgba(99, 88, 231, 0.12);
}

.inventory-order-center-option-thumb {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ecebfa 0%, #dfe2f8 100%);
    color: #6358e7;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-order-center-option-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.inventory-order-center-option-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.inventory-order-center-option-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 850;
}

.inventory-order-center-option-copy span,
.inventory-order-center-option-copy small {
    margin: 0;
    color: #6a778b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inventory-order-center-option-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eef1ff;
    color: #6157e8;
    font-size: 0.76rem;
    font-weight: 800;
}

.inventory-order-center-option .material-symbols-outlined {
    font-size: 1.3rem;
    color: #c6cfdd;
}

.inventory-order-center-option.is-selected .material-symbols-outlined {
    color: #6358e7;
}

.inventory-order-center-empty {
    margin: 0;
    padding: 1.1rem;
    border: 1px dashed #d8e0eb;
    border-radius: 16px;
    color: #6a778b;
    font-size: 0.94rem;
    text-align: center;
}

.inventory-order-center-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.inventory-order-center-save {
    border-radius: 999px;
}

.inventory-order-ready-modal {
    z-index: 1260;
}

.inventory-order-ready-dialog {
    width: min(980px, 94vw);
    max-height: min(820px, calc(100vh - 2.4rem));
    padding: 1.15rem 1.4rem 1.5rem;
    display: grid;
    gap: 1.2rem;
    border-radius: 28px;
    overflow-y: auto;
    overflow-x: hidden;
}

.inventory-order-ready-topbar {
    display: flex;
    justify-content: flex-end;
}

.inventory-order-ready-ok {
    min-height: 44px;
    padding: 0.65rem 1.25rem;
    border: 1px solid #07080d;
    border-radius: 999px;
    background: #07080d;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-ready-ok:hover,
.inventory-order-ready-ok:focus-visible {
    border-color: #191c22;
    background: #191c22;
    color: #ffffff;
}

.inventory-order-ready-hero {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0 0.1rem;
    text-align: center;
}

.inventory-order-ready-badge {
    width: 86px;
    height: 86px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.82), transparent 24%),
        linear-gradient(180deg, #58c86a 0%, #219653 100%);
    display: grid;
    place-items: center;
    color: #ffffff;
    box-shadow: 0 22px 36px rgba(34, 153, 84, 0.24);
}

.inventory-order-ready-badge .material-symbols-outlined {
    font-size: 2.3rem;
    font-weight: 700;
}

.inventory-order-ready-hero h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    font-weight: 900;
}

.inventory-order-ready-hero p {
    max-width: 620px;
    margin: 0;
    color: #667588;
    font-size: 1rem;
    line-height: 1.6;
}

.inventory-order-ready-summary {
    padding: 1.35rem 1.45rem;
    border: 1px solid #e1e8f1;
    border-radius: 22px;
    background: #ffffff;
}

.inventory-order-ready-summary h4 {
    margin: 0 0 1rem;
    color: #0f1728;
    font-size: 1.14rem;
    font-weight: 900;
}

.inventory-order-ready-summary-list {
    display: grid;
    gap: 0.8rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.inventory-order-ready-summary-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #112034;
    font-size: 1rem;
}

.inventory-order-ready-summary-list .material-symbols-outlined {
    color: #28924d;
    font-size: 1.2rem;
}

.inventory-order-ready-summary-list strong {
    color: #0f1728;
    font-weight: 900;
}

.inventory-order-ready-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.inventory-order-ready-card {
    display: grid;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid #e1e8f1;
    border-radius: 22px;
    background: #ffffff;
}

.inventory-order-ready-card-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
}

.inventory-order-ready-card-copy .material-symbols-outlined {
    color: #111827;
    font-size: 1.4rem;
}

.inventory-order-ready-card-copy h4 {
    margin: 0 0 0.25rem;
    color: #0f1728;
    font-size: 1.08rem;
    font-weight: 900;
}

.inventory-order-ready-card-copy p {
    margin: 0;
    color: #697689;
    font-size: 0.94rem;
    line-height: 1.55;
}

.inventory-order-ready-action {
    justify-self: end;
    min-height: 42px;
    padding-inline: 1.1rem;
    border-radius: 999px;
}

@media (max-width: 820px) {
    .inventory-order-ready-dialog {
        width: min(94vw, 720px);
        padding: 1rem 1rem 1.2rem;
    }

    .inventory-order-ready-actions {
        grid-template-columns: 1fr;
    }

    .inventory-order-ready-action {
        justify-self: start;
    }
}

.inventory-order-surcharge-modal {
    z-index: 1260;
}

.inventory-order-surcharge-dialog {
    width: min(760px, 92vw);
    max-height: min(720px, calc(100vh - 2.4rem));
    box-sizing: border-box;
    min-height: 0;
    padding: 1.55rem 2.15rem 1.65rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 1.25rem;
    align-self: center;
    overflow: hidden;
}

.inventory-order-surcharge-head h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.35rem, 1.75vw, 1.8rem);
    font-weight: 900;
}

.inventory-order-surcharge-body {
    display: grid;
    gap: 1.15rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.2rem;
}

.inventory-order-surcharge-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) auto auto;
    gap: 0.75rem;
    align-items: end;
}

.inventory-order-surcharge-field {
    display: grid;
    gap: 0.42rem;
}

.inventory-order-surcharge-field span {
    color: #111c2d;
    font-size: 0.94rem;
    font-weight: 800;
}

.inventory-order-surcharge-field input {
    height: 46px;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-order-surcharge-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    min-height: 46px;
    padding: 4px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    background: #f3f5f8;
}

.inventory-order-surcharge-type {
    min-width: 56px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f1728;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-surcharge-type.is-active {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 40, 0.08);
}

.inventory-order-surcharge-remove {
    width: 40px;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #151d2a;
    box-shadow: none;
}

.inventory-order-surcharge-remove:hover,
.inventory-order-surcharge-remove:focus-visible {
    background: #f4f6fb;
    color: #151d2a;
}

.inventory-order-surcharge-add {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6257ff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-surcharge-add:hover,
.inventory-order-surcharge-add:focus-visible {
    color: #564ae8;
    background: transparent;
}

.inventory-order-surcharge-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.15rem;
}

.inventory-order-surcharge-save {
    border-radius: 999px;
}

.inventory-order-products-modal {
    z-index: 1260;
}

.inventory-order-products-dialog {
    width: min(1160px, 94vw);
    max-height: calc(100vh - 2rem);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 1.1rem;
    padding: 1.45rem 1.55rem 1.25rem;
    border-radius: 28px;
    border: 1px solid #e1e8f1;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 32px 72px rgba(14, 28, 44, 0.24);
    overflow: hidden;
}

.inventory-order-products-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #edf1f7;
}

.inventory-order-products-copy {
    display: grid;
    gap: 0.25rem;
}

.inventory-order-products-copy h3 {
    margin: 0;
    color: #0f1728;
    font-size: clamp(1.18rem, 1.45vw, 1.48rem);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.inventory-order-products-copy p {
    margin: 0;
    color: #667587;
    font-size: 0.93rem;
    line-height: 1.55;
}

.inventory-order-products-head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.inventory-order-products-submit {
    border-radius: 999px;
}

.inventory-order-products-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid #e7edf5;
    border-radius: 22px;
    background: #f7f9fc;
}

.inventory-order-products-search {
    min-width: 0;
}

.inventory-order-products-order-shell {
    justify-self: end;
    min-width: 310px;
}

.inventory-order-products-order {
    width: 100%;
    min-height: 42px;
    padding: 0.56rem 2.7rem 0.56rem 1rem;
    border: 1px solid #d5ddeb;
    border-radius: 999px;
    background: #ffffff;
    color: #101927;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-products-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    min-height: 34px;
    padding-inline: 0.15rem;
}

.inventory-order-products-supplier-pill {
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.56rem 0.92rem;
    border: 1px solid #d6ddff;
    background: #eef1ff;
    color: #584ee0;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: none;
}

.inventory-order-products-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7788;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: none;
}

.inventory-order-products-clear:hover,
.inventory-order-products-clear:focus-visible {
    background: transparent;
    color: #101927;
}

.inventory-order-products-table-shell {
    min-height: 0;
    overflow: auto;
    border: 1px solid #e6ecf4;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.inventory-order-products-table {
    min-width: 920px;
    background: transparent;
}

.inventory-order-products-check-col {
    width: 54px;
    text-align: center;
}

.inventory-order-products-table td:first-child,
.inventory-order-products-table th:first-child {
    width: 54px;
    text-align: center;
}

.inventory-order-products-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.9rem 1rem;
    background: #f8fafd;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inventory-order-products-table td {
    padding: 1rem;
    vertical-align: middle;
}

.inventory-order-products-table tbody tr.is-selected td {
    background: #f7f9ff;
}

.inventory-order-products-table tbody tr.is-selected .inventory-order-products-name-copy strong {
    color: #4d45d6;
}

.inventory-order-products-table input[type="checkbox"] {
    width: 24px;
    height: 24px;
    accent-color: #6155f6;
}

.inventory-order-products-name-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 280px;
}

.inventory-order-products-thumb.clients-pro-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 16px;
    border: 1px solid rgba(211, 219, 231, 0.98);
    background: #f5f7fb;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(19, 33, 51, 0.1);
}

.inventory-order-products-name-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.inventory-order-products-name-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.22;
}

.inventory-order-products-name-copy small {
    color: #6b7788;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
}

.inventory-order-products-table .inventory-table-tag,
.inventory-order-products-table .inventory-table-stock-pill {
    min-height: 34px;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    font-size: 0.83rem;
}

.inventory-order-products-table .inventory-table-price {
    font-size: 0.96rem;
}

.inventory-order-products-footer {
    padding: 0.9rem 0.1rem 0;
    border-top: 1px solid #edf1f7;
}

@media (max-width: 760px) {
    .inventory-order-surcharge-dialog {
        padding: 1.25rem 1rem 1.2rem;
    }

    .inventory-order-surcharge-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .inventory-order-surcharge-toggle,
    .inventory-order-surcharge-remove {
        justify-self: start;
    }

    .inventory-order-products-dialog {
        width: min(96vw, 96vw);
        padding: 1rem 0.85rem 1rem;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        border-radius: 22px;
    }

    .inventory-order-products-head,
    .inventory-order-products-head-actions,
    .inventory-order-products-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-order-products-order-shell {
        min-width: 0;
        width: 100%;
        justify-self: stretch;
    }

    .inventory-order-products-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-order-products-thumb.clients-pro-avatar {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .inventory-order-products-name-cell {
        min-width: 220px;
    }
}

.inventory-stock-summary {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    text-align: center;
}

.inventory-stock-summary h4 {
    margin: 0;
    color: #111b2c;
    font-size: 1.15rem;
    font-weight: 900;
}

.inventory-stock-dialog-pill {
    margin: 0;
}

.inventory-stock-qty-block {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
}

.inventory-stock-qty-block strong {
    color: #101a2b;
    font-size: 0.92rem;
    font-weight: 900;
}

.inventory-stock-stepper {
    display: grid;
    grid-template-columns: 56px minmax(110px, 150px) 56px;
    gap: 0.55rem;
    align-items: center;
}

.inventory-stock-step {
    width: 50px;
    height: 50px;
    border: 1px solid #d8dde8;
    border-radius: 999px;
    background: #ffffff;
    color: #202939;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.inventory-stock-step span {
    font-size: 2rem;
    line-height: 1;
    transform: translateY(-1px);
}

.inventory-stock-stepper input {
    height: 50px;
    border: 1px solid #b8c3d5;
    border-radius: 0;
    background: #ffffff;
    color: #0f1728;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
}

.inventory-stock-field {
    display: grid;
    gap: 0.42rem;
}

.inventory-stock-field label {
    color: #121c2d;
    font-size: 0.92rem;
    font-weight: 800;
}

.inventory-stock-field input,
.inventory-stock-field select,
.inventory-stock-field textarea {
    height: 48px;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

.inventory-stock-field textarea {
    min-height: 152px;
    height: auto;
    padding: 0.95rem 1rem;
    resize: vertical;
}

.inventory-stock-field label span {
    color: #6b7789;
    font-weight: 600;
}

.inventory-order-email-help {
    color: #6b7789;
    font-size: 0.88rem;
    line-height: 1.45;
}

.inventory-order-email-attachment {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-height: 56px;
    padding: 0.9rem 1rem;
    border: 1px solid #d8dee9;
    border-radius: 12px;
    background: #f8f9fb;
    color: #657489;
    font-size: 0.96rem;
    font-weight: 600;
}

.inventory-order-email-attachment .material-symbols-outlined {
    color: #111c2d;
}

.inventory-stock-price-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0 0.95rem;
    border: 1px solid #cfd7e3;
    border-radius: 12px;
    background: #ffffff;
}

.inventory-stock-price-field span {
    color: #7a8598;
    font-size: 0.92rem;
    font-weight: 700;
}

.inventory-stock-price-field input {
    border: 0;
    padding: 0;
    height: auto;
}

.inventory-stock-check {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #1d2839;
    font-size: 0.92rem;
    font-weight: 600;
}

.inventory-stock-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    accent-color: #6d5ef5;
}

.inventory-stock-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

.inventory-stock-dialog-actions .btn {
    min-width: 124px;
    justify-content: center;
}

.inventory-stock-primary {
    border-radius: 999px;
}

.inventory-order-email-submit {
    border-color: var(--lh-cyan);
    background: var(--lh-cyan);
    color: #ffffff;
    box-shadow: none;
}

.inventory-order-email-submit:hover,
.inventory-order-email-submit:focus-visible {
    border-color: var(--lh-cyan-2);
    background: var(--lh-cyan-2);
    color: #ffffff;
}

.inventory-stock-secondary {
    border-radius: 999px;
}

.inventory-hub-nav {
    padding-top: 1.1rem;
}

.inventory-hub-side-nav {
    margin-top: 1rem;
    padding: 1rem 0 0;
    border-top: 1px solid #e7ebf2;
    border-right: 0;
    background: transparent;
}

.inventory-hub-side-nav > a {
    width: 100%;
}

.inventory-hub-main {
    background: #f7f7f8;
    padding: 1.3rem 1.3rem 1.4rem;
}

.inventory-hub-main > h2,
.inventory-hub-view-panel > h2 {
    margin: 0 0 1.25rem;
}

.inventory-hub-view-panel[hidden] {
    display: none !important;
}

.inventory-hub-view-panel {
    display: none;
}

.inventory-hub-view-panel.is-active {
    display: block;
}

.inventory-hub-section-panel {
    display: none;
}

.inventory-hub-section-panel.is-active {
    display: block;
}

.inventory-hub-stack {
    gap: 1rem;
}

.inventory-hub-data-card {
    padding: 0;
    overflow: hidden;
}

.inventory-hub-data-card-compact .inventory-hub-data-body {
    padding-top: 0.9rem;
}

.inventory-hub-data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e7ebf2;
}

.inventory-hub-data-head h3 {
    margin: 0;
    color: #101a2b;
    font-size: 0.98rem;
    font-weight: 850;
}

.inventory-hub-data-body {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.15rem 1.1rem;
}

.inventory-hub-data-list {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.inventory-hub-data-list div {
    display: grid;
    grid-template-columns: minmax(190px, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.inventory-hub-data-list dt {
    color: #121c2d;
    font-size: 0.9rem;
    font-weight: 800;
}

.inventory-hub-data-list dd {
    margin: 0;
    color: #152235;
    font-size: 0.9rem;
    font-weight: 650;
    text-align: right;
}

.inventory-hub-copy-group {
    display: grid;
    gap: 0.95rem;
    padding-top: 1rem;
    border-top: 1px solid #eceff5;
}

.inventory-hub-copy-block h4 {
    margin: 0 0 0.24rem;
    color: #111c2d;
    font-size: 0.9rem;
    font-weight: 850;
}

.inventory-hub-copy-block p,
.inventory-hub-placeholder-copy {
    margin: 0;
    color: #203046;
    font-size: 0.92rem;
    line-height: 1.5;
}

.inventory-hub-orders-list {
    display: grid;
    gap: 1rem;
}

.inventory-hub-orders-empty {
    min-height: 248px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.55rem;
    padding: 2rem 1.25rem;
    border: 1px solid #dfe5ef;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
}

.inventory-hub-orders-empty-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background:
        radial-gradient(circle at 30% 28%, rgba(113, 93, 255, 0.18), rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #f4f1ff 0%, #f8f7ff 100%);
    color: #5b49dc;
}

.inventory-hub-orders-empty-icon .material-symbols-outlined {
    font-size: 2.2rem;
    font-variation-settings: 'wght' 500;
}

.inventory-hub-orders-empty strong {
    color: #0f1728;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.inventory-hub-orders-empty p {
    margin: 0;
    color: #667487;
    font-size: 0.98rem;
    font-weight: 500;
}

.inventory-hub-order-card {
    width: 100%;
    appearance: none;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid #dde3ed;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 24, 38, 0.06);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.inventory-hub-order-card:hover {
    border-color: #cfd8e6;
    box-shadow: 0 18px 36px rgba(15, 24, 38, 0.1);
    transform: translateY(-1px);
}

.inventory-hub-order-card:focus-visible {
    outline: 2px solid #9fcdf3;
    outline-offset: 2px;
}

.inventory-hub-order-thumb {
    position: relative;
    width: 62px;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #dde3eb;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.96), transparent 24%),
        radial-gradient(circle at 72% 28%, rgba(255, 224, 171, 0.9), transparent 20%),
        linear-gradient(180deg, #7f7170 0%, #a79f9c 58%, #ddd4cc 100%);
    box-shadow: inset 0 -10px 16px rgba(47, 38, 35, 0.12);
}

.inventory-hub-order-thumb::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26%;
    background:
        linear-gradient(
            90deg,
            rgba(108, 125, 153, 0.55) 0 18%,
            rgba(240, 226, 196, 0.9) 18% 36%,
            rgba(108, 125, 153, 0.45) 36% 54%,
            rgba(240, 226, 196, 0.9) 54% 72%,
            rgba(108, 125, 153, 0.45) 72% 100%
        );
    opacity: 0.9;
}

.inventory-hub-order-thumb::after {
    content: "";
    position: absolute;
    left: 21%;
    bottom: 24%;
    width: 24%;
    height: 34%;
    border-radius: 9px 9px 7px 7px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #6d4430 0%, #8f593d 62%, #4a2d20 100%);
    box-shadow:
        24px 2px 0 6px rgba(233, 226, 214, 0.96),
        32px -19px 0 -10px rgba(255, 215, 121, 0.92);
}

.inventory-hub-order-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.inventory-hub-order-copy h3 {
    margin: 0;
    color: #101928;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-hub-order-copy p {
    margin: 0;
    color: #6e7a8b;
    font-size: 0.92rem;
    font-weight: 500;
}

.inventory-hub-order-copy strong {
    color: #0f1728;
    font-size: 0.98rem;
    font-weight: 900;
}

.inventory-hub-order-status {
    align-self: start;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #d6dce5;
    background: #f7f8fa;
    color: #7a8596;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
}

.inventory-hub-order-status .material-symbols-outlined {
    font-size: 0.92rem;
    font-variation-settings: 'wght' 500;
}

.inventory-hub-order-status.is-draft {
    border-color: #d8dde5;
    background: #f6f7fa;
    color: #7b8492;
}

.inventory-hub-order-status.is-ordered {
    border-color: #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
}

.inventory-hub-order-status.is-received {
    border-color: #b9e0a9;
    background: #e9f7e2;
    color: #3d9b16;
}

.inventory-hub-order-status.is-paused {
    border-color: #d8dde5;
    background: #f6f7fa;
    color: #7b8492;
}

.inventory-hub-order-status.is-completed {
    border-color: #b9e0a9;
    background: #e9f7e2;
    color: #3d9b16;
}

.inventory-hub-order-status.is-canceled {
    border-color: #ffd7df;
    background: #fff0f3;
    color: #c14662;
}

.inventory-order-aside-panel {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
}

.inventory-order-aside-panel.is-active {
    display: grid;
}

.inventory-order-hero {
    position: relative;
    width: max-content;
    display: grid;
    justify-items: center;
    margin: 0 auto;
    padding: 0.15rem 0 0.75rem;
}

.inventory-order-icon-tile {
    width: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1px solid #d9e0eb;
    background: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 26px rgba(15, 24, 38, 0.06);
}

.inventory-order-icon-tile .material-symbols-outlined {
    font-size: 2.7rem;
    color: #171f30;
    font-variation-settings: 'wght' 300;
}

.inventory-order-hero-chip {
    position: absolute;
    right: -12px;
    bottom: -10px;
    width: 42px;
    height: 42px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6d7786;
    box-shadow: 0 14px 26px rgba(15, 24, 38, 0.16);
}

.inventory-order-hero-chip .material-symbols-outlined {
    font-size: 1.2rem;
    font-variation-settings: 'wght' 500;
}

.inventory-order-hero-chip.is-draft {
    background: #f2f3f6;
    color: #7d8695;
}

.inventory-order-hero-chip.is-ordered {
    background: #ffc21c;
    color: #34270b;
}

.inventory-order-hero-chip.is-received {
    background: #2f9d1f;
    color: #ffffff;
}

.inventory-order-created-short {
    margin: -0.25rem 0 0;
    text-align: center;
    color: #6a778a;
    font-size: 0.9rem;
    font-weight: 500;
}

.inventory-order-status-pill {
    padding: 0.34rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #d9dce3;
    background: #fafafc;
    color: #7f8795;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
}

.inventory-order-status-pill.is-draft {
    border-color: #d8dde5;
    background: #f6f7fa;
    color: #7b8492;
}

.inventory-order-status-pill.is-ordered {
    border-color: #f1d48a;
    background: #fff6dc;
    color: #bf7a00;
}

.inventory-order-status-pill.is-received {
    border-color: #b9e0a9;
    background: #e9f7e2;
    color: #3d9b16;
}

.inventory-order-card-actions {
    width: 100%;
}

.inventory-order-action-button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-radius: 999px;
}

.inventory-order-main-panel > h2 {
    margin: 0 0 1.3rem;
}

.inventory-order-section-panel {
    display: none;
}

.inventory-order-section-panel.is-active {
    display: block;
}

.inventory-order-product-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
}

.inventory-order-product-thumb {
    width: 52px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dfe5ee;
}

.inventory-order-product-thumb-stage {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 214, 160, 0.95), transparent 18%),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 20%),
        linear-gradient(180deg, #5e504f 0%, #8d7369 36%, #c59f83 68%, #b89d7f 100%);
}

.inventory-order-product-thumb-glow {
    position: absolute;
    left: 20%;
    bottom: 31%;
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 215, 150, 0.44);
    filter: blur(7px);
}

.inventory-order-product-thumb-jar,
.inventory-order-product-thumb-candle {
    position: absolute;
    bottom: 16%;
    border-radius: 7px 7px 5px 5px;
}

.inventory-order-product-thumb-jar {
    left: 13%;
    width: 29%;
    height: 40%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #5d331f 0%, #87472a 62%, #3d2318 100%);
}

.inventory-order-product-thumb-candle {
    left: 60%;
    width: 31%;
    height: 43%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, #eee8dd 0%, #d4c7b6 70%, #96806c 100%);
}

.inventory-order-product-thumb-candle::before {
    content: "";
    position: absolute;
    top: -13%;
    left: 45%;
    width: 9%;
    height: 17%;
    border-radius: 999px;
    background: #202328;
}

.inventory-order-product-thumb-candle::after {
    content: "";
    position: absolute;
    top: -27%;
    left: 34%;
    width: 24%;
    height: 27%;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.95), rgba(255, 236, 175, 0.9) 34%, rgba(255, 175, 73, 0.9) 60%, rgba(255, 138, 45, 0.1) 100%);
}

.inventory-order-product-thumb-surface {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 0;
    height: 24%;
    background:
        linear-gradient(90deg, rgba(88, 109, 141, 0.55) 0 14%, rgba(241, 226, 195, 0.85) 14% 28%, rgba(110, 128, 159, 0.5) 28% 42%, rgba(241, 226, 195, 0.85) 42% 56%, rgba(110, 128, 159, 0.5) 56% 70%, rgba(241, 226, 195, 0.85) 70% 84%, rgba(110, 128, 159, 0.5) 84% 100%);
    opacity: 0.8;
}

.inventory-order-product-copy {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.inventory-order-product-copy h4 {
    margin: 0;
    color: #121b2b;
    font-size: 0.96rem;
    font-weight: 900;
}

.inventory-order-product-copy p {
    margin: 0;
    color: #677588;
    font-size: 0.88rem;
    line-height: 1.4;
}

.inventory-order-product-total {
    color: #101927;
    font-size: 0.98rem;
    font-weight: 900;
    white-space: nowrap;
}

.inventory-order-activity-list {
    display: grid;
    gap: 1.05rem;
}

.inventory-order-activity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid #dce3ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 24, 38, 0.05);
}

.inventory-order-activity-avatar-shell {
    position: relative;
    width: 58px;
    min-width: 58px;
    padding-top: 0.1rem;
}

.inventory-order-activity-avatar {
    width: 58px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 3px solid #d9ebfb;
    background: linear-gradient(180deg, #0e6dbc 0%, #0b5ea6 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    font-weight: 300;
    box-shadow: 0 12px 20px rgba(10, 88, 153, 0.16);
}

.inventory-order-activity-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 14px rgba(15, 24, 38, 0.12);
}

.inventory-order-activity-badge .material-symbols-outlined {
    font-size: 0.95rem;
    font-variation-settings: 'wght' 500;
}

.inventory-order-activity-badge.is-received {
    background: #2f9d1f;
    color: #ffffff;
}

.inventory-order-activity-badge.is-items,
.inventory-order-activity-badge.is-sent {
    background: #6b5cf0;
    color: #ffffff;
}

.inventory-order-activity-badge.is-created {
    background: #ffc21c;
    color: #3b2b05;
}

.inventory-order-activity-badge.is-draft {
    background: #f2f3f6;
    color: #7d8695;
}

.inventory-order-activity-copy {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
}

.inventory-order-activity-copy h3 {
    margin: 0;
    color: #101a2b;
    font-size: 1rem;
    font-weight: 900;
}

.inventory-order-activity-meta {
    margin: 0;
    color: #6b7789;
    font-size: 0.9rem;
    line-height: 1.4;
}

.inventory-order-activity-body {
    margin: 0.35rem 0 0;
    color: #162437;
    font-size: 0.95rem;
    line-height: 1.45;
}

.inventory-order-activity-body strong {
    color: #111c2d;
    font-weight: 900;
}

.inventory-table-row {
    cursor: pointer;
}

.inventory-table-row:focus-visible {
    outline: 2px solid #9fd3f6;
    outline-offset: -2px;
}

@media (max-width: 900px) {
    .clients-drawer {
        left: 0;
    }

    .clients-drawer-panel {
        width: 100%;
    }

    .clients-drawer-close {
        left: 1rem;
    }

    .inventory-drawer .inventory-hub-layout {
        grid-template-columns: 1fr;
    }

    .inventory-drawer .inventory-drawer-close {
        left: 1rem;
    }

    .inventory-hub-side-nav {
        margin-top: 0.85rem;
        padding-top: 0.85rem;
    }

    .inventory-edit-photo-grid {
        grid-template-columns: 1fr;
    }

    .inventory-stock-dialog {
        width: min(100%, 92vw);
        padding: 1.35rem 1.1rem 1.2rem;
    }

    .inventory-stock-stepper {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }

    .inventory-stock-dialog-actions {
        flex-direction: column-reverse;
    }

    .inventory-stock-dialog-actions .btn {
        width: 100%;
    }

    .inventory-hub-data-list div {
        grid-template-columns: 1fr;
    }

    .inventory-hub-data-list dd {
        text-align: left;
    }

    .inventory-hub-order-card {
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: start;
    }

    .inventory-hub-order-thumb {
        width: 56px;
    }

    .inventory-hub-order-status {
        justify-self: start;
        margin-left: calc(56px + 1rem);
    }

    .inventory-order-product-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .inventory-order-product-total {
        justify-self: start;
        margin-left: calc(52px + 0.85rem);
    }

    .inventory-order-activity-card {
        grid-template-columns: 1fr;
    }

    .inventory-order-activity-avatar-shell {
        margin-bottom: 0.2rem;
    }
}

.clients-hub-panel {
    padding: 0;
    overflow: hidden;
}

.clients-hub-layout {
    display: grid;
    grid-template-columns: 320px 200px minmax(0, 1fr);
    min-height: calc(100vh - 190px);
}

.clients-hub-card {
    border-right: 1px solid #e5e8f0;
    background: #ffffff;
    padding: 1.15rem 1.05rem 1rem;
    position: relative;
}

.clients-hub-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0.75rem auto 0.65rem;
    background: #ecebfa;
    color: #6358e7;
    font-size: 1.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.clients-hub-avatar.is-photo {
    background: transparent;
    color: transparent;
    border: 0;
    box-shadow: none;
}

.clients-hub-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.clients-hub-card h3 {
    margin: 0;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1.08;
    color: #0f1828;
    font-weight: 850;
}

.clients-hub-card > p {
    margin: 0.22rem 0 0.85rem;
    text-align: center;
    color: #5d6c84;
    font-size: 0.9rem;
    font-weight: 600;
}

.team-staff-hub-pay-shortcuts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    margin: -0.25rem 0 0.85rem;
    position: relative;
    isolation: isolate;
    pointer-events: auto;
    user-select: none;
    cursor: default;
}

.team-staff-hub-pay-blocker {
    position: absolute;
    inset: -3px;
    z-index: 6;
    display: block;
    cursor: default;
    background: transparent;
    pointer-events: auto;
}

.team-staff-hub-pay-indicator,
.team-staff-hub-pay-shortcut {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d8dee9;
    background: #ffffff;
    color: #7b8799;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.team-staff-hub-pay-indicator .material-symbols-outlined,
.team-staff-hub-pay-shortcut .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.team-staff-hub-pay-indicator.is-active,
.team-staff-hub-pay-shortcut.is-active {
    border-color: #cfd7e5;
    background: #f8fafc;
    color: #2c3444;
}

.clients-hub-card-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.clients-hub-book-btn {
    min-height: 44px;
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
    background: #07080e;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clients-hub-book-btn:hover {
    background: #171a22;
}

.clients-hub-actions-dropdown {
    position: relative;
}

.clients-hub-actions-dropdown summary {
    list-style: none;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #d5ddea;
    background: #ffffff;
    color: #111a2a;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.52rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.clients-hub-actions-dropdown summary::-webkit-details-marker {
    display: none;
}

.clients-hub-actions-dropdown summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    color: #1f2e45;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.clients-hub-actions-dropdown[open] summary::after {
    content: 'expand_less';
}

.clients-hub-actions-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    min-width: 270px;
    max-width: min(340px, calc(100vw - 24px));
    border-radius: 14px;
    border: 1px solid #d7dfeb;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(14, 28, 45, 0.16);
    padding: 0.5rem;
    z-index: 20;
    display: grid;
    gap: 0.12rem;
}

/* In the main header area, anchor dropdowns to the right so they don't clip. */
.clients-hub-section-head .clients-hub-actions-menu {
    right: 0;
    left: auto;
}

.clients-hub-actions-title {
    margin: 0.2rem 0.45rem 0.36rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: #121a2a;
}

.clients-hub-actions-menu a {
    padding: 0.58rem 0.62rem;
    border-radius: 9px;
    color: #172337;
    font-size: 0.92rem;
    font-weight: 650;
}

.clients-hub-actions-menu-quick a {
    font-weight: 500;
}

.clients-hub-actions-menu-quick .clients-hub-actions-link-strong {
    font-weight: 700;
}

.clients-hub-actions-menu a:hover {
    background: #f1f5fb;
}

.clients-hub-actions-menu hr {
    border: 0;
    height: 1px;
    background: #e8edf5;
    margin: 0.36rem 0.2rem;
}

.clients-hub-meta {
    margin: 0.18rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid #e9edf5;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.clients-hub-meta li {
    display: grid;
    gap: 0.16rem;
    padding: 0.78rem 0.82rem;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.clients-hub-meta strong {
    color: #122033;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.42;
    letter-spacing: -0.01em;
}

.clients-hub-meta small {
    color: #6b778a;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.clients-hub-nav {
    border-right: 1px solid #e5e8f0;
    background: #ffffff;
    padding: 0.85rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
}

.clients-hub-nav > a,
.clients-hub-docs > summary,
.clients-hub-docs > a {
    position: relative;
    min-height: 40px;
    border-radius: 10px;
    padding: 0.52rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #121c2d;
    font-size: 0.88rem;
    font-weight: 700;
}

.clients-hub-nav > a:hover,
.clients-hub-docs > summary:hover,
.clients-hub-docs > a:hover {
    background: #f3f5fb;
}

.clients-hub-nav > a.is-active,
.clients-hub-docs > summary.is-active,
.clients-hub-docs > a.is-active {
    background: #ecebfa;
    color: #121633;
    padding-left: 1.02rem;
    box-shadow: inset 0 0 0 1px #d9d3ff;
}

.clients-hub-nav > a.is-active::before,
.clients-hub-docs > summary.is-active::before,
.clients-hub-docs > a.is-active::before {
    content: '';
    position: absolute;
    left: 0.48rem;
    top: 0.48rem;
    bottom: 0.48rem;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6d60ff 0%, #5248d9 100%);
}

.clients-hub-nav > a.is-active .clients-hub-count,
.clients-hub-docs > summary.is-active .clients-hub-count,
.clients-hub-docs > a.is-active .clients-hub-count {
    border-color: #cfc7ff;
    color: #4d43cf;
    background: #ffffff;
}

.clients-hub-count {
    min-width: 24px;
    font-variation-settings: 'FILL' 1, 'wght' 640, 'GRAD' 0, 'opsz' 24;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d8dfeb;
    background: #ffffff;
    color: #25354d;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
}

.clients-hub-docs > summary {
    list-style: none;
    cursor: pointer;
}

.clients-hub-docs > summary::-webkit-details-marker {
    display: none;
}

.clients-hub-docs > summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    color: #1f2e45;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    transition: transform 0.2s ease;
}

.clients-hub-docs[open] > summary::after {
    content: 'expand_less';
}

.clients-hub-docs > a {
    margin-left: 0.5rem;
    width: calc(100% - 0.5rem);
    font-size: 0.93rem;
}

.clients-hub-main {
    background: #ffffff;
    padding: 1.05rem 1.25rem 1.25rem;
}

.clients-hub-main.is-client-data {
    padding-top: 0;
}

.clients-hub-main h2 {
    margin: 0 0 0.95rem;
    font-size: 1.55rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #101a2b;
}

.clients-hub-sticky-head {
    position: sticky;
    top: -1.05rem;
    z-index: 25;
    margin: -1.05rem -1.25rem 0;
    padding: 1.05rem 1.25rem 0.82rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(220, 227, 239, 0.9);
}

.clients-hub-sticky-head h2 {
    margin-bottom: 0.95rem;
}

.clients-hub-sticky-head .clients-hub-sales-tabs {
    margin-bottom: 0;
}

.clients-hub-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.72rem;
}

.clients-hub-sticky-head {
    position: sticky;
    top: 0;
    z-index: 35;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(226, 232, 243, 0.95);
    box-shadow: 0 14px 28px rgba(12, 18, 32, 0.06);
    padding: 1.05rem 1.25rem 0.85rem;
    margin: 0 -1.25rem 1rem;
}

.clients-hub-sticky-head-appointments {
    top: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 1.05rem 1.25rem 0.85rem !important;
}

.clients-drawer .clients-hub-sticky-head-appointments {
    background: #ffffff !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.admin-body.admin-page-clients-embed .clients-hub-main {
    padding-top: 0 !important;
}


.clients-hub-section-head h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.1;
    font-weight: 850;
    color: #0f1828;
    letter-spacing: -0.01em;
}

.clients-hub-subhead {
    margin-bottom: 0;
}

.clients-hub-section-link {
    color: #5f56ff;
    font-weight: 750;
    font-size: 0.88rem;
}

.clients-hub-section-link:hover {
    text-decoration: underline;
}

.clients-hub-summary-stack {
    display: grid;
    gap: 0.9rem;
}

.clients-hub-section-head h2 {
    margin: 0;
}

.clients-hub-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.82rem;
}

.clients-hub-summary-grid.is-mini {
    margin-top: 0.1rem;
}

.clients-hub-summary-grid.is-statuses {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.82rem;
}

.clients-hub-summary-grid.is-statuses .clients-hub-metric-card {
    min-height: 120px;
}

.clients-hub-summary-grid.is-statuses .clients-hub-metric-value {
    font-size: 1.8rem;
}

.clients-hub-metric-card {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 1rem;
}

.clients-hub-metric-card.is-wide {
    padding: 1.05rem 1.1rem;
}

.clients-hub-metric-card h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #1b2a41;
    font-weight: 700;
}

.clients-hub-metric-value {
    margin: 0.58rem 0 0;
    font-size: 2.1rem;
    line-height: 1;
    color: #0f182a;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.clients-hub-metric-value.clients-hub-metric-empty {
    font-size: 1.8rem;
    letter-spacing: -0.01em;
}

.clients-hub-month-title {
    margin: 0.85rem 0 0.48rem;
    color: #627089;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: lowercase;
}

.clients-hub-timeline {
    display: grid;
    gap: 0.82rem;
}

.clients-hub-timeline-item {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.98rem;
}

.clients-hub-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;
}

.clients-hub-timeline-head h4 {
    margin: 0;
    color: #101a2a;
    font-size: 1.05rem;
    font-weight: 800;
}

.clients-hub-status {
    border-radius: 999px;
    padding: 0.2rem 0.62rem;
    font-size: 0.84rem;
    font-weight: 700;
}

.clients-hub-status.is-reserved {
    background: #e8ecff;
    color: #445fcb;
}

.clients-hub-status.is-confirmed {
    background: #e7f4ff;
    color: #1f6fbb;
}

.clients-hub-status.is-completed {
    background: #e8f8ef;
    color: #268154;
}

.clients-hub-status.is-canceled {
    background: #ffecef;
    color: #be3553;
}

.clients-hub-status.is-waiting {
    background: #fff3db;
    color: #a15c00;
}

.clients-hub-status.is-started {
    background: #e8f8ef;
    color: #268154;
}

.clients-hub-status.is-no-show {
    background: #ffecef;
    color: #be3553;
}

.clients-hub-muted {
    margin: 0.3rem 0;
    color: #66768e;
    font-size: 0.9rem;
    font-weight: 600;
}

.clients-hub-service-line {
    margin: 0;
    display: grid;
    gap: 0.2rem;
}

.clients-hub-service-line strong {
    color: #121d2e;
    font-size: 1rem;
}

.clients-hub-service-line span {
    color: #5f7088;
    font-size: 0.92rem;
}

.clients-hub-timeline-foot {
    margin-top: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;
}

.clients-hub-timeline-foot strong {
    color: #111c2d;
    font-size: 1.2rem;
    font-weight: 800;
}

.clients-hub-empty-card,
.clients-hub-box {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 1rem;
    margin-top: 0.6rem;
}

.clients-hub-empty-card h3,
.clients-hub-box h3 {
    margin: 0;
    color: #111b2c;
    font-size: 1.25rem;
    font-weight: 800;
}

.clients-hub-empty-card p,
.clients-hub-box p {
    margin: 0.55rem 0 0;
    color: #627089;
    font-size: 1rem;
    font-weight: 600;
}

.clients-hub-wallet-sub {
    margin: -0.35rem 0 0.95rem;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-wallet-sub a {
    margin-left: 0.25rem;
}

.clients-hub-empty-hero {
    padding: 1.35rem 1.2rem;
    text-align: center;
}

.clients-hub-empty-hero h3 {
    margin-top: 0.3rem;
    font-size: 1.18rem;
}

.clients-hub-empty-hero p {
    max-width: 420px;
    margin: 0.6rem auto 0;
    font-weight: 650;
}

.clients-hub-empty-hero .btn {
    margin-top: 0.95rem;
}

@media (max-width: 1180px) {
    .clients-hub-summary-grid.is-statuses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .clients-hub-summary-grid.is-statuses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.clients-hub-empty-illustration {
    width: 92px;
    height: 92px;
    margin: 0 auto 0.7rem;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background:
        radial-gradient(circle at 30% 30%, rgba(95, 86, 255, 0.28), rgba(31, 198, 215, 0.18) 55%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 247, 255, 0.78));
    border: 1px solid rgba(222, 228, 241, 0.9);
}

.clients-hub-empty-illustration svg {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 10px 18px rgba(11, 18, 32, 0.12));
}

.clients-hub-chip-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.82rem;
    position: relative;
    overflow: visible;
}

.clients-hub-chip-tabs button {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid #d5dde8;
    background: #ffffff;
    color: #1a2639;
    font-weight: 700;
    padding: 0.5rem 0.95rem;
}

.clients-hub-chip-tabs button.is-active {
    background: #090b10;
    border-color: #090b10;
    color: #ffffff;
}

.clients-hub-chip-tabs a {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #1a2639;
    font-weight: 800;
    padding: 0.5rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.clients-hub-chip-tabs a.is-active {
    background: #090b10;
    border-color: #090b10;
    color: #ffffff;
}

.clients-hub-chip-tabs a .clients-hub-count {
    margin-left: 0;
}

.clients-hub-chip-tabs a.is-active .clients-hub-count {
    border-color: rgba(255, 255, 255, 0.22);
    color: #111827;
}

.clients-hub-balance {
    margin: 0.16rem 0 0.65rem;
    font-size: 3rem;
    line-height: 1;
    color: #0e1729;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.clients-hub-edit-btn {
    gap: 0.45rem;
    padding: 0.72rem 1.15rem;
    border-radius: 999px;
    font-weight: 800;
}

.clients-hub-edit-ico {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.75;
}

.clients-hub-details {
    display: grid;
    gap: 0;
}

.clients-hub-details-section h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 850;
    color: #0f1828;
    letter-spacing: -0.01em;
}

.clients-hub-kv-grid {
    margin: 1.35rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 2.75rem;
}

.clients-hub-kv {
    min-width: 0;
}

.clients-hub-kv-wide {
    grid-column: 1 / -1;
}

.clients-hub-kv dt {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f1828;
}

.clients-hub-kv dd {
    margin: 0.22rem 0 0;
    color: #5f7088;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.32;
    word-break: break-word;
}

.clients-hub-divider {
    border: 0;
    border-top: 1px solid #e5e8f0;
    margin: 1.8rem 0;
}

.clients-hub-details-empty {
    margin: 1.1rem 0 0;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-tag-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.9rem;
    border: 1px solid #d8deea;
    border-radius: 999px;
    background: #ffffff;
    color: #0f1828;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1;
}

.clients-hub-tag-action span[aria-hidden="true"] {
    font-size: 1rem;
    font-weight: 800;
}

.clients-hub-sales-shell {
    display: grid;
    gap: 1.15rem;
}

.clients-hub-appointments-shell {
    gap: 1rem;
}

.clients-hub-sales-tabs {
    margin-bottom: 0.25rem;
}

.clients-hub-sales-more {
    position: relative;
    z-index: 20;
    overflow: visible;
}

.clients-hub-sales-more[open] {
    z-index: 30;
}

.clients-hub-sales-more summary {
    list-style: none;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #1a2639;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.clients-hub-sales-more summary::-webkit-details-marker {
    display: none;
}

.clients-hub-sales-more summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1.05rem;
    line-height: 1;
}

.clients-hub-sales-more-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    left: auto;
    z-index: 10;
    min-width: 220px;
    padding: 0.7rem 0;
    border: 1px solid rgba(220, 227, 239, 0.9);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 0;
}

.clients-hub-sales-more-menu a {
    display: block;
    padding: 0.78rem 1.15rem;
    border-radius: 0;
    color: #1a2639;
    font-size: 0.98rem;
    font-weight: 650;
    white-space: nowrap;
}

.clients-hub-sales-more-menu a:hover {
    background: #f4f6fb;
}

.clients-hub-sales-timeline {
    display: grid;
    gap: 1rem;
}

.clients-hub-sales-card {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.clients-hub-sales-card-body {
    position: relative;
    padding-left: 0.2rem;
}

.clients-hub-sales-card-body::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: 0.3rem;
    bottom: -0.85rem;
    width: 2px;
    background: #d8dde8;
}

.clients-hub-sales-card:last-child .clients-hub-sales-card-body::before {
    bottom: 1.4rem;
}

.clients-hub-sales-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #090b10;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-family: 'Material Symbols Outlined';
    font-size: 0.95rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.clients-hub-sales-card-box {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 1rem 1.15rem 1.05rem;
}

.clients-hub-sales-head h3 {
    margin: 0;
    color: #101a2a;
    font-size: 1.05rem;
    font-weight: 850;
}

.clients-hub-sales-head p {
    margin: 0.18rem 0 0;
    color: #66768e;
    font-size: 0.95rem;
    font-weight: 600;
}

.clients-hub-sales-status.is-paid {
    color: #27924d;
}

.clients-hub-sales-status.is-partial {
    color: #b96b00;
}

.clients-hub-sales-status.is-pending {
    color: #66768e;
}

.clients-hub-sales-lines {
    margin-top: 1rem;
    display: grid;
    gap: 0;
}

.clients-hub-sales-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.82rem 0;
    border-top: 1px solid #e7ebf2;
    color: #101828;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-sales-lines .clients-hub-sales-line:first-child {
    border-top: 0;
    padding-top: 0;
}

.clients-hub-sales-line strong {
    color: #111c2d;
    font-size: 1rem;
    font-weight: 800;
}

.clients-hub-sales-line.is-muted {
    color: #66768e;
}

.clients-hub-sales-line.is-muted strong {
    color: #66768e;
    font-weight: 700;
}

.clients-hub-sales-line.is-total {
    padding-top: 0.6rem;
    font-weight: 800;
}

.clients-hub-sales-line.is-total strong {
    font-size: 1.08rem;
}

.clients-hub-appointments-timeline {
    gap: 1.1rem;
}

.clients-hub-appointment-head {
    align-items: flex-start;
}

.clients-hub-appointment-icon {
    font-size: 0.92rem;
}

.clients-hub-appointment-lines {
    margin-top: 1rem;
}

.clients-hub-sales-line.is-appointment-line {
    align-items: flex-start;
    padding-bottom: 0.95rem;
}

.clients-hub-appointment-service {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.clients-hub-appointment-service span {
    color: #111c2d;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.28;
}

.clients-hub-appointment-service small {
    color: #5f7088;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.28;
}

.clients-hub-appointment-actions {
    margin-top: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.72rem;
    flex-wrap: wrap;
}

.clients-hub-appointment-actions .btn {
    border-radius: 999px;
    min-height: 42px;
    padding-inline: 1.15rem;
    font-weight: 800;
}

.clients-hub-lines {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
    color: #22334c;
}

.clients-hub-lines li strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 850;
    color: #0f1828;
}

.clients-hub-lines li div {
    margin-top: 0.18rem;
    color: #5f7088;
    font-weight: 650;
    font-size: 0.96rem;
}

.clients-hub-settings-lead {
    margin: 0.35rem 0 0;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-settings-block {
    margin-top: 1.05rem;
}

.clients-hub-settings-block h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    color: #0f1828;
}

.clients-hub-settings-block p {
    margin: 0.35rem 0 0.85rem;
    color: #627089;
    font-size: 0.98rem;
    font-weight: 650;
}

.clients-hub-settings-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.clients-hub-settings-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 750;
    color: #0f1828;
    font-size: 0.92rem;
    line-height: 1.25;
}

.clients-hub-check {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid #cfd7e4;
    background: #ffffff;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(12, 18, 32, 0.04);
}

.clients-hub-check.is-on {
    border-color: #5f56ff;
    background: #5f56ff;
    color: #ffffff;
}

.clients-hub-check.is-on::before {
    content: '\2713';
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1;
}

.clients-hub-settings-split {
    height: 1px;
    background: #e5e8f0;
    margin-top: 1.2rem;
}

.clients-hub-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.clients-hub-data-grid article {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 0.95rem;
}

.clients-hub-data-grid article h3 {
    margin: 0 0 0.7rem;
    color: #121c2d;
    font-size: 1.15rem;
    font-weight: 800;
}

.clients-hub-data-grid dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.8rem;
}

.clients-hub-data-grid dt {
    margin: 0;
    color: #5f6f85;
    font-size: 0.88rem;
    font-weight: 700;
}

.clients-hub-data-grid dd {
    margin: 0.06rem 0 0;
    color: #122036;
    font-size: 0.95rem;
    font-weight: 700;
}

.clients-hub-list-plain {
    margin: 0.6rem 0 0;
    padding: 0 0 0 1rem;
    display: grid;
    gap: 0.45rem;
    color: #24354d;
}

@media (max-width: 1480px) {
    .clients-hub-layout {
        grid-template-columns: 320px 210px minmax(0, 1fr);
    }
}

@media (max-width: 1260px) {
    .clients-hub-layout {
        grid-template-columns: 1fr;
    }

    .clients-hub-card,
    .clients-hub-nav {
        border-right: 0;
        border-bottom: 1px solid #e5e8f0;
    }

    .clients-hub-close {
        position: static;
        margin-bottom: 0.45rem;
    }

    .clients-hub-data-grid {
        grid-template-columns: 1fr;
    }

    .clients-hub-kv-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .admin-body.admin-page-clients-embed .clients-hub-main.is-client-data .clients-hub-kv-grid {
        grid-template-columns: 1fr;
    }
}


.admin-body.admin-page-workspace-settings .admin-content {
    background:
        radial-gradient(circle at top left, rgba(110, 95, 255, 0.08), transparent 28%),
        linear-gradient(180deg, #f7f7f9 0%, #f1f1f4 100%);
    padding-bottom: 3rem;
}

.admin-body.admin-page-workspace-settings .admin-topbar {
    margin-bottom: 1.2rem;
}

.workspace-settings {
    display: grid;
    gap: 1.45rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.18rem 0.24rem 0;
}

.workspace-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.35rem;
    padding: 1.45rem 1.55rem;
    border: 1px solid rgba(214, 218, 227, 0.92);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(251, 251, 253, 0.92) 100%);
    box-shadow:
        0 18px 36px rgba(19, 24, 39, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.workspace-settings-head-main {
    max-width: 680px;
}

.workspace-settings-head-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 0.65rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(104, 87, 255, 0.1);
    color: #5f52de;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-settings-head h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(2rem, 2.35vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.workspace-settings-head p {
    margin: 0.5rem 0 0;
    color: #5c6574;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
}

.workspace-settings-head-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 0.8rem;
    width: min(360px, 100%);
}

.workspace-settings-head-stats article {
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid #e2e5ee;
    background:
        linear-gradient(180deg, rgba(248, 249, 252, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.workspace-settings-head-stats span {
    color: #687385;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-settings-head-stats strong {
    color: #101828;
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.workspace-settings-head-stats small {
    color: #5d6676;
    font-size: 0.84rem;
    line-height: 1.3;
}

.workspace-settings-tabs-shell {
    position: sticky;
    top: calc(68px + 0.7rem);
    z-index: 16;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    background:
        linear-gradient(180deg, rgba(247, 247, 249, 0.96) 0%, rgba(241, 241, 244, 0.92) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.workspace-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.45rem;
    border: 1px solid rgba(218, 221, 229, 0.94);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.04);
}

.workspace-settings-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.72rem 1rem;
    border: 1px solid #d8dbe3;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #1b2431;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.04);
}

.workspace-settings-back-link:hover {
    background: #ffffff;
    border-color: #cfd3dd;
}

.workspace-settings-back-link .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.workspace-settings-tab {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #151515;
    min-height: 42px;
    padding: 0.62rem 1rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.workspace-settings-tab.is-active {
    background: #0f0f12;
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 15, 18, 0.22);
}

.workspace-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.workspace-settings-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-height: 220px;
    padding: 1.4rem 1.4rem 1.25rem;
    border-radius: 22px;
    border: 1px solid #dadde6;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 251, 253, 0.96) 100%);
    color: #111827;
    text-decoration: none;
    box-shadow:
        0 14px 30px rgba(17, 24, 39, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.workspace-settings-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #6857ff 0%, #8c7cff 100%);
    opacity: 0.82;
}

.workspace-settings-card:hover {
    transform: translateY(-4px);
    border-color: #cccfdb;
    box-shadow:
        0 24px 40px rgba(17, 24, 39, 0.08),
        0 8px 18px rgba(104, 87, 255, 0.06);
}

.workspace-settings-card.is-hidden {
    display: none;
}

.workspace-settings-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.workspace-settings-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 14px;
    background: rgba(104, 87, 255, 0.1);
    color: #6857ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.workspace-settings-card-icon .material-symbols-outlined {
    font-size: 1.35rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.workspace-settings-card-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: #f3f4f7;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-settings-card-copy {
    display: grid;
    gap: 0.5rem;
}

.workspace-settings-card-copy h2 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.workspace-settings-card-copy p {
    margin: 0;
    color: #586273;
    font-size: 0.98rem;
    line-height: 1.5;
}

.workspace-settings-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.95rem;
    border-top: 1px solid #eef0f4;
}

.workspace-settings-card-cta {
    color: #6857ff;
    font-size: 0.88rem;
    font-weight: 700;
    transition: color 0.18s ease;
}

.workspace-settings-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #f1f3f7;
    color: #4b5565;
    font-size: 1rem;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.workspace-settings-card:hover .workspace-settings-card-cta,
.workspace-settings-card:focus-visible .workspace-settings-card-cta {
    color: #4d3fff;
}

.workspace-settings-card:hover .workspace-settings-card-arrow,
.workspace-settings-card:focus-visible .workspace-settings-card-arrow {
    background: rgba(104, 87, 255, 0.12);
    color: #5b4bf0;
    transform: translateX(2px);
}

.workspace-settings-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 0.1rem;
}

.workspace-settings-tools {
    padding: 1.4rem;
    border-radius: 22px;
    border: 1px solid #d7dbe5;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 252, 0.98) 100%);
    box-shadow: 0 16px 32px rgba(17, 24, 39, 0.05);
}

.workspace-settings-tools-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.workspace-settings-tools-kicker {
    margin: 0 0 0.3rem;
    color: #6857ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workspace-settings-tools-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.25rem;
    line-height: 1.1;
}

.workspace-settings-tools-head p:last-child {
    margin: 0.45rem 0 0;
    color: #5d6676;
    font-size: 0.96rem;
    line-height: 1.5;
}

.workspace-settings-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: #eceef2;
    color: #28303d;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.workspace-settings-status.is-ready {
    background: #e8f8ed;
    color: #18794e;
}

.workspace-settings-status.is-pending {
    background: #fff1e4;
    color: #b45a09;
}

.workspace-settings-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.05rem;
}

.workspace-settings-metrics article {
    display: grid;
    gap: 0.32rem;
    padding: 1rem 1.02rem;
    border-radius: 16px;
    background: #f6f7fa;
    border: 1px solid #e7e9ef;
}

.workspace-settings-metrics span {
    color: #677183;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.workspace-settings-metrics strong {
    color: #111827;
    font-size: 1.12rem;
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.workspace-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.workspace-settings-details {
    border-top: 1px solid #eceef2;
    padding-top: 0.95rem;
}

.workspace-settings-details summary {
    cursor: pointer;
    color: #111827;
    font-weight: 700;
    list-style: none;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: #f4f5f8;
}

.workspace-settings-details summary::-webkit-details-marker {
    display: none;
}

.workspace-settings-table-wrap {
    margin-top: 0.9rem;
    overflow-x: auto;
}

.workspace-settings-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.workspace-settings-shortcuts a {
    display: grid;
    gap: 0.42rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid #e6e8ed;
    background: #f7f8fa;
    color: #111827;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.workspace-settings-shortcuts a:hover {
    border-color: #d7dbe5;
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(17, 24, 39, 0.06);
}

.workspace-settings-shortcuts .material-symbols-outlined {
    color: #6857ff;
    font-size: 1.3rem;
    line-height: 1;
}

.workspace-settings-shortcuts strong {
    font-size: 0.98rem;
    line-height: 1.2;
}

.workspace-settings-shortcuts small {
    color: #626c7c;
    font-size: 0.9rem;
    line-height: 1.45;
}

.workspace-payments-hub {
    scroll-margin-top: 6.5rem;
}

.workspace-payments-metrics .workspace-payments-webhook {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-all;
    color: #4b5563;
}

.workspace-payments-callout {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 158, 227, 0.22);
    background: linear-gradient(180deg, #f0faff 0%, #f8fcff 100%);
}

.workspace-payments-callout .material-symbols-outlined {
    color: #009ee3;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.workspace-payments-callout strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.92rem;
    color: #0f172a;
}

.workspace-payments-callout p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #475569;
}

.workspace-payments-active-methods {
    margin: 0 0 1rem;
    font-size: 0.86rem;
    color: #475569;
}

.workspace-payments-active-methods span {
    font-weight: 600;
    color: #111827;
}

.workspace-payments-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-payments-shortcut {
    position: relative;
}

.workspace-payments-shortcut-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6857ff;
    background: rgba(104, 87, 255, 0.1);
}

.workspace-payments-shortcut-badge--mp {
    color: #fff;
    background: linear-gradient(135deg, #009ee3 0%, #0077b6 100%);
}

.workspace-payments-shortcut--featured {
    border-color: rgba(52, 131, 250, 0.28);
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.workspace-payments-shortcut--featured:hover {
    border-color: rgba(52, 131, 250, 0.45);
}

.workspace-payments-shortcut--featured .material-symbols-outlined {
    color: #3483fa;
}

.workspace-payments-shortcut--mp {
    border-color: rgba(0, 158, 227, 0.24);
    background: linear-gradient(180deg, #f2fbff 0%, #ffffff 100%);
}

.workspace-payments-shortcut--mp:hover {
    border-color: rgba(0, 158, 227, 0.42);
}

.workspace-payments-shortcut--mp .material-symbols-outlined {
    color: #009ee3;
}

@media (max-width: 1080px) {
    .workspace-settings-head,
    .workspace-settings-tabs-shell {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-settings-head-stats {
        width: 100%;
    }

    .workspace-settings-tabs-shell {
        top: calc(68px + 0.55rem);
    }

    .workspace-settings-grid,
    .workspace-settings-tools-grid,
    .workspace-settings-shortcuts,
    .workspace-payments-shortcuts,
    .workspace-settings-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .workspace-settings {
        padding-inline: 0;
    }

    .workspace-settings-tabs {
        gap: 0.45rem;
        padding: 0.35rem;
    }

    .workspace-settings-tabs-shell {
        top: calc(104px + 0.45rem);
        padding-top: 0.15rem;
    }

    .workspace-settings-tab {
        min-height: 38px;
        padding: 0.55rem 0.9rem;
        font-size: 0.92rem;
    }

    .workspace-settings-head,
    .workspace-settings-tools {
        padding: 1.15rem;
        border-radius: 18px;
    }

    .workspace-settings-grid,
    .workspace-settings-tools-grid,
    .workspace-settings-shortcuts,
    .workspace-settings-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-settings-card {
        min-height: 0;
        border-radius: 18px;
    }

    .workspace-settings-tools-head {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-settings-back-link {
        justify-content: center;
    }
}

.admin-body.admin-page-business-settings .admin-content {
    background: #f3f3f5;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-appointment-settings .admin-content {
    background: #f3f3f5;
}

.admin-body.admin-page-business-settings .admin-topbar {
    margin: 0;
}

.business-settings-shell {
    display: grid;
    gap: 1.15rem;
    padding: 1.1rem 1.35rem 1.9rem;
}

.business-settings-breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.business-settings-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid #d7dbe4;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #111827;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 700;
}

.business-settings-back:hover {
    background: #ffffff;
    border-color: #cfd4de;
}

.business-settings-back .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.business-settings-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #5c6676;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.business-settings-breadcrumbs a {
    color: #5c6676;
    text-decoration: none;
}

.business-settings-breadcrumbs strong {
    color: #111827;
    font-weight: 800;
}

.admin-body.admin-page-business-settings .clients-pro-layout {
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 1.35rem;
    margin-top: 0;
    align-items: start;
    min-height: auto;
}

.admin-body.admin-page-business-settings .clients-pro-side {
    position: sticky;
    top: calc(68px + 1.1rem);
    height: auto;
    max-height: calc(100vh - 92px);
    min-height: 0;
    border-radius: 18px;
    border: 1px solid #dadde6;
    box-shadow: none;
    background: #ffffff;
    overflow: hidden auto;
}

.admin-body.admin-page-business-settings .clients-pro-side-head {
    min-height: 94px;
    padding: 1.15rem 1.25rem 0.95rem;
    align-items: flex-start;
}

.admin-body.admin-page-business-settings .clients-pro-side-head h2 {
    font-size: 0.98rem;
    line-height: 1.35;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav {
    padding: 0.7rem;
    gap: 0.34rem;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a {
    min-height: 44px;
    padding: 0.82rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    justify-content: flex-start;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
}

.admin-body.admin-page-business-settings .clients-pro-side-section {
    margin: 1.15rem 0.75rem 0.25rem;
    font-size: 0.9rem;
    font-weight: 800;
}

.admin-body.admin-page-business-settings .clients-pro-side-divider {
    margin: 0.6rem 0.75rem 0.45rem;
}

.admin-body.admin-page-business-settings .clients-pro-main {
    padding: 0;
}

.business-settings-page {
    display: grid;
    gap: 1rem;
}

.business-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.2rem;
}

.business-settings-header h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.28rem, 1.45vw, 1.55rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.business-settings-header p {
    max-width: 820px;
    margin: 0.4rem 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.45;
}

.business-settings-header p a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.business-settings-card {
    padding: 1.8rem 2rem;
    border-radius: 18px;
    border: 1px solid #d9dde6;
    background: #ffffff;
    box-shadow: none;
}

.business-settings-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.45rem;
}

.business-settings-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.business-settings-edit-btn {
    min-height: 38px;
    padding-inline: 1rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
}

.business-settings-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.business-settings-summary-grid,
.business-settings-link-grid,
.business-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 2rem;
}

.business-settings-summary-item {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.business-settings-summary-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.business-settings-summary-item strong {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.business-settings-section-block {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e6e8ef;
}

.business-settings-section-block h3 {
    margin: 0 0 1.2rem;
    color: #111827;
    font-size: 0.88rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.business-settings-link-item {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.business-settings-link-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
}

.business-settings-link-item a {
    color: #6b5cff;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.business-settings-form .form-group {
    margin: 0;
}

.business-settings-form .form-group label {
    margin-bottom: 0.34rem;
}

.business-settings-form .form-group.is-invalid > label {
    color: #d12c4a;
}

.business-settings-form .form-group.is-invalid input,
.business-settings-form .form-group.is-invalid select,
.business-settings-form .form-group.is-invalid textarea {
    border-color: #e85a74;
    box-shadow: 0 0 0 3px rgba(232, 90, 116, 0.12);
}

.business-settings-form-span-all {
    grid-column: 1 / -1;
}

.business-settings-field-error {
    display: block;
    margin-top: 0.28rem;
    color: #d12c4a;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 600;
}

.business-settings-form textarea {
    min-height: 112px;
    resize: vertical;
}

.business-settings-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a.business-settings-shortcut {
    justify-content: space-between;
}

.admin-body.admin-page-business-settings .clients-pro-side-nav a.business-settings-shortcut::after {
    content: '\2197';
    color: #1f2937;
    font-size: 1rem;
    line-height: 1;
}

.business-centers-header-actions {
    display: flex;
    align-items: center;
    gap: 0.52rem;
    flex-shrink: 0;
}

.business-centers-options summary,
.business-centers-card-actions summary {
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid #d5dde9;
    background: #ffffff;
    color: #111a2a;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.46rem 0.92rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.business-centers-options summary::-webkit-details-marker,
.business-centers-card-actions summary::-webkit-details-marker {
    display: none;
}

.business-centers-options summary::after,
.business-centers-card-actions summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    line-height: 1;
    color: #232f43;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.business-centers-add-btn {
    min-height: 40px;
    padding: 0.48rem 1.06rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.business-centers-page {
    display: grid;
    gap: 1rem;
}

.business-centers-highlight {
    padding: 0;
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr);
    overflow: visible;
}

.business-centers-highlight-media {
    background: #eef2f8;
    min-height: 228px;
    border-right: 1px solid #d9dde6;
    border-top-left-radius: 17px;
    border-bottom-left-radius: 17px;
    overflow: hidden;
}

.business-centers-highlight-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-centers-highlight-media-fallback {
    height: 100%;
    min-height: 228px;
    display: grid;
    place-items: center;
    background: linear-gradient(130deg, #eef3fb 0%, #dde6f6 100%);
    color: #7b8699;
}

.business-centers-highlight-media-fallback .material-symbols-outlined {
    font-size: 2.2rem;
}

.business-centers-highlight-copy {
    padding: 1.4rem 1.28rem;
    display: grid;
    align-content: start;
    gap: 0.42rem;
}

.business-centers-highlight-copy h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.15rem, 2vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.business-centers-highlight-reviews {
    margin: 0;
    color: #667085;
    font-size: 0.9rem;
    font-weight: 600;
}

.business-centers-highlight-location {
    margin: 0;
    color: #5b6679;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 70ch;
}

.business-centers-card-actions {
    margin-top: 0.54rem;
    width: max-content;
}

.business-centers-actions-menu {
    min-width: 196px;
    padding: 0.42rem;
    gap: 0.26rem;
}

.business-centers-actions-menu .clients-pro-option-item {
    width: 100%;
    border-radius: 12px;
    padding: 0.58rem 0.74rem;
    text-align: left;
}

.business-centers-actions-menu .business-centers-option-view {
    border: 2px solid #101828;
    color: #101828;
    background: #ffffff;
}

.business-centers-actions-menu .business-centers-option-view:hover {
    background: #f5f7fb;
}

.business-centers-actions-menu .business-centers-option-delete {
    color: #e11d48;
    background: #ffffff;
}

.business-centers-actions-menu .business-centers-option-delete:hover {
    background: #fff1f4;
}

.business-centers-list-item {
    margin-top: 0.08rem;
}

.business-centers-edit-form {
    width: 100%;
    max-width: none;
}

.business-centers-edit-wrap {
    display: grid;
    gap: 1.05rem;
}

.business-centers-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.business-centers-edit-head-copy {
    display: grid;
    gap: 0.14rem;
}

.business-centers-edit-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.business-centers-edit-head-copy p {
    margin: 0;
    color: #667085;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
}

.business-centers-edit-section {
    border-top: 1px solid #e4e7ef;
    padding-top: 1rem;
    display: grid;
    gap: 0.72rem;
}

.business-centers-edit-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
    line-height: 1.2;
}

.business-centers-edit-section p {
    margin: 0;
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.45;
}

.business-centers-edit-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.business-centers-location-input-wrap {
    position: relative;
}

.business-centers-location-input-wrap .material-symbols-outlined {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #68758a;
    font-size: 1.05rem;
    pointer-events: none;
}

.business-centers-location-input-wrap input {
    padding-left: 2rem;
}

.business-centers-location-suggestions {
    margin: -0.28rem 0 0;
    padding: 0.36rem;
    list-style: none;
    border: 1px solid #dfe4ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(18, 29, 46, 0.14);
    display: grid;
    gap: 0.14rem;
}

.business-centers-suggestion-btn {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 9px;
    padding: 0.52rem 0.56rem;
    color: #111827;
    font-size: 0.83rem;
    line-height: 1.35;
    cursor: pointer;
}

.business-centers-suggestion-btn:hover {
    background: #f4f7fb;
}

.business-centers-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem 0.85rem;
}

.business-centers-address-item {
    display: grid;
    gap: 0.16rem;
}

.business-centers-address-item span {
    color: #475467;
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 1.3;
}

.business-centers-address-item strong {
    color: #111827;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.business-centers-physical-checkbox {
    margin: 0;
}

.business-centers-hours-editor {
    gap: 0.9rem;
}

.business-centers-hours-list {
    display: grid;
    gap: 0.65rem;
}

.business-centers-hours-row {
    display: grid;
    grid-template-columns: auto minmax(140px, 180px) max-content max-content;
    justify-content: start;
    align-items: start;
    gap: 0.62rem 0.38rem;
    padding: 0.56rem 0.68rem;
    border: 1px solid #d9e1ec;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.business-centers-hours-row:hover,
.business-centers-hours-row:focus-within {
    border-color: #b8c7dc;
    background: #f9fbff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.business-centers-hours-row.is-closed {
    background: #f8fafc;
}

.business-centers-hours-row.is-closed:hover,
.business-centers-hours-row.is-closed:focus-within {
    background: #f3f6fb;
    border-color: #c9d4e5;
}

.business-centers-hours-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.business-centers-hours-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.business-centers-hours-day {
    display: grid;
    gap: 0.08rem;
}

.business-centers-hours-day strong {
    color: #111827;
    font-size: 0.86rem;
    line-height: 1.3;
}

.business-centers-hours-day span {
    color: #1f7a3b;
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.15;
}

.business-centers-hours-row.is-closed .business-centers-hours-day span {
    color: #8a96a8;
}

.business-centers-hours-time {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
}

.business-centers-hours-ranges {
    display: grid;
    gap: 0.45rem;
    justify-self: start;
    max-width: max-content;
    width: auto;
}

.business-centers-hours-time select {
    width: clamp(170px, 17vw, 230px);
    min-width: 170px;
    max-width: 230px;
    flex: 0 0 auto;
    padding: 0.42rem 0.5rem;
    font-size: 0.82rem;
}

.business-centers-hours-sep {
    color: #667085;
    font-size: 0.82rem;
    font-weight: 600;
}

.business-centers-hours-remove {
    border: 0;
    background: transparent;
    color: #d92d4f;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.business-centers-hours-remove:hover {
    color: #b42342;
    background: #fde7ec;
}

.business-centers-hours-remove .material-symbols-outlined {
    font-size: 1.02rem;
}

.business-centers-hours-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    border: 0;
    background: transparent;
    color: #334155;
    width: 26px;
    height: 26px;
    margin-left: 0.06rem;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 999px;
}

.business-centers-hours-add .material-symbols-outlined {
    width: 19px;
    height: 19px;
    border: 1.5px solid #98a2b3;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
}

.business-centers-hours-add-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: #111827;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: 8px;
    padding: 0.35rem 0.46rem;
    box-shadow: 0 10px 18px rgba(17, 24, 39, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.business-centers-hours-add-label::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #111827;
}

.business-centers-hours-add:hover {
    color: #111827;
    background: #eef2f7;
}

.business-centers-hours-add:hover .business-centers-hours-add-label,
.business-centers-hours-add:focus-visible .business-centers-hours-add-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.business-centers-hours-add:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.business-centers-hours-row.is-closed .business-centers-hours-ranges,
.business-centers-hours-row.is-closed .business-centers-hours-add {
    opacity: 0.5;
}

.business-centers-hidden-fields {
    display: none;
}

.business-centers-branch-list {
    display: grid;
    gap: 0.72rem;
}

.business-centers-branch-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.18rem;
}

.business-centers-branch-list-head h3 {
    margin: 0;
    color: #111827;
    font-size: 0.94rem;
    line-height: 1.25;
}

.business-centers-branch-list-head span {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d5dde9;
    background: #ffffff;
    color: #384457;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 0.35rem;
}

.business-centers-branch-item {
    padding: 0.98rem 1.1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.business-centers-branch-item.is-active {
    border-color: #6b5cff;
    background: #faf9ff;
    box-shadow: inset 0 0 0 2px rgba(107, 92, 255, 0.12);
}

.business-centers-branch-copy {
    min-width: 0;
    display: grid;
    gap: 0.24rem;
}

.business-centers-branch-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.25;
}

.business-centers-branch-copy p {
    margin: 0;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.business-centers-branch-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.business-centers-branch-actions .btn {
    min-height: 36px;
    padding: 0.42rem 0.95rem;
}

.business-centers-branch-empty {
    padding: 0.95rem 1.05rem;
    color: #667085;
    font-size: 0.87rem;
    line-height: 1.4;
}

.business-centers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.business-centers-detail-stack {
    display: grid;
    gap: 1rem;
}

.business-centers-info-card {
    padding: 1.4rem 1.4rem 1.2rem;
}

.business-centers-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.business-centers-info-head h2 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.business-centers-info-head a {
    color: #6b5cff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
}

.business-centers-info-stack {
    display: grid;
    gap: 0.95rem;
}

.business-centers-info-item {
    display: grid;
    gap: 0.18rem;
}

.business-centers-info-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.32;
}

.business-centers-info-item strong {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.42;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.business-centers-map-card {
    padding: 1.4rem 1.4rem 1.3rem;
}

.business-centers-hours-copy {
    margin: -0.2rem 0 0.62rem;
    color: #5b667a;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 86ch;
}

.business-centers-hours-copy a {
    color: #5a4cff;
    text-decoration: none;
    font-weight: 700;
}

.business-centers-hours-card {
    position: relative;
    overflow: hidden;
}

.business-centers-hours-card::before {
    content: '';
    position: absolute;
    top: -48px;
    right: -78px;
    width: 210px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(104, 87, 255, 0.1), rgba(104, 87, 255, 0));
    pointer-events: none;
}

.business-centers-hours-summary {
    margin-top: 0.06rem;
    padding: 0.68rem 0.8rem;
    border: 1px solid #dfe6f3;
    border-radius: 12px;
    background: linear-gradient(180deg, #fafcff 0%, #f4f8ff 100%);
}

.business-centers-hours-summary span {
    color: #4f5f7a;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.business-centers-hours-summary strong {
    display: block;
    margin-top: 0.2rem;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.business-centers-hours-preview-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.68rem;
}

.business-centers-hours-day-card {
    border: 1px solid #dbe3f1;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    min-height: 132px;
    box-shadow: 0 6px 14px rgba(30, 41, 59, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.business-centers-hours-day-card:hover {
    transform: translateY(-1px);
    border-color: #cdd8ea;
    box-shadow: 0 10px 20px rgba(30, 41, 59, 0.1);
}

.business-centers-hours-day-card header {
    background: linear-gradient(180deg, #f0efff 0%, #ebf2ff 100%);
    color: #4f46e5;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    padding: 0.56rem 0.38rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #e4e8f2;
}

.business-centers-hours-day-lines {
    padding: 0.54rem 0.42rem 0.62rem;
    display: grid;
    gap: 0.34rem;
    align-content: start;
}

.business-centers-hours-day-lines p {
    margin: 0;
    color: #111827;
    font-size: 0.79rem;
    line-height: 1.22;
    text-align: center;
    font-weight: 700;
    padding: 0.38rem 0.28rem;
    border-radius: 9px;
    background: #f8fafd;
    border: 1px solid #e5eaf3;
}

.business-centers-hours-day-card.is-closed header {
    color: #6f7c92;
    background: linear-gradient(180deg, #f4f6fa 0%, #eef2f7 100%);
    border-bottom-color: #e0e6ef;
}

.business-centers-hours-day-card.is-closed .business-centers-hours-day-lines p {
    color: #7a879d;
    background: #fbfcfe;
    border-style: dashed;
}

.business-centers-map-frame {
    margin-top: 0.8rem;
    border-radius: 12px;
    border: 1px solid #dce2ec;
    overflow: hidden;
    background: #eef3f9;
    min-height: 248px;
}

.business-centers-map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 248px;
    border: 0;
    display: block;
}

.business-centers-map-picker {
    position: relative;
    border-radius: 12px;
    border: 1px solid #dce2ec;
    overflow: hidden;
    background: #eef3f9;
    min-height: 248px;
    height: 248px;
}

.business-centers-map-picker-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 600;
}

.business-centers-map-picker .leaflet-container {
    width: 100%;
    height: 100%;
}

@media (max-width: 1100px) {
    .business-settings-summary-grid,
    .business-settings-link-grid,
    .business-settings-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-highlight {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-highlight-media,
    .business-centers-highlight-media-fallback {
        min-height: 200px;
        border-right: 0;
        border-bottom: 1px solid #d9dde6;
        border-bottom-left-radius: 0;
        border-top-right-radius: 17px;
    }

    .business-centers-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-hours-preview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}

@media (max-width: 980px) {
    .business-settings-shell {
        padding: 0.95rem 0.95rem 1.35rem;
    }

    .admin-body.admin-page-business-settings .clients-pro-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .admin-body.admin-page-business-settings .clients-pro-side {
        position: static;
        top: auto;
        max-height: none;
    }
}

@media (max-width: 720px) {
    .business-settings-breadcrumb-bar,
    .business-settings-card-head,
    .business-settings-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .business-settings-card {
        padding: 1.2rem;
    }
}

@media (max-width: 720px) {
    .business-settings-header h1 {
        font-size: 1.75rem;
    }

    .business-settings-header {
        flex-direction: column;
        align-items: stretch;
    }

    .business-centers-header-actions {
        width: 100%;
    }

    .business-centers-options,
    .business-centers-card-actions {
        width: 100%;
    }

    .business-centers-options summary,
    .business-centers-card-actions summary,
    .business-centers-add-btn {
        width: 100%;
        justify-content: center;
    }

    .business-centers-highlight-copy,
    .business-centers-edit-section,
    .business-centers-branch-item,
    .business-centers-info-card,
    .business-centers-map-card {
        padding: 1.05rem;
    }

    .business-centers-branch-item {
        flex-direction: column;
        align-items: stretch;
    }

    .business-centers-branch-actions {
        width: 100%;
    }

    .business-centers-branch-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .business-centers-map-frame,
    .business-centers-map-frame iframe,
    .business-centers-map-picker {
        min-height: 212px;
    }

    .business-centers-map-picker {
        height: 212px;
    }

    .business-centers-address-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-centers-hours-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.52rem;
    }

    .business-centers-hours-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 0.55rem 0.65rem;
    }

    .business-centers-hours-ranges,
    .business-centers-hours-time {
        grid-column: 1 / -1;
        width: 100%;
    }

    .business-centers-hours-time select {
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .business-centers-hours-add {
        grid-column: 1 / -1;
        width: 28px;
        justify-content: center;
    }

    .business-centers-hours-remove {
        justify-self: end;
    }

    .business-centers-edit-head,
    .business-centers-edit-section-head {
        flex-direction: column;
        align-items: stretch;
    }
}

.appointment-settings-page {
    gap: 1rem;
    width: 100%;
    max-width: none;
}

.appointment-settings-page.is-waitlist-edit {
    max-width: none;
}

.business-settings-shell.appointment-settings-shell.is-resource-editor {
    background: #ffffff;
}

.appointment-settings-shell .business-settings-card {
    overflow: hidden;
}

.appointment-settings-header-actions {
    justify-content: flex-end;
    align-self: flex-start;
    margin-top: 0.15rem;
}

.appointment-settings-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
}

.appointment-settings-editor-card {
    width: 100%;
    max-width: none;
    padding: 1.5rem 1.6rem 1.35rem;
    border: 1px solid #d9dde6;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
}

.appointment-settings-summary-card {
    width: 100%;
    max-width: none;
    padding: 1.9rem 2rem;
    border: 1px solid #d9dde6;
    border-radius: 18px;
    background: #ffffff;
}

.appointment-settings-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.35rem;
}

.appointment-settings-summary-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-settings-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

.appointment-settings-summary-item {
    display: grid;
    gap: 0.18rem;
}

.appointment-settings-summary-item-span {
    grid-column: 1 / -1;
}

.appointment-settings-summary-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-settings-summary-item strong {
    color: #667085;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
}

.appointment-settings-summary-divider {
    margin: 1.55rem 0 1.45rem;
    height: 1px;
    background: #e5e8ef;
}

.appointment-settings-summary-foot h3 {
    margin: 0;
    color: #111827;
    font-size: 0.9rem;
    line-height: 1.25;
}

.appointment-settings-summary-foot p {
    margin: 0.5rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.5;
}

.appointment-settings-summary-foot a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.appointment-online-grid {
    display: grid;
    gap: 0.78rem;
}

.appointment-online-card {
    width: 100%;
    max-width: none;
    padding: 1rem 1.1rem;
    border: 1px solid #d9dde6;
    border-radius: 14px;
    background: #ffffff;
}

.appointment-online-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.appointment-online-card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 0.92rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.appointment-online-card-head p {
    margin: 0.24rem 0 0;
    color: #667085;
    font-size: 0.76rem;
    line-height: 1.45;
}

.appointment-online-checklist {
    margin: 0.72rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.52rem;
}

.appointment-online-check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.5rem;
    color: #5f697d;
    font-size: 0.83rem;
    line-height: 1.42;
}

.appointment-online-check .material-symbols-outlined {
    margin-top: 0.03rem;
    color: #c6cedd;
    font-size: 1rem;
    line-height: 1;
}

.appointment-online-check.is-active {
    color: #1f2a3a;
}

.appointment-online-check.is-active .material-symbols-outlined {
    color: #28a465;
}

.appointment-online-check strong {
    color: #111827;
    font-weight: 700;
}

.appointment-online-warning {
    margin-top: 0.72rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid #efcf86;
    border-radius: 12px;
    background: #fcf4dc;
}

.appointment-online-warning .material-symbols-outlined {
    margin-top: 0.02rem;
    color: #c96b14;
    font-size: 1.05rem;
    line-height: 1;
}

.appointment-online-warning p {
    margin: 0;
    color: #1f2937;
    font-size: 0.83rem;
    line-height: 1.45;
}

.appointment-online-warning a {
    margin-top: 0.22rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.appointment-online-warning a::after {
    content: '\2192';
}

.appointment-online-important-copy {
    margin: 0.72rem 0 0;
    color: #667085;
    font-size: 0.83rem;
    line-height: 1.5;
}

.appointment-online-form {
    display: grid;
    gap: 1.2rem;
}

#online-notifications-form textarea[name="notify_emails"] {
    min-height: 122px;
}

.sales-settings-page {
    width: 100%;
    max-width: none;
}

.team-settings-page {
    width: 100%;
    max-width: none;
}

.team-timeoff-list {
    display: grid;
    gap: 0.82rem;
}

.team-timeoff-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.team-timeoff-toolbar-menu {
    position: relative;
    z-index: 20;
}

.team-timeoff-toolbar-menu[open] {
    z-index: 40;
}

.team-timeoff-toolbar-menu[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.team-timeoff-toolbar-btn,
.team-timeoff-row-action-btn {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #d6dce8;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1.15rem;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.team-timeoff-toolbar-btn::-webkit-details-marker,
.team-timeoff-row-action-btn::-webkit-details-marker {
    display: none;
}

.team-timeoff-toolbar-btn .material-symbols-outlined,
.team-timeoff-row-action-btn .material-symbols-outlined {
    font-size: 1.05rem;
}

.team-timeoff-toolbar-btn-primary {
    border-color: #111827;
    background: #111827;
    color: #ffffff;
}

.team-timeoff-card {
    padding: 1rem 1.2rem;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.team-settings-shell .team-timeoff-card {
    overflow: visible;
}

.team-timeoff-main {
    min-width: 0;
}

.team-timeoff-main h3 {
    margin: 0;
    color: #111827;
    font-size: 1.07rem;
    font-weight: 700;
    line-height: 1.25;
}

.team-timeoff-card .team-timeoff-editor-copy,
.team-timeoff-editor-card {
    display: none;
}

.team-timeoff-lock {
    color: #a5adbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-timeoff-lock .material-symbols-outlined {
    font-size: 1.12rem;
    line-height: 1;
}

.team-timeoff-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.team-timeoff-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.team-timeoff-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.team-timeoff-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(17, 24, 39, 0.18);
    backdrop-filter: blur(4px);
}

.team-timeoff-modal-backdrop[hidden] {
    display: none !important;
}

.team-timeoff-modal-card {
    position: relative;
    width: min(100%, 760px);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 26px 60px rgba(17, 24, 39, 0.18);
    padding: 2.4rem 2.6rem;
}

.team-timeoff-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.team-timeoff-modal-close .material-symbols-outlined {
    font-size: 1.4rem;
}

.team-timeoff-modal-form {
    display: grid;
    gap: 1.5rem;
}

.team-timeoff-modal-form label.form-group {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.team-timeoff-modal-form label.form-group > span {
    display: inline-block;
    margin-bottom: 0.26rem;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
}

.team-timeoff-modal-head {
    display: grid;
    gap: 0.5rem;
    padding-right: 3rem;
}

.team-timeoff-modal-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.32rem, 1.7vw, 1.6rem);
    line-height: 1.12;
    letter-spacing: -0.05em;
}

.team-timeoff-modal-head p {
    margin: 0;
    color: #667085;
    font-size: 0.98rem;
    line-height: 1.5;
}

.team-timeoff-editor-card {
    max-width: 760px;
}

.team-timeoff-editor-form {
    display: grid;
    gap: 1rem;
}

.team-timeoff-config-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.team-timeoff-config-grid .form-group small {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.team-timeoff-editor-head {
    margin-bottom: 0.3rem;
}

.team-timeoff-editor-copy {
    margin: 0.35rem 0 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
}

.team-timeclock-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #e4e6eb;
    background: #f5f6f8;
    color: #525866;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

.team-timeclock-status.is-active {
    border-color: #cde7d8;
    background: #edf8f2;
    color: #20613f;
}

.team-timeclock-editor-card {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.team-timeclock-editor-form {
    display: grid;
    gap: 1rem;
}

.team-timeclock-editor-head {
    margin-bottom: 0.45rem;
}

.team-timeclock-editor-head h2 {
    font-size: clamp(0.96rem, 1.2vw, 1.1rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.team-timeclock-proximity-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.team-timeclock-proximity-copy {
    min-width: 0;
}

.team-timeclock-proximity-copy h3 {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.team-timeclock-proximity-copy p {
    margin: 0.35rem 0 0;
    max-width: 70ch;
    color: #667085;
    font-size: 0.96rem;
    line-height: 1.5;
}

.team-timeclock-proximity-copy a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.admin-body.admin-page-staff-schedule .admin-content {
    background: #f3f3f5;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow-x: hidden;
}

.admin-body.admin-page-staff-schedule .admin-topbar {
    margin: 0;
}

.admin-body.admin-page-staff-schedule .business-settings-shell {
    padding-top: 1.1rem;
}

.staff-schedule-page {
    display: grid;
    gap: 1rem;
}

.staff-schedule-header {
    align-items: center;
}

.staff-schedule-header p {
    max-width: 880px;
}

.staff-schedule-toolbar-card,
.staff-schedule-board-card,
.staff-schedule-note-card,
.staff-schedule-empty-card {
    padding: 1.35rem 1.45rem;
}

.staff-schedule-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-schedule-toolbar-filters,
.staff-schedule-range-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.staff-schedule-range-tools .appointments-toolbar-chip,
.staff-schedule-range-tools .appointments-toolbar-range {
    font-size: 0.79rem;
}

.staff-schedule-range-tools .appointments-toolbar-chip {
    font-weight: 700;
}

.staff-schedule-range-tools .appointments-toolbar-date-group .appointments-toolbar-range {
    min-width: 164px;
    font-size: 0.8rem;
}

.staff-schedule-range-tools .appointments-toolbar-date-group {
    overflow: visible;
}

.staff-schedule-week-picker {
    position: relative;
}

.staff-schedule-range-tools .appointments-toolbar-range-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    padding: 0 1rem;
    border: 0;
    background: #ffffff;
    font-weight: 700;
    color: #132238;
    cursor: pointer;
    user-select: none;
}

.staff-schedule-range-tools .appointments-toolbar-range-button:focus-visible {
    outline: 2px solid rgba(95, 79, 255, 0.42);
    outline-offset: -2px;
}

.staff-schedule-range-tools .appointments-toolbar-range-button .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
    color: #64748b;
    pointer-events: none;
}

.staff-schedule-week-popover[hidden] {
    display: none;
}

.staff-schedule-week-popover {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 50%;
    z-index: 35;
    width: min(320px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid #d8e1ec;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
    transform: translateX(-50%);
}

.staff-schedule-week-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.staff-schedule-week-popover-head strong {
    color: #132238;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: capitalize;
}

.staff-schedule-week-nav {
    width: 38px;
    height: 38px;
    border: 1px solid #d8e1ec;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2a3b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.staff-schedule-week-nav:hover,
.staff-schedule-week-nav:focus-visible {
    background: #f4f7fb;
    color: #111827;
}

.staff-schedule-weekdays,
.staff-schedule-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.32rem;
}

.staff-schedule-weekdays {
    margin-bottom: 0.5rem;
}

.staff-schedule-weekdays span {
    color: #68778d;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.staff-schedule-week-day {
    min-width: 0;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #132238;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
}

.staff-schedule-week-day:not(:disabled):hover,
.staff-schedule-week-day:not(:disabled):focus-visible {
    background: #f3f6fb;
    border-color: #d8e1ec;
    color: #111827;
}

.staff-schedule-week-day.is-outside {
    color: #6f7e93;
    font-weight: 600;
}

.staff-schedule-week-day.is-disabled,
.staff-schedule-week-day:disabled {
    background: #f4f6fb;
    border-color: transparent;
    color: #97a3b5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.staff-schedule-week-day.is-disabled.is-outside,
.staff-schedule-week-day:disabled.is-outside {
    color: #b0bac8;
}

.staff-schedule-week-day.is-today {
    border-color: #cfd7e3;
}

.staff-schedule-week-day.is-in-week {
    background: rgba(101, 88, 245, 0.12);
    border-color: rgba(101, 88, 245, 0.16);
    color: #4f46e5;
}

.staff-schedule-week-day.is-week-start,
.staff-schedule-week-day.is-week-end {
    background: #6558f5;
    border-color: #6558f5;
    color: #ffffff;
}

.staff-schedule-week-day.is-disabled.is-in-week,
.staff-schedule-week-day:disabled.is-in-week {
    background: rgba(101, 88, 245, 0.08);
    border-color: rgba(101, 88, 245, 0.14);
    color: #8d84d8;
}

.staff-schedule-week-day.is-disabled.is-week-start,
.staff-schedule-week-day.is-disabled.is-week-end,
.staff-schedule-week-day:disabled.is-week-start,
.staff-schedule-week-day:disabled.is-week-end {
    background: rgba(101, 88, 245, 0.3);
    border-color: rgba(101, 88, 245, 0.3);
    color: #ffffff;
}

@media (max-width: 720px) {
    .staff-schedule-week-popover {
        left: auto;
        right: 0;
        transform: none;
    }
}

.staff-schedule-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 48px;
    padding: 0 1.05rem;
    border: 1px solid #d7dfe9;
    border-radius: 999px;
    background: #ffffff;
    color: #132238;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.staff-schedule-filter-chip .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.staff-schedule-staff-switcher {
    position: relative;
    min-width: 244px;
}

.staff-schedule-staff-switcher summary {
    list-style: none;
}

.staff-schedule-staff-switcher summary::-webkit-details-marker {
    display: none;
}

.staff-schedule-staff-switcher-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 2px solid #8f7bff;
    background: #ffffff;
    color: #132238;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0 1rem 0 1.15rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(143, 123, 255, 0.14);
}

.staff-schedule-staff-switcher-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-schedule-staff-switcher-trigger .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.staff-schedule-staff-switcher[open] .staff-schedule-staff-switcher-trigger {
    border-color: #6b5cff;
}

.staff-schedule-staff-switcher-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 30;
    width: min(296px, calc(100vw - 2rem));
    padding: 0.8rem;
    border: 1px solid #dfe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
}

.staff-schedule-staff-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 0.8rem;
    border: 1px solid #d7dfe9;
    border-radius: 12px;
    background: #ffffff;
}

.staff-schedule-staff-search .material-symbols-outlined {
    color: #98a2b3;
    font-size: 1.15rem;
    line-height: 1;
}

.staff-schedule-staff-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101828;
    font-size: 0.88rem;
    font-weight: 600;
}

.staff-schedule-staff-search input::placeholder {
    color: #98a2b3;
}

.staff-schedule-staff-option-list {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.7rem;
}

.staff-schedule-staff-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 46px;
    padding: 0.55rem 0.7rem;
    border: 2px solid transparent;
    border-radius: 14px;
    color: #111827;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.staff-schedule-staff-option:hover {
    background: #f8faff;
}

.staff-schedule-staff-option.is-active {
    border-color: #111827;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
}

.staff-schedule-staff-option.is-hidden {
    display: none;
}

.staff-schedule-staff-option-main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.staff-schedule-staff-option-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--member-color, #9ad9f5) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--member-color, #9ad9f5) 62%, #ffffff 38%) 100%);
    color: #16243c;
    font-size: 0.86rem;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.96);
}

.staff-schedule-staff-option-avatar.is-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.staff-schedule-staff-option-copy {
    display: grid;
    min-width: 0;
}

.staff-schedule-staff-option-copy strong {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.staff-schedule-staff-option-copy small {
    color: #667085;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.3;
}

.staff-schedule-staff-option-check {
    color: #111827;
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
}

.staff-schedule-staff-option.is-active .staff-schedule-staff-option-check {
    opacity: 1;
}

.staff-schedule-staff-search-empty {
    margin: 0.8rem 0 0;
    color: #667085;
    font-size: 0.9rem;
    font-weight: 700;
}

.staff-schedule-board-card {
    overflow: visible;
    display: grid;
    gap: 0.9rem;
}

.staff-schedule-board-card.is-guided,
.staff-schedule-hours-day-card.is-guided {
    border-color: #6b5cff;
    box-shadow: 0 0 0 3px rgba(107, 92, 255, 0.14);
}

.staff-schedule-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 0.9rem;
    align-items: stretch;
}

.staff-schedule-board-head,
.staff-schedule-board-row {
    display: grid;
    grid-template-columns: 272px repeat(7, minmax(132px, 1fr));
    gap: 0.35rem;
    align-items: stretch;
}

.staff-schedule-board-row-member {
    margin-bottom: 0.1rem;
}

.staff-schedule-board-row {
    position: relative;
    isolation: isolate;
}

.staff-schedule-board-staff-label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.25rem 0.2rem;
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
}

.staff-schedule-board-side-label {
    gap: 0.55rem;
}

.staff-schedule-board-inline-link {
    border: 0;
    background: transparent;
    color: #6b5cff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0;
    text-decoration: none;
}

.staff-schedule-inline-switcher summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
}

.staff-schedule-inline-switcher summary::-webkit-details-marker {
    display: none;
}

.staff-schedule-inline-switcher .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.staff-schedule-inline-switcher .services-catalog-menu-dropdown a.is-active {
    color: #111827;
    font-weight: 800;
}

.staff-schedule-board-inline-note {
    color: #8a92a2;
    font-size: 0.78rem;
    font-weight: 700;
}

.staff-schedule-board-day-meta {
    display: grid;
    place-items: center;
    gap: 0.12rem;
    min-height: 56px;
    padding: 0.35rem 0.55rem;
    text-align: center;
}

.staff-schedule-board-day-meta strong {
    color: #111827;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 800;
}

.staff-schedule-board-day-meta span {
    color: #7b8597;
    font-size: 0.7rem;
    font-weight: 700;
}

.staff-schedule-board-day-meta.is-off span {
    color: #a0a7b5;
}

.staff-schedule-member-card,
.staff-schedule-location-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 110px;
    padding: 1rem 1.1rem;
    border: 1px solid #d9dfeb;
    border-radius: 16px;
    background: #ffffff;
}

.staff-schedule-member-main,
.staff-schedule-location-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.staff-schedule-member-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--member-color, #9ad9f5) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--member-color, #9ad9f5) 62%, #ffffff 38%) 100%);
    color: #16243c;
    font-size: 1rem;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
}

.staff-schedule-member-avatar.is-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.staff-schedule-location-thumb {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eef2ff 0%, #f5f7ff 100%);
    color: #6b5cff;
    flex-shrink: 0;
}

.staff-schedule-location-thumb .material-symbols-outlined {
    font-size: 1.4rem;
    line-height: 1;
}

.staff-schedule-member-copy,
.staff-schedule-location-copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.staff-schedule-member-copy strong,
.staff-schedule-location-copy strong {
    color: #111827;
    font-size: 0.86rem;
    line-height: 1.15;
}

.staff-schedule-member-copy span,
.staff-schedule-member-copy small,
.staff-schedule-location-copy span,
.staff-schedule-location-copy small {
    color: #667085;
    line-height: 1.35;
}

.staff-schedule-member-copy span,
.staff-schedule-location-copy span {
    font-size: 0.8rem;
    font-weight: 700;
}

.staff-schedule-member-copy small,
.staff-schedule-location-copy small {
    font-size: 0.7rem;
    font-weight: 700;
}

.staff-schedule-member-meta,
.staff-schedule-location-meta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.staff-schedule-member-meta a,
.staff-schedule-location-meta a {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #d7deea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    text-decoration: none;
    background: #ffffff;
}

.staff-schedule-member-meta .material-symbols-outlined,
.staff-schedule-location-meta .material-symbols-outlined {
    font-size: 1.05rem;
    line-height: 1;
}

.staff-schedule-hours-summary {
    display: grid;
    align-content: center;
}

.staff-schedule-hours-summary small {
    display: block;
    margin-top: 0.28rem;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

.staff-schedule-hours-grid {
    margin-top: 0.15rem;
}

.staff-schedule-hours-day-card {
    min-height: 110px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.staff-schedule-hours-day-card.is-guided {
    transform: translateY(-2px);
}

.staff-schedule-hours-day-lines {
    gap: 0.42rem;
}

.staff-schedule-hours-date,
.staff-schedule-hours-minutes {
    margin: 0;
    color: #69758b;
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: center;
    font-weight: 800;
    padding: 0;
    border: 0;
    background: transparent;
}

.staff-schedule-hours-minutes {
    color: #4f5f7a;
    margin-top: -0.08rem;
}

.staff-schedule-day-cell {
    min-height: 110px;
    position: relative;
    min-width: 0;
    padding: 0.35rem;
    border: 1px solid #dfe5ef;
    border-radius: 16px;
    background: #f6f7fb;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    overflow: visible;
}

.staff-schedule-day-cell.is-active {
    background: #f1f0ff;
}

.staff-schedule-day-cell.is-off {
    background: #f7f7f8;
}

.staff-schedule-day-toggle-row {
    display: flex;
    justify-content: center;
}

.staff-schedule-day-surface {
    width: 100%;
    max-width: 100%;
    min-height: 68px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    text-align: center;
    min-width: 0;
}

.staff-schedule-day-cell.is-menu-open .staff-schedule-day-surface {
    box-shadow: inset 0 0 0 1px rgba(107, 92, 255, 0.18);
}

.staff-schedule-day-cell.is-timeoff-menu-open .staff-schedule-day-surface {
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16);
}

.staff-schedule-day-surface-state {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    padding-top: calc(var(--staff-schedule-timeoff-stack, 0) * 54px);
}

.staff-schedule-day-menu,
.staff-schedule-timeoff-menu {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 0.35rem;
    min-width: 250px;
    max-width: min(280px, calc(100vw - 2rem));
    z-index: 20;
    display: grid;
    gap: 0;
    padding: 0.45rem 0;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.staff-schedule-day-menu[hidden],
.staff-schedule-timeoff-menu[hidden] {
    display: none !important;
}

.staff-schedule-day-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    padding: 0.62rem 1rem;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.01em;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
}

.staff-schedule-day-menu-item + .staff-schedule-day-menu-item {
    border-top: 1px solid #f0f2f7;
}

.staff-schedule-day-menu-item:hover,
.staff-schedule-day-menu-item:focus-visible,
.staff-schedule-day-menu-item:active {
    background: #f7f8fc;
    color: #111827;
}

.staff-schedule-day-menu-item.is-danger {
    color: #e11d48;
}

.staff-schedule-day-menu-item.is-danger:hover,
.staff-schedule-day-menu-item.is-danger:focus-visible,
.staff-schedule-day-menu-item.is-danger:active {
    background: #fff4f6;
    color: #e11d48;
}

.staff-schedule-day-pill,
.staff-schedule-shift-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
    overflow: hidden;
}

.staff-schedule-day-pill {
    background: rgba(255, 255, 255, 0.84);
    color: #7b8597;
}

.staff-schedule-day-pill.is-off {
    background: #f4f4f5;
    color: #7b8597;
}

.staff-schedule-day-pill.is-timeoff {
    background: #fff1f5;
    color: #be185d;
    border: 1px solid #f8bfd3;
}

.staff-schedule-timeoff-block {
    display: grid;
    gap: 0.1rem;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.8rem;
    border: 1px solid #cfd5de;
    border-radius: 10px;
    background: repeating-linear-gradient(
        -45deg,
        #eceef2 0,
        #eceef2 6px,
        #e2e5ea 6px,
        #e2e5ea 12px
    );
    color: #111827;
    text-align: center;
    justify-items: center;
    align-content: center;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}

.staff-schedule-day-cell.has-timeoff-range-start {
    z-index: 4;
}

.staff-schedule-timeoff-block-range {
    position: absolute;
    top: calc(var(--staff-schedule-timeoff-row, 0) * 54px);
    left: 0;
    width: calc((100% * var(--staff-schedule-timeoff-span, 1)) + ((var(--staff-schedule-timeoff-span, 1) - 1) * 0.35rem));
    max-width: none;
    z-index: 5;
}

.staff-schedule-timeoff-block-title {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.1;
    max-width: 100%;
    word-break: break-word;
}

.staff-schedule-timeoff-block-time,
.staff-schedule-timeoff-block-meta {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    max-width: 100%;
    word-break: break-word;
}

.staff-schedule-timeoff-block-meta {
    color: #6b7280;
}

.staff-schedule-shift-pill {
    background: rgba(255, 255, 255, 0.72);
    color: #111827;
}

.staff-schedule-day-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
}

.staff-schedule-day-add .material-symbols-outlined {
    font-size: 1.1rem;
    color: #6b5cff;
}

.staff-schedule-day-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 0.45rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    color: #495467;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.staff-schedule-day-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.staff-schedule-day-cell.is-active .staff-schedule-day-toggle {
    color: #2f2d73;
    background: rgba(255, 255, 255, 0.82);
}

.staff-schedule-day-editor {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.1rem;
}

.staff-schedule-day-editor[hidden] {
    display: none !important;
}

.staff-schedule-day-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.staff-schedule-day-editor-close {
    border: 0;
    background: transparent;
    color: #6b5cff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0;
}

.staff-schedule-day-editor {
    position: fixed;
    inset: 0;
    z-index: 90;
    padding: 1.5rem;
}

.staff-schedule-day-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 24, 39, 0.42);
    cursor: pointer;
}

.staff-schedule-day-modal {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: auto;
    overflow: auto;
    padding: 2rem 2.1rem 1.8rem;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(17, 24, 39, 0.22);
    display: grid;
    gap: 1.2rem;
}

.staff-schedule-day-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    cursor: pointer;
}

.staff-schedule-day-modal-close .material-symbols-outlined {
    font-size: 1.35rem;
}

.staff-schedule-day-modal-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    line-height: 1.2;
}

.staff-schedule-day-modal-head p {
    margin: 0.55rem 0 0;
    color: #667085;
    font-size: 0.95rem;
    line-height: 1.55;
}

.staff-schedule-day-modal-grid-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 0.9rem;
    align-items: center;
}

.staff-schedule-day-modal-grid-head span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.staff-schedule-time-slots {
    display: grid;
    gap: 0.45rem;
}

.staff-schedule-time-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.9rem;
}

.staff-schedule-time-slot select {
    min-width: 0;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid #d8deea;
    background: #ffffff;
    color: #1a2740;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0 0.8rem;
    box-shadow: none;
}

.staff-schedule-time-slot-clear {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #111827;
    cursor: pointer;
}

.staff-schedule-day-modal-tools,
.staff-schedule-day-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-schedule-day-add-shift {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid #d4d9e4;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.staff-schedule-day-add-shift .material-symbols-outlined {
    font-size: 1.1rem;
    color: #6b5cff;
}

.staff-schedule-day-total {
    color: #667085;
    font-size: 0.95rem;
    font-weight: 700;
}

.staff-schedule-day-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.staff-schedule-timeoff-backdrop[hidden] {
    display: none !important;
}

.staff-schedule-timeoff-card {
    width: min(100%, 760px);
}

.staff-schedule-timeoff-head {
    margin-bottom: 0.25rem;
}

.staff-schedule-timeoff-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.7rem, 2.2vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.staff-schedule-timeoff-form {
    display: grid;
    gap: 1.3rem;
}

.staff-schedule-timeoff-grid {
    display: grid;
    gap: 1rem;
}

.staff-schedule-timeoff-grid-row {
    display: grid;
    gap: 1rem;
}

.staff-schedule-timeoff-grid-row-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-schedule-timeoff-grid-row-three {
    grid-template-columns: minmax(0, 1.45fr) minmax(140px, 0.72fr) minmax(140px, 0.72fr);
}

.staff-schedule-timeoff-grid-row-four {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(140px, 0.72fr) minmax(140px, 0.72fr);
}

.staff-schedule-timeoff-field-date {
    min-width: 0;
}

.staff-schedule-timeoff-form input[type="date"] {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid #d8deea;
    background: #ffffff;
    color: #1a2740;
    font-size: 0.96rem;
    font-weight: 600;
    padding: 0 0.95rem;
    box-shadow: none;
}

.staff-schedule-timeoff-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.staff-schedule-timeoff-check {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}

.staff-schedule-timeoff-check input {
    width: 24px;
    height: 24px;
    margin: 0;
}

.staff-schedule-timeoff-description {
    position: relative;
}

.staff-schedule-timeoff-repeat-until {
    max-width: 320px;
}

.staff-schedule-timeoff-mode-note {
    margin: -0.15rem 0 0;
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.45;
}

.staff-schedule-timeoff-description textarea {
    min-height: 120px;
    resize: vertical;
}

.staff-schedule-timeoff-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #8b6a49;
    font-size: 0.92rem;
    font-weight: 700;
}

.staff-schedule-timeoff-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-schedule-timeoff-total {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.staff-schedule-timeoff-note {
    margin: -0.2rem 0 0;
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.45;
}

.staff-schedule-timeoff-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.staff-schedule-timeoff-actions .btn {
    min-width: 120px;
}

.staff-schedule-timeoff-delete-btn {
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.2);
}

.staff-schedule-timeoff-delete-btn:hover,
.staff-schedule-timeoff-delete-btn:focus-visible {
    background: #fff4f6;
    color: #e11d48;
}

.staff-schedule-timeoff-confirm-backdrop {
    z-index: 1250;
}

.staff-schedule-timeoff-confirm-backdrop[hidden] {
    display: none !important;
}

.staff-schedule-timeoff-confirm-card {
    width: min(100%, 480px);
    padding: 2.2rem 2.35rem 2rem;
    display: grid;
    gap: 1.2rem;
}

.staff-schedule-timeoff-confirm-copy p {
    margin: 0;
    color: #111827;
    font-size: 0.97rem;
    line-height: 1.55;
}

.staff-schedule-timeoff-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}

.staff-schedule-timeoff-confirm-delete {
    min-width: 124px;
    background: #e11d48;
    border-color: #e11d48;
}

.staff-schedule-timeoff-confirm-delete:hover,
.staff-schedule-timeoff-confirm-delete:focus-visible {
    background: #be123c;
    border-color: #be123c;
}

.staff-schedule-modal-open {
    overflow: hidden;
}

.staff-schedule-hours-day-card.is-closed .staff-schedule-day-toggle {
    background: #fbfcfe;
    color: #7a879d;
}

.staff-schedule-hours-day-card.is-closed .staff-schedule-time-slot {
    background: #fbfcfe;
    border-style: dashed;
}

.staff-schedule-hours-day-card.is-editor-open {
    box-shadow: 0 18px 36px rgba(17, 24, 39, 0.08);
}

.staff-schedule-note-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.staff-schedule-note-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.staff-schedule-note-copy .material-symbols-outlined {
    color: #111827;
    font-size: 1.35rem;
    line-height: 1;
}

.staff-schedule-note-copy p {
    margin: 0;
    color: #5c6676;
    font-size: 0.8rem;
    line-height: 1.55;
}

.staff-schedule-empty-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.staff-schedule-empty-card h2 {
    margin: 0 0 0.35rem;
    color: #111827;
    font-size: 1.05rem;
}

.staff-schedule-empty-card p {
    margin: 0;
    color: #667085;
    line-height: 1.5;
}

@media (max-width: 1320px) {
    .staff-schedule-summary-row {
        grid-template-columns: 1fr;
    }

    .staff-schedule-board-head,
    .staff-schedule-board-row {
        grid-template-columns: 240px repeat(7, minmax(124px, 1fr));
    }
}

@media (max-width: 820px) {
    .staff-schedule-day-modal {
        width: min(100%, calc(100vw - 1rem));
        max-height: calc(100vh - 1rem);
        padding: 1.35rem 1rem 1.2rem;
    }

    .staff-schedule-day-modal-grid-head,
    .staff-schedule-time-slot {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-schedule-day-modal-grid-head .sr-only {
        display: none;
    }

    .staff-schedule-day-modal-tools,
    .staff-schedule-day-modal-foot,
    .staff-schedule-day-modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-schedule-day-modal-actions .btn,
    .staff-schedule-day-add-shift,
    .staff-schedule-day-toggle {
        width: 100%;
        justify-content: center;
    }

    .staff-schedule-timeoff-card {
        width: min(100%, calc(100vw - 1rem));
        padding: 1.4rem 1rem 1.2rem;
    }

    .staff-schedule-timeoff-grid {
        gap: 0.9rem;
    }

    .staff-schedule-timeoff-grid-row,
    .staff-schedule-timeoff-grid-row-two,
    .staff-schedule-timeoff-grid-row-three,
    .staff-schedule-timeoff-grid-row-four {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-schedule-timeoff-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-schedule-timeoff-actions .btn {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .staff-schedule-board-card {
        overflow-x: auto;
    }

    .staff-schedule-board-head,
    .staff-schedule-board-row {
        min-width: 1120px;
    }
}

@media (max-width: 720px) {
    .staff-schedule-toolbar-card,
    .staff-schedule-board-card,
    .staff-schedule-note-card,
    .staff-schedule-empty-card {
        padding: 1rem;
    }

    .staff-schedule-note-card,
    .staff-schedule-empty-card,
    .staff-schedule-toolbar,
    .staff-schedule-toolbar-filters,
    .staff-schedule-range-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-schedule-filter-chip,
    .staff-schedule-staff-switcher,
    .staff-schedule-staff-switcher-trigger {
        width: 100%;
    }

    .staff-schedule-staff-switcher {
        min-width: 0;
    }

    .staff-schedule-staff-switcher-panel {
        width: 100%;
    }
}

.team-timeclock-group-title {
    margin: 0.5rem 0 0;
    color: #111827;
    font-size: 0.99rem;
    font-weight: 800;
    line-height: 1.3;
}

.team-timeclock-checkbox-row {
    padding: 0.15rem 0;
}

.team-timeclock-checkbox-row .appointment-settings-checkbox-copy strong {
    font-size: 0.98rem;
}

.team-timeclock-checkbox-row .appointment-settings-checkbox-copy small {
    font-size: 0.9rem;
    line-height: 1.45;
}

.team-timeclock-note p {
    font-size: 0.98rem;
}

.team-payroll-header-btn {
    white-space: nowrap;
}

.team-payroll-list {
    gap: 1rem;
}

.team-payroll-card {
    padding: 1.4rem 1.55rem;
}

.team-payroll-card-head {
    margin-bottom: 1.05rem;
}

.team-payroll-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 1rem 1.6rem;
}

.team-payroll-editor-card {
    width: 100%;
    max-width: 860px;
}

.team-payroll-editor-form {
    display: grid;
    gap: 1.15rem;
}

.team-payroll-editor-intro {
    display: grid;
    gap: 0.45rem;
}

.team-payroll-editor-intro h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.28rem, 1.45vw, 1.55rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.team-payroll-editor-intro p {
    margin: 0;
    color: #667085;
    font-size: 0.93rem;
    line-height: 1.5;
    max-width: 72ch;
}

.team-payroll-editor-intro a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.team-payroll-section {
    display: grid;
    gap: 0.85rem;
}

.team-payroll-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.12rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.team-payroll-section > p {
    margin: -0.2rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.45;
}

.team-payroll-form-grid {
    gap: 0.75rem 0.95rem;
    max-width: 780px;
}

.team-payroll-form-grid .form-group > span {
    display: inline-block;
    margin-bottom: 0.26rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
}

.team-payroll-form-grid label.form-group {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.team-payroll-form-grid label.form-group > span {
    display: inline-block;
    margin-bottom: 0.26rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.team-payroll-calendar-card {
    max-width: 780px;
    margin-top: 0.2rem;
    padding: 1.05rem 1.1rem;
    border: 1px solid #e3e6ee;
    border-radius: 10px;
    background: #fafbfc;
}

.team-payroll-calendar-card h4 {
    margin: 0;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
}

.team-payroll-calendar-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0 0 0 0.96rem;
    border-left: 2px solid #e6e9ef;
    display: grid;
    gap: 0.72rem;
}

.team-payroll-calendar-item {
    position: relative;
    padding-left: 0.7rem;
}

.team-payroll-calendar-item::before {
    content: '';
    position: absolute;
    left: -1.08rem;
    top: 0.34rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #b5bcc8;
}

.team-payroll-calendar-item strong {
    display: block;
    color: #111827;
    font-size: 0.87rem;
    font-weight: 800;
    line-height: 1.35;
}

.team-payroll-calendar-item span {
    display: block;
    margin-top: 0.1rem;
    color: #4b5563;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.45;
}

.team-payroll-editor-actions {
    margin-top: 0.15rem;
}

.team-commissions-list {
    gap: 1rem;
}

.team-commissions-card {
    max-width: 980px;
    padding: 1.25rem 1.35rem;
}

.team-commissions-form {
    display: grid;
    gap: 0.95rem;
}

.team-commissions-rows {
    display: grid;
    gap: 0.25rem;
}

.team-commissions-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.72rem 0;
}

.team-commissions-row + .team-commissions-row {
    border-top: 1px solid #e8ecf2;
}

.team-commissions-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    max-width: 72ch;
}

.team-commissions-copy strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
}

.team-commissions-copy small {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.44;
}

.team-commissions-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.team-commissions-note .material-symbols-outlined {
    margin-top: 0.08rem;
    color: #5f6b80;
    font-size: 1.05rem;
    line-height: 1;
}

.team-commissions-note-copy {
    display: grid;
    gap: 0.38rem;
}

.team-commissions-note-copy p {
    margin: 0;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.team-commissions-note-copy a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    color: #111827;
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.3;
}

.team-commissions-actions {
    margin-top: 0.15rem;
}

.team-pin-summary-list {
    gap: 1rem;
}

.team-pin-summary-card {
    max-width: 980px;
    padding: 1.2rem 1.35rem;
}

.team-pin-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.team-pin-summary-head-copy h2 {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #111827;
    font-size: 1.18rem;
    line-height: 1.2;
}

.team-pin-summary-head-copy p {
    margin: 0.32rem 0 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 68ch;
}

.team-pin-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid #e2e8f3;
    background: #f2f4f8;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.team-pin-status-badge.is-active {
    border-color: #b6e3bf;
    background: #e9f8ec;
    color: #15803d;
}

.team-pin-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
    flex-wrap: wrap;
}

.team-pin-summary-actions form {
    margin: 0;
}

.team-pin-danger-btn {
    color: #cf2548;
    border-color: #f2c0cc;
    background: #fff7f9;
}

.team-pin-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.6rem;
    margin-top: 0.35rem;
}

.team-pin-summary-grid .business-settings-summary-item {
    padding: 0.2rem 0;
    gap: 0.3rem;
}

.team-pin-inline-warning {
    margin-top: 1rem;
}

.team-pin-inline-warning-copy {
    margin-top: 0.55rem;
    line-height: 1.45;
}

.team-pin-inline-warning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.team-pin-inline-warning-actions form {
    margin: 0;
}

@media (max-width: 900px) {
    .team-pin-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.team-pin-wizard-card {
    width: 100%;
    max-width: 1120px;
    padding: 0.92rem 1.05rem 1rem;
    overflow: visible;
}

.team-pin-wizard-form {
    display: grid;
    gap: 1rem;
}

.team-pin-wizard-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
}

.team-pin-back {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid #d4dae6;
    background: #ffffff;
    color: #344054;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.team-pin-back .material-symbols-outlined {
    font-size: 1.3rem;
    line-height: 1;
}

.team-pin-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.48rem;
}

.team-pin-progress-step {
    height: 4px;
    border-radius: 999px;
    background: #e5e7ee;
}

.team-pin-progress-step.is-active {
    background: #6358e7;
}

.team-pin-top-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.56rem;
    flex-wrap: wrap;
}

.team-pin-wizard-body {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 0.72rem;
}

.team-pin-wizard-body > h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.16rem, 1.35vw, 1.42rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.team-pin-wizard-body > p {
    margin: -0.3rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.42;
}

.team-pin-wizard-section {
    display: grid;
    gap: 0.7rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.team-pin-wizard-section + .team-pin-wizard-section {
    margin-top: 0.9rem;
}

.team-pin-wizard-section h3 {
    margin: 0;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.18;
}


.team-pin-wizard-section > p {
    margin: -0.05rem 0 0;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.38;
    max-width: 78ch;
}

.team-pin-wizard-section .appointment-settings-checkbox-row {
    gap: 0.28rem 0.65rem;
}

.team-pin-wizard-section .appointment-settings-checkbox-copy strong {
    font-size: 0.82rem;
    line-height: 1.26;
}

.team-pin-wizard-section > p a {
    color: #6b5cff;
    text-decoration: none;
    font-weight: 700;
}

.team-pin-minutes-row {
    margin-left: 2.15rem;
    max-width: 520px;
    margin-top: 0.15rem;
}

.team-pin-minutes-row.is-disabled {
    opacity: 0.58;
}

.team-pin-minutes-row .form-group {
    margin: 0;
}

.team-pin-minutes-row select {
    width: 100%;
    min-height: 42px;
    padding: 0.64rem 0.85rem;
    background: #ffffff;
    font-size: 0.9rem;
    line-height: 1.32;
    color: #111827;
    -webkit-text-fill-color: currentColor;
    padding-right: 2.7rem;
}

.team-pin-minutes-row select option {
    color: #111827;
}


.team-pin-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    max-width: 760px;
}

.team-pin-style-actions {
    margin-top: 0.35rem;
}

.team-pin-members-header h2 {
    margin: 0;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    line-height: 1.15;
}

.team-pin-members-header p {
    margin: 0.3rem 0 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
}

.team-pin-members-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.85rem;
}

.team-pin-members-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #ffffff;
    border: 1px solid #d7dde8;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    min-width: 240px;
}

.team-pin-members-search input {
    border: 0;
    background: transparent;
    padding: 0.35rem 0.2rem;
    font-size: 0.88rem;
    width: 100%;
    outline: none;
}

.team-pin-members-search .material-symbols-outlined {
    font-size: 1.1rem;
    color: #667085;
}

.team-pin-members-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid #d7dde8;
    background: #ffffff;
    padding: 0.4rem 0.8rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #111827;
}

.team-pin-members-sort .material-symbols-outlined {
    font-size: 1.1rem;
}

.team-pin-members-table {
    margin-top: 0.9rem;
    border: 1px solid #e3e6ee;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.team-pin-members-table table {
    width: 100%;
    border-collapse: collapse;
}

.team-pin-members-table th,
.team-pin-members-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef1f6;
    font-size: 0.9rem;
}

.team-pin-members-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #667085;
}

.team-pin-member-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: #111827;
}

.team-pin-member-row input {
    width: 16px;
    height: 16px;
}

.team-pin-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0b5aa9;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 3px solid #e6f1ff;
}

.team-pin-member-name {
    font-weight: 700;
}

.team-pin-confirm {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-top: 0.4rem;
}

.team-pin-confirm-hero {
    width: 200px;
    height: 200px;
    border-radius: 32px;
    background: linear-gradient(150deg, #f2e7ff 0%, #e4ddff 45%, #cdd8ff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 30px rgba(80, 56, 142, 0.18);
}

.team-pin-confirm-hero .material-symbols-outlined {
    font-size: 4rem;
    color: #6c4ae7;
}

.team-pin-confirm-content h2 {
    margin: 0;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

.team-pin-confirm-content p {
    margin: 0.4rem 0 0.9rem;
    color: #667085;
    font-size: 0.92rem;
}

.team-pin-confirm-items {
    display: grid;
    gap: 0.8rem;
}

.team-pin-confirm-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.team-pin-confirm-item .material-symbols-outlined {
    font-size: 1.2rem;
    color: #111827;
    margin-top: 0.15rem;
}

.team-pin-confirm-item strong {
    display: block;
    font-size: 0.92rem;
    color: #111827;
}

.team-pin-confirm-item span {
    display: block;
    margin-top: 0.18rem;
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.4;
}

.team-pin-success {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    text-align: center;
    margin-top: 1rem;
}

.team-pin-success-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f6d9ff, #b44cff 70%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2.4rem;
}

@media (max-width: 900px) {
    .team-pin-members-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .team-pin-confirm {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .team-pin-confirm-content {
        text-align: center;
    }
}

.team-pin-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.98rem;
    border-radius: 999px;
    border: 1px solid rgba(205, 173, 119, 0.38);
    background: linear-gradient(135deg, rgba(255, 250, 242, 0.98), rgba(244, 235, 220, 0.98));
    color: #5a4022;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 20, 30, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.team-pin-preview-btn:hover,
.team-pin-preview-btn:focus-visible {
    border-color: rgba(102, 194, 188, 0.48);
    box-shadow: 0 14px 28px rgba(15, 20, 30, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.team-pin-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.2rem);
    background-color: #f4ede5;
    background-image: var(--team-pin-overlay-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 64% 12%;
    isolation: isolate;
    overflow: auto;
}

.team-pin-preview-modal.is-open {
    display: flex;
}

.app-pin-lock {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.2rem);
    background-color: #f4ede5;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.app-pin-lock.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.team-pin-preview-modal::before {
    content: none;
}

.app-pin-lock::before {
    content: '';
    position: absolute;
    inset: -4%;
    z-index: 0;
    background-image: var(--team-pin-overlay-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 64% 12%;
    transform: scale(1.06);
    animation: teamPinOverlayDrift 28s ease-in-out infinite alternate;
    will-change: transform;
    pointer-events: none;
}

.team-pin-preview-modal::after,
.app-pin-lock::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(45, 31, 19, 0.16) 0%, rgba(16, 12, 9, 0.42) 100%);
    backdrop-filter: blur(8px) saturate(86%);
    -webkit-backdrop-filter: blur(8px) saturate(86%);
    pointer-events: none;
}

.team-pin-preview-modal > *,
.app-pin-lock > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 760px), (orientation: portrait) {
    .team-pin-preview-modal,
    .app-pin-lock {
        background-position: 68% 8%;
    }

    .app-pin-lock::before {
        background-position: 68% 8%;
    }
}

@keyframes teamPinOverlayDrift {
    0% {
        transform: translate3d(-1.5%, -1%, 0) scale(1.06);
    }

    50% {
        transform: translate3d(1%, 1.2%, 0) scale(1.1);
    }

    100% {
        transform: translate3d(1.8%, -0.6%, 0) scale(1.07);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-pin-lock::before {
        animation: none;
        transform: scale(1.06);
    }
}

.app-pin-lock-inner {
    width: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
}

.app-pin-lock .team-pin-lockscreen {
    width: min(430px, 100%);
    height: auto;
    min-height: 0;
}

.app-pin-lock-note {
    margin: 0.05rem 0 0;
    max-width: 28ch;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--team-pin-note-color);
}

.app-pin-lock-status {
    margin: -0.1rem 0 0;
    min-height: 1.4em;
    max-width: 28ch;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--team-pin-subtitle-color);
}

.app-pin-lock-unlock {
    margin-top: 0.35rem;
    min-width: 170px;
    border-radius: 999px;
    border: 1px solid rgba(247, 222, 181, 0.4);
    background: linear-gradient(135deg, rgba(190, 146, 94, 0.96), rgba(111, 69, 36, 0.98));
    color: #fffaf3;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.58rem 1.18rem;
    box-shadow: 0 14px 30px rgba(10, 16, 24, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-pin-lock-unlock[disabled] {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: 0 10px 22px rgba(10, 16, 24, 0.16);
}

.app-pin-lock-unlock:hover,
.app-pin-lock-unlock:focus-visible {
    background: linear-gradient(135deg, rgba(209, 164, 110, 0.98), rgba(130, 83, 47, 0.98));
    box-shadow: 0 18px 34px rgba(10, 16, 24, 0.28);
    outline: none;
}

.app-pin-lock-unlock[disabled]:hover,
.app-pin-lock-unlock[disabled]:focus-visible {
    background: linear-gradient(135deg, rgba(190, 146, 94, 0.96), rgba(111, 69, 36, 0.98));
    transform: none;
    outline: none;
}

body.app-pin-locked {
    overflow: hidden;
}

.app-pin-warning {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 310;
    background: rgba(18, 24, 36, 0.92);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(9, 14, 22, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.app-pin-warning.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.team-pin-preview-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(247, 222, 181, 0.42);
    background: rgba(24, 28, 32, 0.32);
    color: #fffaf3;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 28px rgba(8, 14, 22, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.team-pin-preview-close:hover,
.team-pin-preview-close:focus-visible {
    border-color: rgba(255, 244, 226, 0.72);
    background: rgba(36, 41, 46, 0.46);
    box-shadow: 0 18px 34px rgba(8, 14, 22, 0.28);
    transform: scale(1.04);
    outline: none;
}

.team-pin-lockscreen {
    --team-pin-card-bg: linear-gradient(180deg, rgba(255, 250, 244, 0.82) 0%, rgba(215, 188, 157, 0.6) 52%, rgba(148, 109, 72, 0.56) 100%);
    --team-pin-border: rgba(255, 242, 219, 0.46);
    --team-pin-key-bg: linear-gradient(180deg, rgba(197, 151, 99, 0.96) 0%, rgba(120, 73, 38, 0.98) 100%);
    --team-pin-key-border: rgba(255, 239, 214, 0.34);
    --team-pin-logo-color: #8f5f2e;
    --team-pin-title-color: #4e2f18;
    --team-pin-subtitle-color: rgba(78, 47, 24, 0.8);
    --team-pin-note-color: rgba(63, 39, 21, 0.78);
    --team-pin-dots-bg: rgba(255, 255, 255, 0.28);
    --team-pin-dots-border: rgba(137, 94, 55, 0.18);
    --team-pin-logo-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
    --team-pin-title-shadow: 0 8px 24px rgba(255, 255, 255, 0.14);
    width: min(430px, calc(100% - 2rem));
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    position: relative;
    padding: clamp(1.5rem, 4vw, 2rem);
    border-radius: 32px;
    border: 1px solid var(--team-pin-border);
    background:
        radial-gradient(circle at 16% 18%, rgba(242, 214, 158, 0.28) 0%, transparent 34%),
        radial-gradient(circle at 84% 22%, rgba(62, 215, 208, 0.14) 0%, transparent 36%),
        linear-gradient(180deg, rgba(255, 251, 245, 0.42) 0%, rgba(72, 46, 23, 0.22) 100%),
        var(--team-pin-card-bg);
    background-repeat: no-repeat;
    background-position: center, center, center, center;
    background-size: auto, auto, cover, cover;
    box-shadow:
        0 28px 70px rgba(12, 18, 24, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    overflow: hidden;
}

.team-pin-lockscreen::before,
.team-pin-lockscreen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.team-pin-lockscreen::before {
    width: 220px;
    height: 220px;
    left: -84px;
    bottom: -110px;
    background: radial-gradient(circle, rgba(244, 217, 169, 0.16) 0%, transparent 68%);
}

.team-pin-lockscreen::after {
    width: 180px;
    height: 180px;
    top: -78px;
    right: -62px;
    background: radial-gradient(circle, rgba(83, 210, 203, 0.14) 0%, transparent 70%);
}

.team-pin-lockscreen.team-pin-style-preview-dark {
    --team-pin-card-bg: linear-gradient(180deg, rgba(71, 48, 26, 0.58) 0%, rgba(34, 22, 12, 0.78) 100%);
    --team-pin-border: rgba(248, 229, 199, 0.22);
    --team-pin-key-bg: linear-gradient(180deg, rgba(160, 112, 67, 0.95) 0%, rgba(92, 55, 26, 0.98) 100%);
    --team-pin-key-border: rgba(250, 232, 205, 0.18);
    --team-pin-logo-color: #f4d9a6;
    --team-pin-title-color: #fffaf3;
    --team-pin-subtitle-color: rgba(255, 248, 238, 0.74);
    --team-pin-note-color: rgba(255, 248, 238, 0.78);
    --team-pin-dots-bg: rgba(255, 255, 255, 0.06);
    --team-pin-dots-border: rgba(255, 255, 255, 0.08);
    --team-pin-logo-shadow: 0 12px 34px rgba(8, 14, 22, 0.32);
    --team-pin-title-shadow: 0 10px 28px rgba(8, 14, 22, 0.24);
}

.team-pin-lockscreen-content {
    position: relative;
    z-index: 1;
    width: min(100%, 310px);
    display: grid;
    gap: 0.78rem;
    justify-items: center;
    margin-top: 0;
}

.team-pin-lockscreen-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--team-pin-logo-color);
    opacity: 1;
    text-shadow: var(--team-pin-logo-shadow);
}

.team-pin-lockscreen-title {
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--team-pin-title-color);
    text-shadow: var(--team-pin-title-shadow);
}

.team-pin-lockscreen-subtitle {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--team-pin-subtitle-color);
}

.team-pin-lockscreen-dots {
    display: inline-flex;
    gap: 0.42rem;
    margin-top: 0.1rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--team-pin-dots-bg);
    border: 1px solid var(--team-pin-dots-border);
}

.team-pin-lockscreen-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 250, 243, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.team-pin-lockscreen-dots span.is-filled {
    background: linear-gradient(180deg, #f6e2b6 0%, #d5ae65 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 14px rgba(213, 174, 101, 0.28);
}

.team-pin-lockscreen-dots span.is-current {
    transform: scale(1.18);
}

.team-pin-lockscreen.is-error .app-pin-lock-status {
    color: #7a1d17;
}

.team-pin-lockscreen.team-pin-style-preview-dark.is-error .app-pin-lock-status {
    color: #ffd3c7;
}

.team-pin-lockscreen.is-error .team-pin-lockscreen-dots {
    border-color: rgba(180, 49, 35, 0.28);
}

.team-pin-lockscreen-pad {
    --team-pin-key-size: clamp(58px, 7vw, 64px);
    display: grid;
    grid-template-columns: repeat(3, var(--team-pin-key-size));
    justify-content: center;
    gap: 0.82rem 0.92rem;
    margin-top: 0.45rem;
}

.team-pin-lockscreen-pad-spacer {
    display: block;
}

.team-pin-lockscreen-pad button,
.team-pin-lockscreen-pad-spacer {
    width: var(--team-pin-key-size);
    height: var(--team-pin-key-size);
}

.team-pin-lockscreen-pad button {
    appearance: none;
    position: relative;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    min-width: var(--team-pin-key-size);
    min-height: var(--team-pin-key-size);
    flex: 0 0 auto;
    padding: 0;
    line-height: 1;
    border-radius: 999px;
    border: none;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 244, 225, 0.28) 0%, transparent 34%),
        linear-gradient(180deg, rgba(220, 177, 121, 0.98) 0%, rgba(146, 95, 50, 0.98) 52%, rgba(110, 67, 32, 1) 100%);
    background-clip: padding-box;
    color: #fffaf3;
    font-size: 1.12rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-shadow: 0 1px 1px rgba(60, 32, 12, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 224, 0.42),
        0 12px 24px rgba(66, 37, 14, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
    clip-path: circle(50% at 50% 50%);
}

.team-pin-lockscreen-pad button::before {
    content: none;
}

.team-pin-lockscreen-pad button:hover,
.team-pin-lockscreen-pad button:focus-visible {
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 248, 232, 0.34) 0%, transparent 36%),
        linear-gradient(180deg, rgba(229, 186, 128, 0.99) 0%, rgba(159, 104, 56, 0.99) 52%, rgba(119, 72, 35, 1) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 224, 0.62),
        0 16px 28px rgba(66, 37, 14, 0.3);
    transform: translateY(-2px) scale(1.02);
    outline: none;
}

.team-pin-lockscreen-pad button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 8px 18px rgba(66, 37, 14, 0.2);
}

.team-pin-lockscreen-pad button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
}

.team-pin-lockscreen-pad button.is-delete {
    font-size: 1.34rem;
    color: #fff3df;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 233, 211, 0.18) 0%, transparent 36%),
        linear-gradient(180deg, rgba(159, 103, 62, 0.98) 0%, rgba(111, 64, 32, 0.99) 52%, rgba(82, 43, 21, 1) 100%);
}

.team-pin-lockscreen-pad button.is-delete span {
    display: inline-block;
    transform: translateY(-1px) scale(1.06);
}

@media (min-width: 1500px) and (min-height: 860px) {
    .app-pin-lock .team-pin-lockscreen {
        width: min(392px, calc(100% - 2rem));
        padding: 1.35rem 1.45rem 1.5rem;
        border-radius: 28px;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-content {
        width: min(100%, 292px);
        gap: 0.66rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-logo {
        font-size: 2.08rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-title {
        font-size: 1.38rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-subtitle,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-status,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-note {
        font-size: 0.82rem;
        line-height: 1.36;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-dots {
        padding: 0.38rem 0.82rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad {
        --team-pin-key-size: 58px;
        gap: 0.76rem 0.84rem;
        margin-top: 0.28rem;
    }
}

@media (min-width: 1500px) and (max-height: 859px) {
    .app-pin-lock {
        padding: 0.8rem 1rem;
    }

    .app-pin-lock .team-pin-lockscreen {
        width: min(356px, calc(100% - 2rem));
        padding: 1rem 1.08rem 1.12rem;
        border-radius: 24px;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-content {
        width: min(100%, 268px);
        gap: 0.5rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-logo {
        font-size: 1.72rem;
        line-height: 1;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-title {
        font-size: 1.12rem;
        line-height: 1.1;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-subtitle,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-status,
    .app-pin-lock .team-pin-lockscreen .app-pin-lock-note {
        font-size: 0.75rem;
        line-height: 1.28;
        max-width: 26ch;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-dots {
        padding: 0.32rem 0.7rem;
        margin-top: 0;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad {
        --team-pin-key-size: 50px;
        gap: 0.62rem 0.72rem;
        margin-top: 0.18rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad button {
        font-size: 1rem;
    }

    .app-pin-lock .team-pin-lockscreen .team-pin-lockscreen-pad button.is-delete {
        font-size: 1.18rem;
    }
}

.team-pin-style-option {
    position: relative;
    border: 1px solid #dde2ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.5rem;
    display: grid;
    gap: 0.48rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.team-pin-style-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.team-pin-style-option:has(input:checked) {
    border-color: #c99a56;
    border-width: 2px;
    padding: calc(0.5rem - 1px);
    box-shadow: 0 0 0 1px rgba(201, 154, 86, 0.24), 0 14px 34px rgba(15, 20, 30, 0.12);
}

.team-pin-style-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.team-pin-style-preview::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(168px, 70%);
    height: min(148px, 76%);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background:
        radial-gradient(circle at 44% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 52% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 56% 26%, var(--team-pin-preview-dot) 0 2px, transparent 3px),
        radial-gradient(circle at 35% 52%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 65% 52%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 35% 64%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 64%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 65% 64%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 35% 76%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 76%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 65% 76%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.55) 0 2.6px, transparent 3.7px),
        linear-gradient(180deg, var(--team-pin-preview-glass), rgba(255, 255, 255, 0.06));
    box-shadow: 0 14px 32px rgba(15, 20, 30, 0.18);
    opacity: 0.92;
    pointer-events: none;
}

.team-pin-style-option input:checked + .team-pin-style-preview {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.team-pin-style-option:hover {
    transform: translateY(-1px);
    border-color: #c9d2e6;
    box-shadow: 0 12px 26px rgba(15, 20, 30, 0.08);
}

.team-pin-style-option:has(input:checked):hover {
    border-color: #c99a56;
    box-shadow: 0 0 0 1px rgba(201, 154, 86, 0.24), 0 16px 36px rgba(15, 20, 30, 0.14);
}

.team-pin-style-preview-light {
    --team-pin-preview-glass: rgba(255, 248, 238, 0.16);
    --team-pin-preview-dot: rgba(244, 223, 182, 0.88);
    background:
        radial-gradient(circle at 15% 20%, rgba(250, 231, 198, 0.86) 0%, rgba(250, 231, 198, 0.1) 42%, transparent 60%),
        radial-gradient(circle at 28% 82%, rgba(205, 164, 103, 0.6) 0%, rgba(205, 164, 103, 0.06) 40%, transparent 65%),
        radial-gradient(circle at 84% 18%, rgba(82, 210, 202, 0.76) 0%, rgba(82, 210, 202, 0.08) 44%, transparent 70%),
        linear-gradient(145deg, #8a6843, #22414b);
}

.team-pin-style-preview-dark {
    --team-pin-preview-glass: rgba(255, 255, 255, 0.1);
    --team-pin-preview-dot: rgba(244, 223, 182, 0.76);
    background:
        radial-gradient(circle at 18% 18%, rgba(244, 214, 152, 0.34) 0%, rgba(244, 214, 152, 0.06) 36%, transparent 62%),
        radial-gradient(circle at 82% 22%, rgba(69, 203, 196, 0.34) 0%, rgba(69, 203, 196, 0.08) 38%, transparent 66%),
        radial-gradient(circle at 24% 82%, rgba(112, 78, 48, 0.36) 0%, rgba(112, 78, 48, 0.06) 42%, transparent 66%),
        linear-gradient(145deg, #231d1b, #0f2731);
}

.team-pin-style-label {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.team-pin-wizard-section-preview {
    margin-top: 0.15rem;
}

.team-pin-inline-preview {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.15rem;
}

.team-pin-inline-preview-frame {
    padding: 0.95rem;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 18px 42px rgba(15, 20, 30, 0.08);
}

.team-pin-preview-screen.team-pin-style-preview {
    width: min(100%, 290px);
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 22px 44px rgba(15, 20, 30, 0.2);
}

.team-pin-preview-screen.team-pin-style-preview::after {
    width: min(200px, 76%);
    height: min(180px, 60%);
    border-radius: 22px;
}

.team-pin-preview-caption {
    margin: 0;
    text-align: center;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.45;
}

.team-pin-empty-state {
    margin: 0;
    padding: 0.95rem 1rem;
    border: 1px dashed #d7ddea;
    border-radius: 12px;
    background: #fafbfc;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.45;
}

.team-pin-members-header {
    display: grid;
    gap: 0.35rem;
}

.team-pin-members-header h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.18rem, 1.45vw, 1.42rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
}

.team-pin-members-header p {
    margin: 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.42;
    max-width: 72ch;
}

.team-pin-members-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.team-pin-members-search {
    min-width: min(360px, 100%);
    max-width: 445px;
    flex: 1 1 320px;
    border-radius: 999px;
    border: 1px solid #cfd6e2;
    background: #ffffff;
    padding: 0.45rem 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.team-pin-members-search:focus-within {
    border-color: #b9c4d7;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.08);
}

.team-pin-members-search input {
    border: 0;
    background: transparent;
    padding: 0.2rem 0.1rem;
    box-shadow: none;
    outline: none;
    color: #111827;
    font-size: 0.88rem;
    line-height: 1.2;
}

.team-pin-members-search input::placeholder {
    color: #8a97ac;
}

.team-pin-members-search .material-symbols-outlined {
    font-size: 1.08rem;
    color: #7b8aa1;
}

.team-pin-members-sort-menu {
    position: relative;
    flex: 0 0 auto;
}

.team-pin-members-sort-menu[open] {
    z-index: 20;
}

.team-pin-members-sort-menu > summary {
    list-style: none;
}

.team-pin-members-sort-menu > summary::-webkit-details-marker {
    display: none;
}

.team-pin-members-sort {
    border-radius: 999px;
    border: 1px solid #cfd6e2;
    background: #ffffff;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.48rem 0.95rem;
    min-height: 40px;
    min-width: 278px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
}

.team-pin-members-sort:hover,
.team-pin-members-sort:focus-visible {
    border-color: #b9c5db;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
    outline: none;
}

.team-pin-members-sort-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 214px;
    padding: 0.35rem 0;
    border: 1px solid #d7dde8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.14);
}

.team-pin-members-sort-option {
    width: 100%;
    min-height: 0 !important;
    padding: 0.8rem 1rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.87rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    box-shadow: none !important;
}

.team-pin-members-sort-option:hover,
.team-pin-members-sort-option:focus-visible {
    background: #f5f7fb !important;
    outline: none;
}

.team-pin-members-sort-option.is-selected {
    color: #111827 !important;
    font-weight: 700;
}

.team-pin-members-table-wrap {
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    background: #ffffff;
    overflow-x: auto;
    box-shadow: none;
}

.team-pin-members-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.team-pin-members-table th,
.team-pin-members-table td {
    border-bottom: 1px solid #e8ecf2;
    padding: 0.9rem 0.95rem;
    text-align: left;
    vertical-align: middle;
}

.team-pin-members-table tbody tr:last-child td {
    border-bottom: 0;
}

.team-pin-members-table th {
    background: #eff3f7;
    color: #101828;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.team-pin-members-table td {
    color: #111827;
    font-size: 0.96rem;
    line-height: 1.38;
}

.team-pin-members-table tbody tr {
    transition: background-color 0.18s ease;
}

.team-pin-members-table tbody tr:hover {
    background: #fbfcfe;
}

.team-pin-members-table th:first-child,
.team-pin-members-table td:first-child {
    width: 38px;
    max-width: 38px;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    text-align: center;
}

button.team-pin-check-all {
    -webkit-appearance: none;
    appearance: none;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 auto;
    border: 1px solid #60a5fa !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

button.team-pin-check-all:hover,
button.team-pin-check-all:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
    outline: none;
}

button.team-pin-check-all.is-active {
    border-color: #1976d2;
    background: #1976d2;
}

.team-pin-members-table th:nth-child(2),
.team-pin-members-table td:nth-child(2) {
    width: 40%;
}

.team-pin-members-table th:nth-child(3),
.team-pin-members-table td:nth-child(3) {
    width: 36%;
}

.team-pin-members-table th:nth-child(4),
.team-pin-members-table td:nth-child(4) {
    white-space: nowrap;
}

.team-pin-members-table td:last-child {
    color: #344054;
    font-weight: 600;
    font-size: 0.93rem;
}

.team-pin-check-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 auto;
}

.team-pin-check-wrap input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.team-pin-check-ui {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #7cb6ee;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-pin-check-wrap input:checked + .team-pin-check-ui {
    border-color: #1976d2;
    background: #1976d2;
}

.team-pin-check-wrap input:checked + .team-pin-check-ui::after {
    content: '';
    width: 4px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg) translate(-1px, -1px);
}

.team-pin-member-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
}

.team-pin-member-identity img,
.team-pin-member-avatar-fallback {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    flex-shrink: 0;
}

.team-pin-member-identity img {
    object-fit: cover;
    border: 3px solid #cbe8ff;
    box-shadow: 0 0 0 1px #82c7f5;
}

.team-pin-member-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #cbe8ff;
    background: #0d62af;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.team-pin-member-identity strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.team-pin-member-contact {
    display: grid;
    gap: 0.12rem;
}

.team-pin-member-contact span {
    color: #111827;
    font-size: 0.92rem;
    line-height: 1.35;
}

.team-pin-confirm {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    min-height: 360px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 1.35rem;
}

.team-pin-confirm-shield {
    width: 170px;
    height: 200px;
    border-radius: 90px 90px 70px 70px;
    background: linear-gradient(165deg, #d5d2ff 0%, #e6ccf4 46%, #d6b1f1 100%);
    color: #f5f3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-pin-confirm-shield .material-symbols-outlined {
    font-size: 5.2rem;
    line-height: 1;
}

.team-pin-confirm-copy h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.82rem, 2.4vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.team-pin-confirm-copy p {
    margin: 0.6rem 0 0;
    color: #667085;
    font-size: 0.97rem;
    line-height: 1.5;
}

.team-pin-confirm-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.team-pin-confirm-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.7rem;
}

.team-pin-confirm-list li .material-symbols-outlined {
    color: #1f2937;
    font-size: 1.18rem;
    line-height: 1;
    margin-top: 0.12rem;
}

.team-pin-confirm-list li strong {
    display: block;
    color: #111827;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.35;
}

.team-pin-confirm-list li span {
    display: block;
    margin-top: 0.16rem;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.45;
}

.team-pin-success-card {
    max-width: 760px;
    min-height: 430px;
    margin: 0 auto;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.team-pin-success-icon {
    width: 152px;
    height: 152px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 25%, rgba(243, 240, 255, 0.84) 0%, rgba(243, 240, 255, 0.04) 45%, transparent 58%),
        radial-gradient(circle at 65% 70%, rgba(190, 20, 240, 0.7) 0%, rgba(190, 20, 240, 0.08) 48%, transparent 66%),
        linear-gradient(145deg, #6358e7, #db18ff);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-pin-success-icon .material-symbols-outlined {
    font-size: 3.3rem;
    line-height: 1;
}

.team-pin-success-card h2 {
    margin: 0;
    color: #101828;
    font-size: clamp(1.55rem, 1.9vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.team-settings-shell .team-timeoff-list {
    width: 100%;
    max-width: none;
}

.team-permissions-matrix-wrap {
    display: grid;
    gap: 0.9rem;
}

.team-permissions-note {
    display: flex;
    align-items: flex-start;
    gap: 0.64rem;
    padding: 0.88rem 1rem;
    background: #ffffff;
}

.team-permissions-note .material-symbols-outlined {
    color: #667085;
    font-size: 1.05rem;
    line-height: 1;
    margin-top: 0.04rem;
}

.team-permissions-note p {
    margin: 0;
    color: #344054;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.44;
}

.team-permissions-matrix-card {
    padding: 1rem 1.1rem;
    background: #ffffff;
}

.team-permissions-matrix-form {
    display: grid;
    gap: 0.82rem;
}

.team-permissions-matrix-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.team-permissions-matrix-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.24;
}

.team-permissions-matrix-foot {
    display: flex;
    justify-content: flex-end;
}

.team-permissions-matrix-table-wrap {
    border: 1px solid #dce2ec;
    border-radius: 12px;
    background: #ffffff;
    overflow-x: auto;
}

.team-permissions-matrix-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.team-permissions-matrix-table th,
.team-permissions-matrix-table td {
    border-bottom: 1px solid #e8ecf2;
    padding: 0.62rem 0.72rem;
    background: #ffffff;
}

.team-permissions-matrix-table th {
    letter-spacing: normal;
}

.team-permissions-matrix-table tbody tr:last-child th,
.team-permissions-matrix-table tbody tr:last-child td {
    border-bottom: 0;
}

.team-permissions-matrix-group-row th {
    background: #f8f9fc;
    color: #475467;
    border-bottom-color: #dfe5ee;
}

.team-permissions-matrix-group-row th:first-child {
    text-align: left;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.team-permissions-matrix-group-row th:not(:first-child) {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.team-permissions-matrix-table th[scope='row'] {
    color: #101828;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    width: 34%;
    text-transform: none;
    letter-spacing: normal;
}

.team-permissions-matrix-table th[scope='row']::first-letter {
    text-transform: uppercase;
}

.team-permissions-matrix-table td {
    text-align: center;
    vertical-align: middle;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row th,
.team-permissions-matrix-table tr.team-permissions-matrix-data-row td {
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover th,
.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover td {
    background: #edf3ff;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover th[scope='row'] {
    color: #0f2847;
    box-shadow: inset 3px 0 0 #8bb4ff;
}

.team-permissions-matrix-table tr.team-permissions-matrix-data-row:hover .team-permissions-matrix-checkmark {
    border-color: #a8b7d1;
}

.team-permissions-matrix-table
    tr.team-permissions-matrix-data-row:hover
    .team-permissions-matrix-cell.is-disabled
    .team-permissions-matrix-checkmark {
    border-color: #d3d9e4;
    background: #f4f6fa;
}

.team-permissions-matrix-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.team-permissions-matrix-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.team-permissions-matrix-checkmark {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #c8cfdb;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.team-permissions-matrix-check:checked + .team-permissions-matrix-checkmark {
    border-color: #6358e7;
    background: #6358e7;
}

.team-permissions-matrix-check:checked + .team-permissions-matrix-checkmark::after {
    content: '';
    width: 4px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg) translate(-1px, -1px);
}

.team-permissions-matrix-check:focus-visible + .team-permissions-matrix-checkmark {
    box-shadow: 0 0 0 2px rgba(99, 88, 231, 0.2);
}

.team-permissions-matrix-cell.is-disabled .team-permissions-matrix-checkmark,
.team-permissions-matrix-check:disabled + .team-permissions-matrix-checkmark {
    border-color: #d7dde8;
    background: #f2f4f8;
    cursor: not-allowed;
}

.team-permissions-matrix-check:checked:disabled + .team-permissions-matrix-checkmark {
    border-color: #c7ccdf;
    background: #d7d9e8;
}

.team-permissions-matrix-check:disabled {
    opacity: 1;
}

/* Restored preview submenu + appointment payment/status icon styles */
.admin-nav > a.is-preview-active,
.admin-nav-group > summary.is-preview-active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(186, 201, 220, 0.32);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(10, 18, 30, 0.24);
}

.admin-body.admin-page-dashboard-pro .admin-nav > a.is-preview-active,
.admin-body.admin-page-dashboard-pro .admin-nav-group > summary.is-preview-active {
    background: #171b29;
    border-color: rgba(181, 193, 215, 0.32);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 22px rgba(4, 8, 14, 0.42);
}

.admin-sidebar-panels {
    position: relative;
    z-index: 22;
}

.admin-sidebar-panel {
    position: fixed !important;
    top: 68px !important;
    left: 78px !important;
    bottom: 0 !important;
    width: 210px;
    height: calc(100vh - 68px) !important;
    max-height: calc(100vh - 68px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: none !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 16px 0 30px rgba(15, 28, 43, 0.08) !important;
    overflow: hidden auto !important;
    background: #ffffff !important;
    color: #0f172a !important;
    z-index: 28;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.admin-sidebar-panel.is-visible {
    display: flex !important;
    flex-direction: column !important;
}

.admin-sidebar-panel[aria-hidden='true'] {
    pointer-events: none;
}

.admin-sidebar-panel[aria-hidden='false'] {
    pointer-events: auto;
}

.admin-sidebar-panel.admin-sidebar-subpanel,
.admin-sidebar-panel.admin-module-side,
.admin-sidebar-panel.admin-web-editor-side {
    display: none !important;
    flex-direction: column;
    background: #ffffff !important;
}

.admin-sidebar-panel.admin-sidebar-subpanel.is-visible,
.admin-sidebar-panel.admin-module-side.is-visible,
.admin-sidebar-panel.admin-web-editor-side.is-visible {
    display: flex !important;
}

.admin-sidebar-panel .admin-sidebar-subpanel-head,
.admin-sidebar-panel .admin-sidebar-subpanel-nav,
.admin-sidebar-panel .admin-module-side-head,
.admin-sidebar-panel .admin-module-side-nav,
.admin-sidebar-panel .admin-web-editor-side-head,
.admin-sidebar-panel .admin-web-editor-nav {
    background: #ffffff !important;
}

.admin-sidebar-panel .admin-sidebar-subpanel-head,
.admin-sidebar-panel .admin-module-side-head,
.admin-sidebar-panel .admin-web-editor-side-head {
    min-height: 60px;
    padding: 0 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.admin-sidebar-panel .admin-sidebar-subpanel-head h2,
.admin-sidebar-panel .admin-module-side-head h2,
.admin-sidebar-panel .admin-web-editor-side-head h2 {
    margin: 0;
    color: #0f172a !important;
    font-size: 1.03rem;
    font-weight: 900;
    line-height: 1.25;
    opacity: 1 !important;
}

.admin-sidebar-panel .admin-sidebar-subpanel-nav,
.admin-sidebar-panel .admin-module-side-nav,
.admin-sidebar-panel .admin-web-editor-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch;
    align-content: flex-start;
    flex: 1 1 auto !important;
    min-height: 0;
    gap: 0.2rem;
    padding: 0.48rem 0.48rem 0.9rem;
    overflow-y: auto;
}

.admin-sidebar-panel .admin-sidebar-subpanel-nav a,
.admin-sidebar-panel .admin-module-side-nav a,
.admin-sidebar-panel .admin-web-editor-nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    padding: 0.62rem 0.72rem;
    border: 1px solid transparent;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 10px;
    color: #0f172a !important;
    opacity: 1 !important;
    text-decoration: none;
    background: transparent;
}

.admin-sidebar-panel .admin-sidebar-subpanel-nav a:hover,
.admin-sidebar-panel .admin-module-side-nav a:hover,
.admin-sidebar-panel .admin-web-editor-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6f0;
    color: #0f172a !important;
}

.admin-sidebar-panel .admin-sidebar-subpanel-nav a.is-active,
.admin-sidebar-panel .admin-module-side-nav a.is-active,
.admin-sidebar-panel .admin-web-editor-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
    color: #1b2230 !important;
    opacity: 1 !important;
}

.admin-sidebar-panel .admin-sidebar-subpanel-section,
.admin-sidebar-panel .admin-module-side-section {
    margin: 0.7rem 0.58rem 0.2rem;
    color: #334155 !important;
    font-size: 0.75rem;
    font-weight: 800;
    opacity: 1 !important;
}

.admin-sidebar-panel .admin-sidebar-subpanel-divider,
.admin-sidebar-panel .admin-module-side-divider {
    margin: 0.45rem 0.5rem;
}

@media (max-width: 900px) {
    .admin-sidebar-panel {
        display: none !important;
    }
}

.appointments-calendar-event-status-icon {
    font-variation-settings: 'FILL' 1, 'wght' 560, 'GRAD' 0, 'opsz' 20;
    border-radius: 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34), transparent 44%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--appointment-status-color, #5f56ff) 88%, #ffffff 12%) 0%,
            color-mix(in srgb, var(--appointment-status-color, #5f56ff) 68%, #0f172a 32%) 100%);
    box-shadow:
        0 8px 16px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}

.appointments-calendar-event-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 20px;
    color: #666;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    transition: none;
}

.appointments-calendar-event.has-payment-ribbon:not([data-appointment-type="group"]) > .appointments-calendar-event-status-icon {
    top: 0.22rem !important;
    left: 0.24rem !important;
    right: auto !important;
    width: 1rem !important;
    height: 1rem !important;
    font-size: 0.72rem !important;
    transform: none !important;
}

.appointments-calendar-event.is-compact.has-payment-ribbon:not([data-appointment-type="group"]) > .appointments-calendar-event-status-icon {
    top: 0.2rem !important;
    left: 0.2rem !important;
    right: auto !important;
    width: 0.9rem !important;
    height: 0.9rem !important;
    font-size: 0.64rem !important;
    transform: none !important;
}

.appointments-calendar-event-payment-ribbon[data-state='paid'] {
    --appointments-payment-ribbon-start: #22c55e;
    --appointments-payment-ribbon-end: #15803d;
}

.appointments-calendar-event-payment-ribbon[data-state='partial'] {
    --appointments-payment-ribbon-start: #3b82f6;
    --appointments-payment-ribbon-end: #1d4ed8;
}

.sales-settings-shell .business-settings-form-actions {
    justify-content: flex-end;
}

.sales-payment-list {
    display: grid;
    gap: 0.8rem;
}

.sales-payment-card {
    padding: 1rem 1.2rem;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.sales-settings-shell .sales-payment-card {
    overflow: visible;
}

.sales-payment-main {
    display: flex;
    align-items: center;
    gap: 0.76rem;
    min-width: 0;
}

.sales-payment-icon {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    border: 1px solid #eceff5;
    background: #f6f8fc;
    color: #4f5d72;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-payment-icon[data-tone="cash"] {
    border-color: #dcefdc;
    background: #eff9ef;
    color: #2f9838;
}

.sales-payment-icon[data-tone="other"] {
    border-color: #dcd9fb;
    background: #f3f1ff;
    color: #5f56d8;
}

.sales-payment-icon .material-symbols-outlined {
    font-size: 1.65rem;
    line-height: 1;
}

.sales-payment-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.02rem;
    line-height: 1.2;
}

.sales-payment-lock {
    color: #a5adbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-payment-lock .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.sales-payment-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.sales-payment-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.sales-payment-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.sales-tax-empty-card {
    min-height: 470px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.85rem;
    padding: 2rem 1rem;
}

.sales-tax-empty-icon {
    position: relative;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-tax-empty-square {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(160deg, #4f46e5, #8b5cf6 58%, #d946ef);
}

.sales-tax-empty-circle {
    position: absolute;
    right: 2px;
    top: 6px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, #f2f2ff 0%, #d8cef9 42%, #c7bbea 100%);
    color: #f7f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-tax-empty-circle .material-symbols-outlined {
    font-size: 1.7rem;
    line-height: 1;
}

.sales-tax-empty-card h3 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sales-tax-empty-card p {
    max-width: 620px;
    margin: 0;
    color: #667085;
    font-size: 0.93rem;
    line-height: 1.5;
}

.sales-tax-list {
    display: grid;
    gap: 0.8rem;
}

.sales-tax-card {
    padding: 1rem 1.2rem;
    min-height: 102px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.sales-settings-shell .sales-tax-card {
    overflow: visible;
}

.sales-tax-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sales-tax-icon {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    border: 1px solid #eceff5;
    background: #f5f7fb;
    color: #1f2633;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-tax-icon .material-symbols-outlined {
    font-size: 1.7rem;
    line-height: 1;
}

.sales-tax-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.sales-tax-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.sales-tax-copy p {
    margin: 0;
    color: #667085;
    font-size: 1.04rem;
    font-weight: 500;
    line-height: 1.35;
}

.sales-tax-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.sales-tax-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.sales-tax-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.sales-tips-card {
    max-width: 960px;
}

.sales-tips-card-head {
    margin-bottom: 0.8rem;
}

.sales-tips-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sales-tips-toggle-copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.sales-tips-toggle-copy strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
}

.sales-tips-toggle-copy a {
    color: #6b5cff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-switch {
    position: relative;
    width: 48px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-tips-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.sales-tips-switch-pill {
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d5d8e2;
    background: #eef1f6;
    transition: all 0.2s ease;
}

.sales-tips-switch-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 22, 33, 0.2);
    transition: transform 0.2s ease;
}

.sales-tips-switch input:checked + .sales-tips-switch-pill {
    border-color: #6b5cff;
    background: #6b5cff;
}

.sales-tips-switch input:checked + .sales-tips-switch-pill::after {
    transform: translateX(20px);
}

.sales-tips-divider {
    height: 1px;
    background: #e6e8ef;
    margin: 1rem 0;
}

.sales-tips-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sales-tips-summary-row + .sales-tips-summary-row {
    margin-top: 0.8rem;
}

.sales-tips-summary-row h3 {
    margin: 0;
    color: #111827;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
}

.sales-tips-summary-row p {
    margin: 0.14rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.45;
}

.sales-tips-advanced-link {
    color: #6b5cff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-editor-card {
    max-width: 960px;
}

.sales-tips-editor-head {
    margin-bottom: 0.9rem;
}

.sales-tips-editor-copy {
    margin: 0.34rem 0 0;
    color: #667085;
    font-size: 0.91rem;
    line-height: 1.5;
}

.sales-tips-values-wrap {
    display: grid;
    gap: 0.72rem;
}

.sales-tips-values-label {
    margin: 0;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-values-list {
    display: grid;
    gap: 0.66rem;
}

.sales-tips-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}

.sales-tips-value-input {
    position: relative;
    margin: 0;
}

.sales-tips-value-input input[type='number'] {
    width: 100%;
    min-height: 42px;
    padding-right: 2.2rem;
}

.sales-tips-value-input span {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.sales-tips-value-remove {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f6673;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sales-tips-value-remove:hover {
    background: #f2f4f8;
}

.sales-tips-value-remove .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.sales-tips-add-value {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    justify-self: flex-start;
    min-height: 38px;
    padding-inline: 0.95rem;
}

.sales-tips-add-value .material-symbols-outlined {
    font-size: 1.02rem;
    line-height: 1;
}

.sales-tips-calc-form {
    display: grid;
    gap: 1rem;
}

.sales-tips-calc-block {
    display: grid;
    gap: 0.7rem;
}

.sales-tips-calc-block h3 {
    margin: 0;
    color: #111827;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-tips-calc-block > p {
    margin: -0.1rem 0 0;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.sales-tips-check-list {
    display: grid;
    gap: 0.5rem;
}

.sales-tips-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.42rem 0.72rem;
    align-items: start;
}

.sales-tips-check-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.06rem;
    accent-color: #6b5cff;
}

.sales-tips-check-item span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-tips-calc-selects {
    display: grid;
    gap: 0.8rem;
}

.sales-tips-help {
    display: block;
    margin-top: 0.32rem;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.sales-service-charge-empty {
    min-height: 420px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.82rem;
    padding: 2rem 1rem;
}

.sales-service-charge-empty-icon {
    position: relative;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-service-charge-empty-square {
    position: absolute;
    left: 9px;
    bottom: 8px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(160deg, #4f46e5, #8b5cf6 58%, #d946ef);
}

.sales-service-charge-empty-circle {
    position: absolute;
    right: 1px;
    top: 5px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, #f2f2ff 0%, #d8cef9 42%, #c7bbea 100%);
    color: #f7f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-service-charge-empty-circle .material-symbols-outlined {
    font-size: 1.42rem;
    line-height: 1;
}

.sales-service-charge-empty h3 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sales-service-charge-empty p {
    max-width: 650px;
    margin: 0;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.5;
}

.sales-service-charge-list {
    display: grid;
    gap: 0.82rem;
}

.sales-service-charge-card {
    padding: 1rem 1.2rem;
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.sales-settings-shell .sales-service-charge-card {
    overflow: visible;
}

.sales-service-charge-main {
    display: flex;
    align-items: center;
    gap: 0.78rem;
    min-width: 0;
}

.sales-service-charge-icon {
    width: 62px;
    height: 62px;
    border-radius: 11px;
    border: 1px solid #eceff5;
    background: #f6f8fc;
    color: #5a6478;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-service-charge-icon .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.sales-service-charge-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.sales-service-charge-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.2;
}

.sales-service-charge-copy p {
    margin: 0;
    color: #667085;
    font-size: 0.87rem;
    line-height: 1.4;
}

.sales-service-charge-description {
    margin-top: 0.08rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sales-service-charge-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.sales-service-charge-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.sales-service-charge-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.sales-service-charge-editor-card {
    max-width: 980px;
    background: #ffffff;
}

.sales-service-charge-form {
    display: grid;
    gap: 1rem;
}

.sales-service-charge-section {
    display: grid;
    gap: 0.72rem;
}

.sales-service-charge-section + .sales-service-charge-section {
    border-top: 1px solid #e6e8ef;
    padding-top: 1.04rem;
    margin-top: 0.14rem;
}

.sales-service-charge-section h3 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-service-charge-section > p {
    margin: -0.18rem 0 0;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sales-service-charge-section textarea {
    min-height: 110px;
    resize: vertical;
}

.sales-service-charge-radio-group {
    display: grid;
    gap: 0.52rem;
}

.sales-service-charge-radio {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.74rem;
    align-items: start;
}

.sales-service-charge-radio input[type='radio'] {
    width: 18px;
    height: 18px;
    margin-top: 0.06rem;
    accent-color: #6b5cff;
}

.sales-service-charge-radio span {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-service-charge-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.74rem;
    align-items: start;
}

.sales-service-charge-check-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.06rem;
    accent-color: #6b5cff;
}

.sales-service-charge-check-item span {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-service-charge-target-types {
    display: grid;
    gap: 0.46rem;
    margin-top: -0.08rem;
    padding-left: 1.7rem;
}

.sales-service-charge-target-types[hidden] {
    display: none !important;
}

.sales-service-charge-check-item-child span {
    font-size: 0.99rem;
}

.sales-service-charge-price-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.82rem;
}

.sales-service-charge-price-row {
    display: grid;
    gap: 0.32rem;
    margin: 0;
}

.sales-service-charge-price-row > span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-service-charge-money-field,
.sales-service-charge-percent-field {
    display: flex;
    align-items: center;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.sales-service-charge-money-field > span,
.sales-service-charge-percent-field > span {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 0.88rem;
    flex: 0 0 auto;
    pointer-events: none;
    white-space: nowrap;
}

.sales-service-charge-money-field > span {
    border-right: 1px solid #e2e8f0;
}

.sales-service-charge-money-field input[type='number'] {
    width: 100%;
    min-height: 42px;
    border: 0 !important;
    border-radius: 0;
    padding: 0.78rem 0.9rem;
    box-shadow: none !important;
    background: transparent;
    outline: 0;
    flex: 1 1 auto;
}

.sales-service-charge-percent-field > span {
    border-left: 1px solid #e2e8f0;
}

.sales-service-charge-percent-field input[type='number'] {
    width: 100%;
    min-height: 42px;
    border: 0 !important;
    border-radius: 0;
    padding: 0.78rem 0.9rem;
    box-shadow: none !important;
    background: transparent;
    outline: 0;
    flex: 1 1 auto;
}

.sales-service-charge-money-field:focus-within,
.sales-service-charge-percent-field:focus-within {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 0 0 3px rgba(120, 113, 255, 0.08);
}

.sales-gift-summary-card {
    min-height: 420px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.84rem;
    padding: 2rem 1rem;
}

.sales-gift-summary-icon {
    position: relative;
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-gift-summary-square {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(160deg, #4f46e5, #8b5cf6 58%, #d946ef);
}

.sales-gift-summary-circle {
    position: absolute;
    right: 1px;
    top: 5px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, #f2f2ff 0%, #d8cef9 42%, #c7bbea 100%);
    color: #f7f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-gift-summary-circle .material-symbols-outlined {
    font-size: 1.6rem;
    line-height: 1;
}

.sales-gift-summary-card h2 {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sales-gift-summary-card p {
    max-width: 640px;
    margin: 0;
    color: #667085;
    font-size: 0.93rem;
    line-height: 1.52;
}

.sales-gift-config-btn.clients-hub-book-btn {
    margin-top: 0.2rem;
    min-width: 106px;
}

.sales-gift-editor-card {
    max-width: 980px;
}

.sales-gift-editor-form {
    display: grid;
    gap: 1rem;
}

.sales-gift-editor-head {
    margin-bottom: 0.2rem;
}

.sales-gift-config-section {
    display: grid;
    gap: 0.7rem;
}

.sales-gift-config-status {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.sales-gift-config-status-copy {
    min-width: 0;
}

.sales-gift-config-status-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.sales-gift-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #d4d9e4;
    background: #f4f6fa;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.sales-gift-status-pill.is-active {
    border-color: #ccecd5;
    background: #e9f8ee;
    color: #1f7a38;
}

.sales-gift-config-status-copy p {
    margin: 0.32rem 0 0;
    color: #667085;
    font-size: 0.95rem;
    line-height: 1.45;
}

.sales-gift-toggle {
    margin-top: 0.2rem;
}

.sales-service-charge-section-divider {
    height: 1px;
    background: #e6e8ef;
}

.sales-gift-config-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.sales-gift-config-section > p {
    margin: -0.2rem 0 0;
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.5;
    max-width: 720px;
}

.sales-gift-values-list {
    display: grid;
    gap: 0.7rem;
}

.sales-gift-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.sales-gift-money-field {
    width: 100%;
}

.sales-gift-value-remove {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f6673;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sales-gift-value-remove:hover {
    background: #f2f4f8;
}

.sales-gift-value-remove .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.sales-gift-add-value {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    justify-self: flex-start;
    min-height: 38px;
    padding-inline: 0.95rem;
}

.sales-gift-add-value .material-symbols-outlined {
    font-size: 1.02rem;
    line-height: 1;
}

.sales-gift-expiry-field {
    max-width: 560px;
}

.sales-receipt-stack {
    display: grid;
    gap: 0.9rem;
}

.sales-receipt-card .business-settings-card-head {
    margin-bottom: 1.35rem;
}

.sales-receipt-card .business-settings-card-head > div {
    min-width: 0;
}

.sales-receipt-card-copy,
.sales-receipt-form-note {
    margin: 0.36rem 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.45;
}

.sales-receipt-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

.sales-receipt-summary-item {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.sales-receipt-summary-item span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-receipt-summary-item strong {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sales-receipt-summary-item a {
    color: #6b5cff;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
}

.sales-receipt-design-form {
    display: grid;
    gap: 1rem;
}

.sales-receipt-check-stack {
    display: grid;
    gap: 0.58rem;
}

.sales-receipt-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.42rem 0.72rem;
}

.sales-receipt-check-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.08rem;
    accent-color: #6b5cff;
}

.sales-receipt-check-item span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-receipt-fields {
    display: grid;
    gap: 0.92rem;
}

.sales-receipt-field {
    display: grid;
    gap: 0.32rem;
}

.sales-receipt-field-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem;
}

.sales-receipt-field-head > span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.sales-receipt-field-head small {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.sales-receipt-field input[type='text'] {
    min-height: 44px;
}

.sales-receipt-auto-print {
    margin-top: 1.1rem;
    padding-top: 0.95rem;
    border-top: 1px solid #e6e8ef;
}

.sales-receipt-auto-print-label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.42rem 0.72rem;
}

.sales-receipt-auto-print-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    accent-color: #6b5cff;
}

.sales-receipt-auto-print-label span {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.sales-receipt-numbering-wrap {
    display: grid;
    gap: 0.8rem;
}

.sales-receipt-numbering-toolbar {
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
    border: 1px solid #e4e7ee;
    background: #f6f7f9;
    box-shadow: none;
}

.sales-receipt-numbering-search.services-catalog-search-box {
    min-width: 0;
    max-width: 280px;
    min-height: 40px;
    flex: 0 0 280px;
}

.sales-receipt-numbering-search input[type='search'] {
    min-height: 34px;
    font-size: 0.9rem;
    font-weight: 600;
}

.sales-receipt-numbering-table {
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.sales-receipt-numbering-head,
.sales-receipt-numbering-row {
    display: grid;
    grid-template-columns: 44px minmax(180px, 1.05fr) minmax(220px, 1fr) minmax(220px, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.82rem 1rem;
}

.sales-receipt-numbering-head {
    border-bottom: 1px solid #e6e9f0;
}

.sales-receipt-numbering-head span {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.sales-receipt-numbering-row {
    border-bottom: 1px solid #eceff5;
}

.sales-receipt-numbering-row:last-of-type {
    border-bottom: 0;
}

.sales-receipt-numbering-check-col {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sales-receipt-numbering-check-col input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: #6757ef;
}

.sales-receipt-numbering-center {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.sales-receipt-numbering-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e1e5ee;
    background: #f1f4f9;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-receipt-numbering-center strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.sales-receipt-numbering-input {
    margin: 0;
}

.sales-receipt-numbering-input input {
    width: 100%;
    min-height: 38px;
    border-radius: 9px;
    border: 1px solid #cfd5e0;
    background: #ffffff;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0 0.78rem;
}

.sales-receipt-numbering-input input:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.sales-receipt-numbering-empty {
    margin: 0;
    padding: 0.95rem 1rem;
    border-top: 1px solid #eceff5;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.4;
}

.appointment-unavailable-list {
    display: grid;
    gap: 0.95rem;
}

.appointment-unavailable-card {
    padding: 1.15rem 1.35rem;
}

.appointment-settings-shell .appointment-unavailable-card {
    overflow: visible;
}

.appointment-unavailable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appointment-unavailable-row .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-unavailable-row .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-unavailable-row .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.appointment-unavailable-main {
    display: flex;
    align-items: center;
    gap: 0.78rem;
    min-width: 0;
}

.appointment-unavailable-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #f4f6fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.appointment-unavailable-icon .material-symbols-outlined {
    color: #6b778d;
    font-size: 1.9rem;
    line-height: 1;
}

.appointment-unavailable-copy {
    min-width: 0;
}

.appointment-unavailable-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.06rem;
    line-height: 1.2;
}

.appointment-unavailable-copy p {
    margin: 0.24rem 0 0;
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.35;
}

.appointment-status-list {
    display: grid;
    gap: 0.76rem;
}

.appointment-status-card {
    position: relative;
    min-height: 78px;
    padding: 0.92rem 1.1rem 0.92rem 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-settings-shell .appointment-status-card {
    overflow: visible;
}

.appointment-status-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--appointment-status-color, #5f56ff);
}

.appointment-status-main {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-width: 0;
}

.appointment-status-icon {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background:
        linear-gradient(145deg, var(--appointment-status-color, #5f56ff) 0%, #24374e 185%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 14px 24px rgba(17, 27, 44, 0.16);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.appointment-status-icon::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.34), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.appointment-status-icon .material-symbols-outlined {
    position: relative;
    z-index: 1;
    font-size: 1.12rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.appointment-status-main h3 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
}

.appointment-status-lock {
    color: #a1a8b5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appointment-status-lock .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.appointment-status-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-status-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-status-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

body.has-appointment-status-modal {
    overflow: hidden;
}

.appointment-status-modal {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(14, 18, 26, 0.3);
    backdrop-filter: blur(1px);
}

.appointment-status-modal.is-open {
    display: flex;
}

.appointment-status-dialog {
    width: min(640px, 100%);
    border: 1px solid #d8dde7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 42px rgba(15, 20, 30, 0.22);
    position: relative;
}

.appointment-status-close {
    position: absolute;
    top: 0.7rem;
    right: 0.72rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1f2633;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.appointment-status-form {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.2rem 1.1rem;
}

.appointment-status-form h2 {
    margin: 0;
    color: #111827;
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.appointment-status-field,
.appointment-status-color-field {
    display: grid;
    gap: 0.55rem;
}

.appointment-status-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.appointment-status-field-head label,
.appointment-status-color-field label {
    margin: 0;
    color: #111827;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-status-field-head span {
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 700;
}

.appointment-status-name-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.5rem;
}

.appointment-status-icon-picker {
    position: relative;
}

.appointment-status-icon-picker summary {
    position: relative;
    width: 54px;
    min-height: 48px;
    border: 1px solid #d7dded;
    border-radius: 14px;
    background:
        radial-gradient(circle at top left, rgba(109, 94, 248, 0.12), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 12px 22px rgba(20, 31, 53, 0.08);
    color: #5f56ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.appointment-status-icon-picker summary::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.82), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.appointment-status-icon-picker summary::-webkit-details-marker {
    display: none;
}

.appointment-status-icon-picker summary:hover {
    border-color: #c8c2ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 16px 28px rgba(95, 86, 255, 0.14);
    transform: translateY(-1px);
}

.appointment-status-icon-picker[open] summary {
    border-color: #6d5ef8;
    box-shadow:
        0 0 0 4px rgba(109, 94, 248, 0.12),
        0 18px 30px rgba(37, 48, 89, 0.14);
}

.appointment-status-icon-picker .material-symbols-outlined {
    position: relative;
    z-index: 1;
    font-size: 1.3rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.appointment-status-icon-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    min-width: 280px;
    border: 1px solid #e2e7f0;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 255, 0.98));
    box-shadow: 0 20px 36px rgba(19, 24, 34, 0.18);
    padding: 0.55rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.44rem;
    z-index: 25;
}

.appointment-status-icon-dropdown button {
    position: relative;
    min-height: 44px;
    border: 1px solid #e2e7f2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fe 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    color: #53627d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.appointment-status-icon-dropdown button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.8), transparent 44%);
    pointer-events: none;
}

.appointment-status-icon-dropdown button:hover {
    border-color: #cec8ff;
    background: linear-gradient(180deg, #ffffff 0%, #f3f1ff 100%);
    box-shadow: 0 10px 18px rgba(95, 86, 255, 0.12);
    color: #5f56ff;
    transform: translateY(-1px);
}

.appointment-status-icon-dropdown button.is-selected {
    border-color: #6d5ef8;
    box-shadow:
        0 0 0 3px rgba(109, 94, 248, 0.12),
        0 12px 22px rgba(95, 86, 255, 0.16);
    background:
        radial-gradient(circle at top left, rgba(109, 94, 248, 0.18), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #f6f2ff 100%);
    color: #5f56ff;
}

.appointment-status-icon-dropdown button .material-symbols-outlined {
    position: relative;
    z-index: 1;
    font-size: 1.12rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.appointment-status-name-row input[type="text"] {
    min-height: 46px;
}

.appointment-status-color-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.appointment-status-color-option {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.appointment-status-color-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-status-color-option span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--appointment-status-color, #5f56ff);
    display: block;
}

.appointment-status-color-option.is-selected span,
.appointment-status-color-option input[type="radio"]:checked + span {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #5f56ff;
}

.appointment-status-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.appointment-closed-list {
    display: grid;
    gap: 0.8rem;
}

.appointment-closed-card {
    padding: 1rem 1.2rem;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-settings-shell .appointment-closed-card {
    overflow: visible;
}

.appointment-closed-main {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.appointment-closed-main .appointment-closed-date {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.appointment-closed-main .appointment-closed-name {
    margin: 0;
    color: #5c667a;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.35;
}

.appointment-closed-main .appointment-closed-scope {
    margin: 0;
    display: block;
    color: #667085;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.4;
}

.appointment-closed-card .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-closed-card .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-closed-card .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.appointment-closed-empty-card {
    min-height: 460px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
}

.appointment-closed-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(160deg, #4f7ff2, #8b5cf6 58%, #c084fc);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(111, 82, 235, 0.2);
}

.appointment-closed-empty-icon .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

.appointment-closed-empty-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1.7rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.appointment-closed-empty-card p {
    max-width: 660px;
    margin: 0;
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.45;
}

body.has-appointment-closed-modal {
    overflow: hidden;
}

.appointment-closed-modal {
    position: fixed;
    inset: 0;
    z-index: 1710;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(14, 18, 26, 0.3);
    backdrop-filter: blur(1px);
}

.appointment-closed-modal.is-open {
    display: flex;
}

.appointment-closed-dialog {
    width: min(700px, 100%);
    border: 1px solid #d8dde7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 42px rgba(15, 20, 30, 0.22);
    position: relative;
}

.appointment-closed-close {
    position: absolute;
    top: 0.7rem;
    right: 0.72rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1f2633;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.appointment-closed-form {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.2rem 1.1rem;
}

.appointment-closed-form h2 {
    margin: 0;
    color: #111827;
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.appointment-closed-range {
    display: grid;
    gap: 0.42rem;
}

.appointment-closed-range-title {
    color: #111827;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.appointment-closed-range-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.appointment-closed-range-grid .form-group {
    margin: 0;
}

.appointment-closed-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.appointment-cancel-list {
    display: grid;
    gap: 0.85rem;
}

.appointment-cancel-card {
    padding: 1rem 1.35rem;
    min-height: 84px;
    display: flex;
    align-items: center;
}

.appointment-settings-shell .appointment-cancel-card {
    overflow: visible;
}

.appointment-cancel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
}

.appointment-cancel-row .services-catalog-menu-inline {
    position: relative;
    z-index: 5;
}

.appointment-cancel-row .services-catalog-menu-inline[open] {
    z-index: 40;
}

.appointment-cancel-row .services-catalog-menu-inline[open] .services-catalog-menu-dropdown {
    z-index: 41;
}

.appointment-cancel-row h3 {
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
    line-height: 1.2;
}

.appointment-cancel-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a1a8b5;
}

.appointment-cancel-lock .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.appointment-resources-search-card {
    padding: 0.9rem 1rem;
}

.appointment-resources-search {
    max-width: 270px;
}

.appointment-resources-group {
    display: grid;
    gap: 0.75rem;
}

.appointment-resources-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-resources-group-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.22rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-resources-stack {
    display: grid;
    gap: 0.8rem;
}

.appointment-resource-card {
    padding: 1.05rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.appointment-settings-shell .appointment-resource-card {
    overflow: visible;
}

.appointment-resource-card .service-catalog-card-menu {
    position: relative;
    z-index: 5;
}

.appointment-resource-card .service-catalog-card-menu[open] {
    z-index: 40;
}

.appointment-resource-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.appointment-resource-icon {
    width: 52px;
    height: 48px;
    border-radius: 10px;
    background: #f1e5c4;
    border: 1px solid #eedeb6;
    color: #9c7024;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.appointment-resource-icon .material-symbols-outlined {
    font-size: 1.45rem;
    line-height: 1;
}

.appointment-resource-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.06rem;
    line-height: 1.2;
}

.appointment-resource-empty-copy {
    margin: 0;
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.45;
}

.appointment-resource-empty-card {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.15rem;
}

.appointment-resource-empty-card .appointment-resource-empty-copy {
    text-align: center;
}

.appointment-resource-editor-layout {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 1.05rem;
    align-items: start;
}

.appointment-resource-editor-layout-single {
    grid-template-columns: minmax(0, 1fr);
}

.appointment-resource-editor-side {
    padding: 0.85rem;
}

.appointment-resource-side-nav {
    display: grid;
    gap: 0.5rem;
}

.appointment-resource-side-nav a {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #13233a;
    display: inline-flex;
    align-items: center;
    padding: 0.66rem 0.85rem;
    font-size: 0.91rem;
    font-weight: 700;
    text-decoration: none;
}

.appointment-resource-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
}

.appointment-resource-editor-card {
    padding: 1.3rem 1.45rem;
}

.appointment-resource-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.34rem;
}

.appointment-resource-field-head em {
    color: #6b7280;
    font-style: normal;
    font-size: 0.88rem;
    font-weight: 700;
}

.appointment-resource-field-head small {
    color: #6b7280;
    font-size: 0.86rem;
    font-weight: 600;
}

.appointment-resource-color-section {
    margin-top: 0.95rem;
}

.appointment-resource-color-section h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-resource-color-section p {
    margin: 0.34rem 0 0.85rem;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.45;
}

.appointment-resource-bungee-panel {
    margin-top: 1.25rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(20, 184, 166, 0.1) 0%, rgba(255, 255, 255, 0.98) 72%);
}

.appointment-resource-bungee-panel h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #0f766e;
}

.appointment-resource-bungee-panel > p {
    margin: 0.5rem 0 0.75rem;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
}

.appointment-resource-bungee-steps {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    color: #374151;
    font-size: 0.88rem;
    line-height: 1.55;
}

.appointment-resource-bungee-steps a {
    color: #0d9488;
    font-weight: 600;
    text-decoration: none;
}

.appointment-resource-bungee-steps a:hover {
    text-decoration: underline;
}

.appointment-resource-bungee-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.appointment-resource-bungee-note {
    margin: 0.85rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #374151;
    font-size: 0.88rem;
    line-height: 1.5;
}

.appointment-resource-bungee-note a {
    color: #0d9488;
    font-weight: 700;
    text-decoration: none;
}

.appointment-resource-bungee-note a:hover {
    text-decoration: underline;
}

.appointment-resource-editor-main {
    display: grid;
    gap: 1.05rem;
    min-width: 0;
}

.bungee-resource-schedule-card {
    scroll-margin-top: 1.25rem;
}

.bungee-fitune-lead {
    margin: 0.45rem 0 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
}

.bungee-fitune-block {
    margin-top: 1.35rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e8edf3;
}

.bungee-fitune-block h3 {
    margin: 0 0 0.85rem;
    color: #111827;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
}

.bungee-fitune-block-muted {
    background: #f8fafc;
    margin-left: -0.35rem;
    margin-right: -0.35rem;
    padding: 1rem 0.35rem 0.2rem;
    border-radius: 12px;
    border-top-color: #e2e8f0;
}

.bungee-fitune-fieldset {
    margin: 0 0 0.95rem;
    padding: 0;
    border: 0;
}

.bungee-fitune-fieldset legend {
    margin-bottom: 0.55rem;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 700;
}

.bungee-fitune-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bungee-fitune-toggle label {
    min-height: 40px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 600;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    user-select: none;
}

.bungee-fitune-toggle label.is-active,
.bungee-fitune-toggle-radio label:has(input:checked) {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1e3a8a;
}

.bungee-fitune-toggle label.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.bungee-fitune-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bungee-fitune-hint {
    display: block;
    margin-top: 0.3rem;
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.4;
}

.bungee-fitune-weekdays {
    margin: 0.85rem 0;
}

.bungee-fitune-weekdays > span {
    display: block;
    margin-bottom: 0.5rem;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 700;
}

.bungee-fitune-weekdays-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bungee-fitune-day {
    position: relative;
    min-width: 48px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4b5563;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bungee-fitune-day:has(input:checked) {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.bungee-fitune-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bungee-fitune-repeat-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.bungee-fitune-repeat-day {
    position: relative;
    min-width: 52px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    background: #fff;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.bungee-fitune-repeat-day:has(input:checked) {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}

.bungee-fitune-repeat-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bungee-fitune-row-field-full {
    grid-column: 1 / -1;
    width: 100%;
}

.bungee-fitune-day-schedules {
    display: grid;
    gap: 0.85rem;
    width: 100%;
}

.bungee-fitune-day-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    padding: 1rem 1.1rem 0.9rem;
}

.bungee-fitune-day-card[hidden] {
    display: none !important;
}

.bungee-fitune-day-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #e5e7eb;
}

.bungee-fitune-day-card-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.bungee-fitune-day-time-range {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.3;
}

.bungee-fitune-day-time-range[hidden] {
    display: none !important;
}

.bungee-fitune-day-time-range strong {
    display: inline-block;
    padding: 0.28rem 0.62rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.bungee-fitune-day-time-range-sep {
    margin: 0 0.2rem;
    color: #94a3b8;
    font-weight: 600;
}

.bungee-fitune-day-slot input[type='time'].bungee-fitune-input {
    font-weight: 800;
}

.bungee-fitune-day-card-body {
    display: grid;
    gap: 0.75rem;
}

.services-editor-side-toggle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #dfe5ee;
    background: #fff;
    color: #4b5563;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, background 0.15s ease;
}

.services-editor-side-toggle:hover {
    background: #f4f6fb;
}

.services-editor-layout.services-editor-side-is-collapsed {
    grid-template-columns: 0px minmax(0, 1fr) !important;
    gap: 0 !important;
}

.services-editor-layout.services-editor-side-is-collapsed > .services-editor-side {
    overflow: hidden;
    visibility: hidden;
    width: 0;
    padding: 0;
    border: 0;
}

.services-editor-layout.services-editor-side-is-collapsed .services-editor-side-toggle {
    visibility: visible;
    position: fixed;
    top: 6.5rem;
    left: 0.5rem;
    background: #1f2937;
    color: #fff;
    border-color: #1f2937;
}

.services-editor-layout:not(.services-editor-side-is-collapsed) > .services-editor-side {
    visibility: visible;
}

.services-editor-side-toggle {
    display: none;
}

.services-editor-side-is-collapsed,
.services-editor-layout.services-editor-side-is-collapsed {
    display: initial;
}

.bungee-fitune-day-slot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1fr) auto;
    gap: 0.5rem 0.6rem;
    align-items: end;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.bungee-fitune-day-slot {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.5rem;
}

.bungee-fitune-day-slot:last-child {
    margin-bottom: 0;
}

.bungee-fitune-mini-field {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.bungee-fitune-day-slot-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 0.15rem;
}

.bungee-fitune-day-slot-actions[hidden] {
    display: none !important;
}

.bungee-fitune-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.bungee-fitune-icon-btn[hidden] {
    display: none !important;
}

.bungee-fitune-icon-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.bungee-fitune-icon-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

.bungee-fitune-sheet .is-once-only.is-hidden {
    display: none;
}

@media (max-width: 900px) {
    .bungee-fitune-day-slot-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bungee-fitune-day-slot-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.bungee-fitune-time-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.bungee-fitune-price-field.is-hidden {
    display: none;
}

.bungee-fitune-packages {
    margin-top: 0.85rem;
}

.bungee-fitune-packages ul {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.bungee-fitune-packages li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 0.86rem;
}

.bungee-fitune-packages li em {
    color: #0d9488;
    font-style: normal;
    font-weight: 700;
}

.bungee-fitune-template-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.bungee-fitune-template-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 0.86rem;
}

.bungee-fitune-template-list li span {
    color: #6b7280;
}

.bungee-fitune-schedule-form .is-recurring-hidden,
.bungee-fitune-sheet .is-recurring-only.is-hidden {
    display: none;
}

.bungee-fitune-schedule-form {
    --bungee-fitune-label-col: 35%;
    --bungee-fitune-field-col: 65%;
    --bungee-fitune-border: #e2e8f0;
    --bungee-fitune-border-strong: #d1d5db;
    --bungee-fitune-text: #111827;
    --bungee-fitune-muted: #6b7280;
    --bungee-fitune-accent: #2563eb;
    --bungee-fitune-accent-soft: #eff6ff;
}

.bungee-fitune-sheet {
    margin-top: 1rem;
    padding: 1.35rem 1.5rem 1.2rem;
    border: 1px solid var(--bungee-fitune-border, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.bungee-fitune-schedule-form > .bungee-fitune-sheet:first-child,
.services-class-schedule-panel > .bungee-fitune-sheet:first-child {
    margin-top: 0;
}

.bungee-fitune-sheet + .bungee-fitune-sheet {
    margin-top: 1rem;
}

.bungee-fitune-sheet-title {
    margin: 0 0 0.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.bungee-fitune-row {
    display: grid;
    grid-template-columns: minmax(0, var(--bungee-fitune-label-col, 35%)) minmax(0, var(--bungee-fitune-field-col, 65%));
    gap: 0.85rem 2.25rem;
    align-items: start;
    padding: 1.1rem 0;
    border-bottom: 1px solid #eef2f7;
}

.bungee-fitune-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.bungee-fitune-row-label {
    padding-top: 0.15rem;
}

.bungee-fitune-row-label strong {
    display: block;
    color: var(--bungee-fitune-text, #111827);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.bungee-fitune-row-label p {
    margin: 0.3rem 0 0;
    color: var(--bungee-fitune-muted, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.5;
    max-width: 22rem;
}

.bungee-fitune-row-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.bungee-fitune-input,
.bungee-fitune-select,
.bungee-fitune-schedule-form .bungee-fitune-input,
.bungee-fitune-schedule-form .bungee-fitune-select,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-input,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-select {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    border: 1px solid var(--bungee-fitune-border-strong, #d1d5db);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--bungee-fitune-text, #111827);
    background: #fff;
    box-shadow: none;
}

.bungee-fitune-input:not([readonly]):focus,
.bungee-fitune-select:focus,
.bungee-fitune-schedule-form .bungee-fitune-input:not([readonly]):focus,
.bungee-fitune-schedule-form .bungee-fitune-select:focus,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-input:not([readonly]):focus,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-select:focus {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.bungee-fitune-input[readonly] {
    background: #f8fafc;
    color: #4b5563;
    cursor: default;
}

.bungee-fitune-select {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

.bungee-fitune-link {
    display: inline-block;
    margin-top: 0.45rem;
    color: #2563eb;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.bungee-fitune-link:hover {
    text-decoration: underline;
}

.bungee-fitune-segmented {
    display: inline-flex;
    align-self: flex-start;
    width: 100%;
    max-width: 340px;
    padding: 4px;
    gap: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f1f5f9;
    box-sizing: border-box;
}

.bungee-fitune-segmented .bungee-fitune-segment,
.bungee-fitune-schedule-form .bungee-fitune-segmented .bungee-fitune-segment,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-segmented .bungee-fitune-segment,
.bungee-fitune-segmented label.bungee-fitune-segment,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-segmented label.bungee-fitune-segment {
    position: relative;
    flex: 1 1 0;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #64748b;
    background: transparent;
    cursor: default;
    user-select: none;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.bungee-fitune-segmented .bungee-fitune-segment:has(input:checked),
.bungee-fitune-segmented .bungee-fitune-segment.is-active,
.bungee-fitune-schedule-form .bungee-fitune-segmented .bungee-fitune-segment.is-active,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-segmented .bungee-fitune-segment.is-active {
    background: #1e40af !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.45) !important;
    z-index: 1;
}

.bungee-fitune-segmented .bungee-fitune-segment.is-active .bungee-fitune-segment-text,
.bungee-fitune-schedule-form .bungee-fitune-segmented .bungee-fitune-segment.is-active .bungee-fitune-segment-text,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-segmented .bungee-fitune-segment.is-active .bungee-fitune-segment-text {
    color: #ffffff !important;
}

.bungee-fitune-segmented .bungee-fitune-segment.is-disabled,
.bungee-fitune-segmented .bungee-fitune-segment:has(input:disabled):not(:has(input:checked)) {
    cursor: not-allowed;
    color: #94a3b8;
    opacity: 0.72;
}

.bungee-fitune-segmented .bungee-fitune-segment-text {
    pointer-events: none;
    line-height: 1.2;
}

.bungee-fitune-segmented .bungee-fitune-segment input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.bungee-fitune-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
}

.bungee-fitune-stepper-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--bungee-fitune-border-strong, #d1d5db);
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.bungee-fitune-stepper-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.bungee-fitune-stepper-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.bungee-fitune-stepper-input,
.bungee-fitune-schedule-form .bungee-fitune-stepper-input,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-stepper-input {
    width: 3.25rem;
    min-width: 3.25rem;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--bungee-fitune-text, #111827);
    -moz-appearance: textfield;
    appearance: textfield;
}

.bungee-fitune-stepper-input::-webkit-outer-spin-button,
.bungee-fitune-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bungee-fitune-capacity-breakdown {
    display: none !important;
}

.bungee-fitune-capacity-breakdown label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.bungee-fitune-capacity-breakdown input,
.bungee-fitune-schedule-form .bungee-fitune-capacity-breakdown input,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-capacity-breakdown input {
    min-height: 38px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--bungee-fitune-border-strong, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    box-shadow: none;
}

.bungee-fitune-time-slots,
.bungee-fitune-time-slot {
    width: 100%;
}

.bungee-fitune-radio-list {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    max-width: 420px;
}

.bungee-fitune-radio-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--bungee-fitune-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    color: var(--bungee-fitune-text, #111827);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bungee-fitune-radio-option:hover {
    border-color: #cbd5e1;
}

.bungee-fitune-radio-option:has(input:checked) {
    border-color: rgba(37, 99, 235, 0.45);
    background: var(--bungee-fitune-accent-soft, #eff6ff);
}

.bungee-fitune-radio-option input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--bungee-fitune-accent, #2563eb);
}

.bungee-fitune-radio-option > span {
    min-width: 0;
}

.bungee-fitune-time-grid {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(8.5rem, 1fr) minmax(7.5rem, 0.9fr) minmax(9.5rem, 1.15fr) minmax(8rem, 0.95fr);
    gap: 0.75rem;
    align-items: end;
}

.bungee-fitune-mini-field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}

.bungee-fitune-mini-field > span:first-child {
    color: #374151;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bungee-fitune-optional {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
}

.bungee-fitune-session-kind-pill {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    vertical-align: middle;
}

.bungee-fitune-day-slot[data-bungee-session-kind="afternoon"] .bungee-fitune-session-kind-pill,
.bungee-fitune-day-slot:has([data-bungee-slot-session-kind][value="afternoon"]) .bungee-fitune-session-kind-pill {
    background: #fff7ed;
    color: #c2410c;
}

.bungee-fitune-duration-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--bungee-fitune-border-strong, #d1d5db);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.bungee-fitune-duration-wrap .bungee-fitune-input,
.bungee-fitune-schedule-form .bungee-fitune-duration-wrap .bungee-fitune-input,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-duration-wrap .bungee-fitune-input {
    flex: 1 1 auto;
    min-width: 40px;
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px 0 0 10px;
    box-shadow: none;
    padding: 0.4rem 0.5rem;
}

.bungee-fitune-duration-wrap .bungee-fitune-input:focus {
    box-shadow: none;
}

.bungee-fitune-duration-wrap:focus-within {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.bungee-fitune-duration-wrap em {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--bungee-fitune-muted, #6b7280);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
    background: #f8fafc;
    border-left: 1px solid #e5e7eb;
}

.bungee-fitune-booking-window {
    width: 100%;
    max-width: 520px;
    gap: 0.85rem;
}

.bungee-fitune-stack-field {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    margin: 0;
}

.bungee-fitune-stack-field > span {
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.bungee-fitune-booking-open-days,
.bungee-fitune-booking-close-offset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.bungee-fitune-booking-open-days.is-hidden,
.bungee-fitune-booking-close-offset.is-hidden {
    display: none;
}

.bungee-fitune-input-inline,
.bungee-fitune-schedule-form .bungee-fitune-input-inline,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-input-inline {
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    flex: 0 0 auto;
    text-align: center;
}

.bungee-fitune-select-inline,
.bungee-fitune-schedule-form .bungee-fitune-select-inline,
.services-editor-form .bungee-fitune-schedule-form .bungee-fitune-select-inline {
    width: auto;
    min-width: 7.5rem;
    max-width: 9rem;
    flex: 0 0 auto;
    padding-right: 2rem;
}

.bungee-fitune-booking-suffix {
    color: #4b5563;
    font-size: 0.875rem;
    line-height: 1.4;
}

.bungee-fitune-link-btn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.bungee-fitune-inline-field {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.75rem;
    max-width: 220px;
}

@media (max-width: 960px) {
    .bungee-fitune-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .bungee-fitune-row-label p {
        max-width: none;
    }

    .bungee-fitune-segmented {
        max-width: none;
    }

    .bungee-fitune-time-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .bungee-fitune-capacity-breakdown {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bungee-fitune-sheet {
        padding: 1.1rem 1rem 0.95rem;
    }

    .bungee-fitune-time-grid {
        grid-template-columns: 1fr;
    }
}

.bungee-fitune-collapsible {
    margin-top: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.bungee-fitune-collapsible summary {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    list-style: none;
    padding: 0.95rem 1.1rem;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
}

.bungee-fitune-collapsible[open] summary {
    border-bottom-color: #e5e7eb;
}

.bungee-fitune-collapsible summary::-webkit-details-marker {
    display: none;
}

.bungee-fitune-collapsible-body {
    padding: 1rem 1.1rem 1.15rem;
}

.bungee-fitune-templates-manager {
    margin-bottom: 1.05rem;
    padding: 1.2rem 1.35rem;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.bungee-fitune-templates-table-wrap {
    overflow-x: auto;
}

.bungee-fitune-templates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.bungee-fitune-templates-table th,
.bungee-fitune-templates-table td {
    padding: 0.55rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
}

.bungee-fitune-templates-table tr.is-inactive td {
    color: #9ca3af;
}

.bungee-fitune-templates-table tr.is-editing td {
    background: rgba(99, 102, 241, 0.06);
}

.bungee-fitune-templates-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.bungee-inline-form {
    display: inline;
}

.btn-sm {
    min-height: 34px;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
}

.bungee-add-time-btn {
    margin-top: 0.65rem;
}

.bungee-fitune-time-slot + .bungee-fitune-time-slot {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e5e7eb;
}

.bungee-fitune-time-slots {
    display: grid;
    gap: 0.65rem;
}

.bungee-fitune-time-slot-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.45rem;
}

.bungee-remove-time-btn {
    color: #b91c1c;
    border-color: #fecaca;
}

.bungee-remove-time-btn:hover {
    background: #fef2f2;
}

.bungee-fitune-defaults-box {
    margin-top: 1rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.bungee-fitune-packages-checkboxes {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.bungee-fitune-package-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.86rem;
    cursor: pointer;
}

.bungee-fitune-package-check em {
    margin-left: auto;
    color: #0d9488;
    font-style: normal;
    font-weight: 700;
}

.bungee-fitune-weight-bands {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    color: #4b5563;
    font-size: 0.88rem;
    line-height: 1.55;
}

.services-editor-section-classes {
    scroll-margin-top: 1.25rem;
}

.services-class-schedule-panel {
    display: grid;
    gap: 1rem;
}

.services-editor-section-body .services-class-schedule-panel {
    margin: 0 -0.15rem;
}

.services-class-schedule-panel .bungee-fitune-sheet {
    box-shadow: none;
}

.services-class-schedule-panel .bungee-fitune-packages-checkboxes {
    padding: 0 0.15rem;
}

/* Paquetes / membresías activos (selector en horario de clase) */
.bungee-package-picker-sheet .bungee-fitune-sheet-title {
    margin-bottom: 0.35rem;
}

.bungee-package-picker-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    margin-bottom: 0.75rem;
}

.bungee-package-picker-lead {
    margin: 0;
    max-width: 42rem;
    color: var(--bungee-fitune-muted, #6b7280);
    font-size: 0.86rem;
    line-height: 1.5;
}

.bungee-package-picker-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
}

.bungee-package-picker-count {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bungee-fitune-accent-soft, #eff6ff);
    color: var(--bungee-fitune-accent, #2563eb);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bungee-package-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
    font-size: 0.82rem;
}

.bungee-package-picker-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bungee-fitune-accent, #2563eb);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bungee-package-picker-link:hover {
    color: #1d4ed8;
}

.bungee-package-picker-toolbar-sep {
    color: #cbd5e1;
}

.bungee-package-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.65rem;
}

.bungee-package-picker-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bungee-package-picker-card:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.bungee-package-picker-card.is-selected {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.06);
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.18);
}

.bungee-package-picker-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bungee-package-picker-card-box {
    flex: 0 0 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border: 2px solid #94a3b8;
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bungee-package-picker-card.is-selected .bungee-package-picker-card-box {
    border-color: #0d9488;
    background: #0d9488;
    box-shadow: inset 0 0 0 2px #fff;
}

.bungee-package-picker-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.bungee-package-picker-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.bungee-package-picker-name {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.bungee-package-picker-price {
    flex: 0 0 auto;
    color: #0f766e;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.bungee-package-picker-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bungee-package-picker-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.bungee-package-picker-pill.is-muted {
    background: #f1f5f9;
    color: #475569;
}

.bungee-package-picker-pill.is-active {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
}

.bungee-package-picker-desc {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.45;
}

.bungee-package-picker-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.9rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 0.88rem;
}

.bungee-package-picker-empty p {
    margin: 0;
}

.bungee-fitune-collapsible-body .bungee-package-picker-sheet {
    margin-top: 0.65rem;
    padding: 1rem 1.1rem;
}

.bungee-fitune-collapsible-body .bungee-package-picker-head {
    margin-bottom: 0.55rem;
}

.bungee-fitune-collapsible-body .bungee-package-picker-head .bungee-fitune-sheet-title {
    font-size: 0.95rem;
}

.membership-catalog-picker-card {
    align-items: flex-start;
}

.membership-catalog-picker-icon {
    display: inline-flex;
    flex: 0 0 2.35rem;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin-top: 0.05rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--membership-color, #9b6bff) 18%, #fff);
    color: var(--membership-color, #9b6bff);
}

.membership-catalog-picker-icon .material-symbols-outlined {
    font-size: 1.25rem;
}

.bungee-package-picker-pill.is-membership-kind {
    background: rgba(155, 107, 255, 0.14);
    color: #6d28d9;
}

.bungee-package-picker-pill.is-package-kind {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.bungee-package-picker-desc.is-secondary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.bungee-fitune-schedule-form [data-bungee-add-time] {
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.services-class-schedule-lead {
    margin: 0 0 0.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #374151;
    font-size: 0.88rem;
    line-height: 1.5;
}

.services-class-type-hint {
    margin-top: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}

.services-class-schedule-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.services-editor-layout[data-service-class-mode="1"] .services-editor-section-centers,
.services-editor-layout[data-service-class-mode="1"] #service-resources {
    /* sigue visible para asignar sala si hace falta */
}

.appointment-resource-color-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.appointment-resource-color-option {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
}

.appointment-resource-color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-resource-color-option span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--resource-color, #8ecfee);
    border: 2px solid transparent;
    display: block;
}

.appointment-resource-color-option.is-selected span,
.appointment-resource-color-option input:checked + span {
    border-color: #fff;
    box-shadow: 0 0 0 2px #6d5ef8;
}

body.has-appointment-resource-type-modal {
    overflow: hidden;
}

.appointment-resource-type-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.3rem;
    background: rgba(15, 19, 27, 0.3);
    z-index: 122;
}

.appointment-resource-type-modal.is-open {
    display: flex;
}

.appointment-resource-type-dialog {
    width: min(760px, 100%);
    max-height: calc(100vh - 2.6rem);
    overflow: auto;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 52px rgba(11, 17, 28, 0.22);
    position: relative;
}

.appointment-resource-type-close {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #232731;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.appointment-resource-type-form {
    padding: 2.05rem 2.15rem 1.9rem;
    display: grid;
    gap: 1.15rem;
}

.appointment-resource-type-form h2 {
    margin: 0 0 0.2rem;
    color: #111827;
    font-size: clamp(2.05rem, 2.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.appointment-resource-type-field {
    display: grid;
    gap: 0.5rem;
}

.appointment-resource-type-field label {
    color: #141b27;
    font-size: 0.96rem;
    font-weight: 700;
}

.appointment-resource-type-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-resource-type-field-head span {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 700;
}

.appointment-resource-type-field-head small {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
}

.appointment-resource-type-name-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.appointment-resource-type-name-row input,
.appointment-resource-type-field textarea {
    width: 100%;
    border: 1px solid #d2d6df;
    border-radius: 11px;
    background: #ffffff;
    color: #161d2a;
    font-size: 0.98rem;
    font-weight: 600;
}

.appointment-resource-type-name-row input {
    min-height: 50px;
    padding: 0 0.95rem;
}

.appointment-resource-type-field textarea {
    min-height: 122px;
    resize: vertical;
    padding: 0.85rem 0.95rem;
}

.appointment-resource-type-name-row input::placeholder,
.appointment-resource-type-field textarea::placeholder {
    color: #b3b8c1;
}

.appointment-resource-type-name-row input:focus,
.appointment-resource-type-field textarea:focus {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.appointment-resource-type-icon-picker {
    position: relative;
}

.appointment-resource-type-icon-picker summary {
    width: 48px;
    height: 50px;
    border: 1px solid #d2d6df;
    border-radius: 11px;
    background: #ffffff;
    color: #1b2130;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
}

.appointment-resource-type-icon-picker summary::-webkit-details-marker {
    display: none;
}

.appointment-resource-type-icon-picker[open] summary {
    border-color: #111318;
    box-shadow: 0 0 0 3px rgba(17, 19, 24, 0.08);
}

.appointment-resource-type-icon-picker .material-symbols-outlined {
    font-size: 1.35rem;
    line-height: 1;
}

.appointment-resource-type-icon-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 230px;
    border: 1px solid #d9dde5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(19, 24, 34, 0.14);
    padding: 0.45rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
    z-index: 20;
}

.appointment-resource-type-icon-dropdown button {
    min-height: 40px;
    border: 1px solid #dde3ee;
    border-radius: 10px;
    background: #ffffff;
    color: #162131;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointment-resource-type-icon-dropdown button:hover {
    background: #f3f6fb;
}

.appointment-resource-type-icon-dropdown button.is-selected {
    border-color: #6d5ef8;
    box-shadow: 0 0 0 1px rgba(109, 94, 248, 0.18);
    background: #f6f4ff;
}

.appointment-resource-type-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.35rem;
}

.appointment-resource-type-submit {
    min-width: 92px;
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: #0f1014;
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 800;
    cursor: pointer;
}

.appointment-resource-type-submit:disabled {
    background: #abacb1;
    color: #ffffff;
    cursor: not-allowed;
}

.appointment-settings-note {
    margin-top: 1.3rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e3e6ee;
    border-radius: 14px;
    background: #fafbfc;
    color: #111827;
    font-size: 0.84rem;
    line-height: 1.55;
}

.appointment-settings-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
    margin-top: 1.1rem;
}

.appointment-settings-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.7rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border: 1px solid #e3e6ee;
    border-radius: 14px;
    background: #fafbfc;
}

.appointment-settings-check input[type="checkbox"] {
    margin: 0.15rem 0 0;
}

.appointment-settings-check span {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-settings-check small {
    grid-column: 2 / -1;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
}

.appointment-settings-list {
    display: grid;
    gap: 0.8rem;
}

.appointment-settings-row {
    display: grid;
    gap: 0.16rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e5e8ef;
    border-radius: 14px;
    background: #fafbfc;
}

.appointment-settings-row strong {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.appointment-settings-row span {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
}

.appointment-settings-empty {
    padding: 1rem 1.05rem;
    border: 1px dashed #d5dae4;
    border-radius: 14px;
    color: #667085;
    font-size: 0.83rem;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.8);
}

.appointment-settings-form-copy {
    margin: 0 0 0.45rem;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
}

.appointment-settings-waitlist-form {
    display: grid;
    gap: 1.25rem;
}

.appointment-settings-form-actions {
    justify-content: flex-end;
    margin-top: 0.4rem;
}

.appointment-settings-block {
    display: grid;
    gap: 0.72rem;
    border: 0;
    outline: 0;
    background: transparent;
}

.appointment-settings-block-tight {
    gap: 0.65rem;
}

.appointment-settings-hidden {
    display: none !important;
}

.appointment-settings-block h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.appointment-settings-block p {
    margin: -0.18rem 0 0;
    color: #667085;
    font-size: 0.81rem;
    line-height: 1.45;
}

.appointment-settings-choice-grid,
.appointment-settings-radio-stack {
    display: grid;
    gap: 0.9rem;
}

.appointment-settings-choice,
.appointment-settings-radio {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.8rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid #d8dde7;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.appointment-settings-choice input,
.appointment-settings-radio input {
    margin: 0.25rem 0 0;
}

.appointment-settings-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appointment-settings-choice:has(input:checked),
.appointment-settings-radio:has(input:checked) {
    border-color: #6358e7;
    box-shadow: 0 0 0 1px rgba(99, 88, 231, 0.18);
    background: #ffffff;
}

.appointment-settings-choice-icon {
    color: #1f2937;
    font-size: 1.35rem;
    line-height: 1;
}

.appointment-settings-choice-copy,
.appointment-settings-radio-copy,
.appointment-settings-checkbox-copy {
    display: grid;
    gap: 0.1rem;
}

.appointment-settings-choice-copy strong,
.appointment-settings-radio-copy strong,
.appointment-settings-checkbox-copy strong {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.35;
}

.appointment-settings-choice-copy small,
.appointment-settings-radio-copy small,
.appointment-settings-checkbox-copy small {
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
}

.appointment-settings-radio {
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.65rem;
    padding: 0.12rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.appointment-settings-radio:has(input:checked) {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.appointment-settings-radio input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: #6358e7;
}

.appointment-settings-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 0.85rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid #efd58e;
    border-radius: 14px;
    background: #fbf3d8;
}

.appointment-settings-inline-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 0.75rem;
    align-items: start;
    padding: 0.85rem 0.95rem;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    background: #f6f7f8;
}

.appointment-settings-inline-note .material-symbols-outlined {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1;
}

.appointment-settings-inline-note p {
    margin: 0;
    color: #374151;
    font-size: 0.82rem;
    line-height: 1.5;
}

.appointment-settings-alert .material-symbols-outlined {
    color: #c96810;
    font-size: 1.2rem;
    line-height: 1;
}

.appointment-settings-alert p {
    margin: 0;
    color: #111827;
    font-size: 0.82rem;
    line-height: 1.55;
}

.appointment-settings-alert a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.appointment-settings-alert a::after {
    content: '\2192';
    font-size: 0.95rem;
}

.appointment-settings-divider {
    height: 1px;
    background: #e5e8ef;
    margin: 0.1rem 0 0;
}

.appointment-settings-checkbox-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.8rem;
    align-items: start;
}

.appointment-settings-checkbox-row input[type="checkbox"] {
    margin: 0.28rem 0 0;
    accent-color: #6358e7;
}

#waitlist-settings-form > .appointment-settings-block {
    border: 0;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .appointment-settings-check-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-settings-editor-card {
        max-width: none;
    }

    .appointment-settings-summary-card {
        max-width: none;
        padding: 1.2rem;
    }

    .appointment-settings-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-online-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-payment-card {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-tax-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-unavailable-row {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-cancel-row {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-status-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-closed-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-status-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .appointment-closed-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .appointment-unavailable-row .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .appointment-cancel-row .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .sales-payment-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .sales-tax-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .sales-service-charge-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .team-timeoff-card {
        flex-direction: column;
        align-items: stretch;
    }

    .team-timeoff-header-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .team-timeoff-card .services-catalog-menu-inline {
        align-self: flex-start;
    }

    .team-timeoff-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-timeoff-modal-card {
        padding: 1.5rem 1.25rem;
    }

    .team-timeclock-proximity-row {
        flex-direction: column;
        align-items: stretch;
    }

    .team-timeclock-proximity-row .sales-tips-switch {
        align-self: flex-start;
    }

    .team-timeclock-editor-head h2 {
        font-size: 1rem;
    }

    .team-payroll-editor-intro h2 {
        font-size: 1.3rem;
    }

    .team-payroll-section h3 {
        font-size: 1.02rem;
    }

    .team-payroll-form-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .team-payroll-calendar-card {
        max-width: none;
    }

    .team-payroll-summary-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.78rem;
    }

    .team-commissions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
    }

    .team-commissions-row .sales-tips-switch {
        align-self: flex-start;
    }

    .team-commissions-copy {
        max-width: none;
    }

    .team-pin-summary-head {
        flex-direction: column;
        align-items: stretch;
    }

    .team-pin-summary-actions {
        justify-content: flex-start;
    }

    .team-pin-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-pin-wizard-top {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.6rem;
    }

    .team-pin-top-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .team-pin-wizard-body > h2 {
        font-size: 1.55rem;
    }

    .team-pin-minutes-row {
        margin-left: 0;
        max-width: none;
    }

    .team-pin-large-preview {
        margin-left: 0;
    }

    .team-pin-wizard-section {
        padding: 0;
    }

    .team-pin-style-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-pin-large-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-pin-members-toolbar {
        align-items: stretch;
    }

    .team-pin-members-search {
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .team-pin-members-table {
        min-width: 680px;
    }
}

/* ================================================================
   SERVICES CATALOG � MOBILE PRO (appended � highest cascade priority)
   ================================================================ */
@media (max-width: 980px) {
    /* Layout: remove forced height and sidebar offset */
    .admin-body.admin-page-services-catalog .admin-layout,
    .admin-body.admin-page-services-catalog .admin-content,
    .admin-body.admin-page-services-catalog .clients-pro-layout--fixed-nav,
    .admin-body.admin-page-services-catalog .clients-pro-layout--fixed-nav .clients-pro-main {
        min-height: auto !important;
        height: auto !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    /* Hide sidebar completely on mobile */
    .admin-body.admin-page-services-catalog .clients-pro-side,
    .admin-body.admin-page-services-catalog .clients-pro-side-head,
    .admin-body.admin-page-services-catalog .clients-pro-side-nav {
        display: none !important;
    }

    /* Categories panel: remove oval, make compact */
    .services-categories-panel,
    .admin-body.admin-page-services-catalog .panel.services-categories-panel {
        position: static !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e0e3ea !important;
        box-shadow: none !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .services-categories-head {
        padding: 0.4rem 0.8rem 0 !important;
    }
    .services-categories-head h2 {
        font-size: 0.8rem !important;
        margin: 0 !important;
    }
    .services-add-category-link {
        display: none !important;
    }

    /* Categories: horizontal scroll */
    .services-categories-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0.35rem !important;
        padding: 0.35rem 0.8rem !important;
        padding-right: 1.5rem !important;
        scrollbar-width: none;
        scroll-snap-type: x proximity !important;
    }
    .services-categories-nav::-webkit-scrollbar {
        display: none;
    }
    .services-categories-nav a {
        white-space: nowrap !important;
        min-height: 30px !important;
        padding: 0.3rem 0.6rem !important;
        font-size: 0.76rem !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        scroll-snap-align: end !important;
    }
    .services-categories-nav a strong {
        min-width: 18px !important;
        min-height: 18px !important;
        padding: 0 0.3rem !important;
        font-size: 0.62rem !important;
    }
    .services-add-category-link {
        margin: 0.25rem 0.8rem 0.5rem !important;
        min-height: 30px !important;
        font-size: 0.76rem !important;
        padding: 0.3rem 0.65rem !important;
    }

    /* Grid: single column */
    .services-catalog-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 0 !important;
    }

    /* Header */
    .services-catalog-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
        padding: 0.7rem 0.8rem !important;
    }
    .services-catalog-hero h1 {
        font-size: 1.3rem !important;
    }
    .services-catalog-hero p {
        display: none !important;
    }
    .services-catalog-top-actions {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    /* Toolbar: vertical stack */
    .services-catalog-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.8rem !important;
    }
    .services-catalog-search {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .services-catalog-filter-pill,
    .services-catalog-filter-pill-center,
    .services-catalog-order-btn,
    .services-catalog-filter-button {
        min-height: 36px !important;
        max-height: 36px !important;
    }
    .services-catalog-filter-pill,
    .services-catalog-filter-pill-center,
    .services-catalog-filter-button {
        border-radius: 8px !important;
        border: 1px solid #d1d6de !important;
        background: #fff !important;
        font-size: 0.8rem !important;
        padding: 0 0.7rem !important;
    }

    /* Search box: compact mobile input */
    .services-catalog-search-box {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 0 !important;
        max-height: 36px !important;
        padding: 0 0.6rem 0 2rem !important;
        border-radius: 8px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: 1px solid #d8dce3 !important;
        background: #fff !important;
        align-items: center !important;
    }
    .services-catalog-search-box .services-catalog-search-icon {
        position: absolute !important;
        left: 0.5rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #9ca0ae !important;
        font-size: 0.95rem !important;
        pointer-events: none !important;
        display: flex !important;
    }
    .services-catalog-search-box input[type='search'] {
        height: 32px !important;
        min-height: 0 !important;
        max-height: 32px !important;
        font-size: 0.82rem !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        width: 100% !important;
        outline: none !important;
        color: #1a1d24 !important;
    }
    .services-catalog-search-box input[type='search']::placeholder {
        color: #9ca0ae !important;
    }

    /* Filter buttons full-width */
    .services-catalog-centers-menu,
    .services-catalog-menu-inline,
    .services-catalog-filter-button {
        width: 100% !important;
    }
    .services-catalog-filter-pill-center {
        min-width: 0 !important;
        width: 100% !important;
    }
    .services-catalog-order-btn {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Dropdown menus: prevent overflow on mobile */
    .services-catalog-menu {
        position: relative !important;
        width: 100% !important;
    }
    .services-catalog-menu-dropdown {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        z-index: 100 !important;
        box-sizing: border-box !important;
    }
    .services-catalog-menu-dropdown-centers {
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Catalog main content */
    .services-catalog-main {
        padding: 0.5rem 0.8rem !important;
        gap: 0.8rem !important;
    }
    .services-catalog-section {
        gap: 0.5rem !important;
    }
    .services-catalog-list {
        gap: 0.55rem !important;
    }
    .services-catalog-section-head {
        padding: 0.3rem 0 !important;
    }
    .services-catalog-section-head h2 {
        font-size: 0.95rem !important;
    }

    /* Service cards */
    .service-catalog-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.4rem !important;
        padding: 0.6rem 0.7rem !important;
        border-radius: 10px !important;
    }
    .service-catalog-card::before {
        width: 3px !important;
        border-radius: 8px 0 0 8px !important;
    }
    .service-catalog-main h3 {
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
        color: #171a20 !important;
    }
    .service-catalog-duration {
        font-size: 0.7rem !important;
        margin-top: 0.15rem !important;
        color: #6b7280 !important;
    }
    .service-catalog-price {
        font-size: 0.82rem !important;
        color: #171a20 !important;
    }

    /* Card menu dropdown: prevent overflow */
    .service-catalog-card-menu-dropdown {
        position: fixed !important;
        right: 0.5rem !important;
        left: auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Delete modal */
    .service-delete-dialog {
        width: calc(100vw - 1.5rem) !important;
        max-width: none !important;
    }
    .service-delete-actions {
        flex-direction: column !important;
    }
    .service-delete-actions .btn {
        width: 100% !important;
    }

    /* Category modal */
    .services-category-dialog {
        width: calc(100vw - 1rem) !important;
        max-width: none !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .team-pin-confirm {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        min-height: 0;
        gap: 1rem;
    }

    .team-pin-confirm-list li {
        text-align: left;
    }

    .team-permissions-matrix-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .team-permissions-matrix-head .btn {
        align-self: flex-start;
    }

    .team-permissions-matrix-table {
        min-width: 720px;
    }

    .sales-service-charge-price-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-gift-config-status {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-gift-toggle {
        align-self: flex-start;
    }

    .sales-gift-value-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-gift-value-remove {
        justify-self: flex-end;
    }

    .sales-receipt-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-tips-toggle-row,
    .sales-tips-summary-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-tips-switch {
        align-self: flex-start;
    }

    .sales-tips-summary-row .business-settings-edit-btn {
        align-self: flex-start;
    }

    .sales-tips-value-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-tips-value-remove {
        justify-self: flex-end;
    }

    .sales-receipt-numbering-search.services-catalog-search-box {
        max-width: none;
        flex: 1 1 auto;
    }

    .sales-receipt-numbering-head {
        display: none;
    }

    .sales-receipt-numbering-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.62rem;
        align-items: stretch;
    }

    .sales-receipt-numbering-check-col {
        display: none;
    }

    .appointment-resource-editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-resources-group-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .appointment-resources-search {
        max-width: none;
    }

    .appointment-resource-card {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-resource-card .service-catalog-card-menu {
        align-self: flex-end;
    }

    .appointment-resource-type-form {
        padding: 1.2rem 1.1rem 1.15rem;
    }

    .appointment-resource-type-name-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-resource-type-icon-picker summary {
        width: 100%;
    }

    .appointment-resource-type-icon-dropdown {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .appointment-status-form {
        padding: 1.1rem 1rem 1rem;
    }

    .appointment-status-name-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-status-icon-picker summary {
        width: 100%;
    }

    .appointment-status-icon-dropdown {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .appointment-closed-form {
        padding: 1.1rem 1rem 1rem;
    }

    .appointment-closed-range-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-closed-empty-card {
        min-height: 320px;
    }

    .appointment-closed-empty-card h3 {
        font-size: 1.35rem;
    }
}

/* ——— Clases Bungee (admin + público) ——— */
.admin-body.admin-page-bungee-classes .clients-pro-header.bungee-classes-header {
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-body.admin-page-bungee-classes .bungee-classes-week-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-body.admin-page-bungee-classes .bungee-classes-week-label {
    font-size: 0.95rem;
    color: var(--admin-muted, #5f6b7a);
    min-width: 9rem;
    text-align: center;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar {
    margin-top: 1rem;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(15, 35, 68, 0.06);
    border: 1px solid rgba(15, 35, 68, 0.06);
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-empty {
    margin: 0;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #6b7c93;
    font-size: 0.92rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-scroll {
    overflow-x: auto;
    padding: 0.75rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-grid {
    display: grid;
    grid-template-columns: 4.25rem repeat(var(--bungee-calendar-days, 7), minmax(9.5rem, 1fr));
    gap: 0.5rem;
    min-width: 58rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-corner {
    min-height: 2.5rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-day-head {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5f6b7a;
    text-align: center;
    padding: 0.35rem 0.25rem 0.55rem;
    border-bottom: 1px solid rgba(15, 35, 68, 0.08);
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7c93;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.65rem 0.5rem 0 0;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-slot {
    min-height: 7.5rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-cell.is-empty {
    min-height: 7.5rem;
    border: 2px dashed rgba(15, 35, 68, 0.12);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
    color: #9aa8b8;
    font-size: 0.78rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card {
    --bungee-class-accent: #0d9488;
    --bungee-class-border: rgba(13, 148, 136, 0.32);
    --bungee-class-bg-start: #dcf7f2;
    --bungee-class-bg-end: #ffffff;
    min-height: 7.5rem;
    border-radius: 14px;
    padding: 0.65rem 0.7rem 0.55rem;
    background: linear-gradient(
        165deg,
        var(--bungee-class-bg-start) 0%,
        var(--bungee-class-bg-end) 55%,
        #ffffff 100%
    );
    border: 1px solid var(--bungee-class-border);
    border-left: 4px solid var(--bungee-class-accent);
    box-shadow: 0 4px 14px rgba(15, 35, 68, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: relative;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card.is-full {
    border-color: color-mix(in srgb, var(--bungee-class-accent) 30%, #f59e0b 70%);
    border-left-color: #f59e0b;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--bungee-class-bg-start) 50%, #fef3c7) 0%,
        var(--bungee-class-bg-end) 100%
    );
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card.is-cancelled {
    opacity: 0.55;
    background: #f3f4f6;
    border-color: rgba(15, 35, 68, 0.1);
    border-style: dashed;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-status {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card.is-full .bungee-week-calendar-card-status {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card.is-cancelled .bungee-week-calendar-card-status {
    background: #94a3b8;
    box-shadow: none;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu-wrap {
    position: relative;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu-btn {
    border: none;
    background: transparent;
    color: #6b7c93;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
    border-radius: 6px;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu-btn:hover {
    background: rgba(15, 35, 68, 0.06);
    color: #1a3a5c;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 10.5rem;
    margin-top: 0.2rem;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid rgba(15, 35, 68, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 35, 68, 0.14);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu[hidden] {
    display: none !important;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu button,
.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu-action {
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #1a3a5c;
    cursor: pointer;
    width: 100%;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu button:hover,
.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu-action:hover {
    background: rgba(37, 99, 235, 0.08);
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-menu-action.is-danger {
    color: #b91c1c;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-time {
    margin: 0;
    font-size: 0.72rem;
    color: #5f6b7a;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f2344;
    line-height: 1.2;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-meta {
    margin: 0;
    font-size: 0.72rem;
    color: #6b7c93;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-meta .material-symbols-outlined {
    font-size: 0.95rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-pattern {
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5f6b7a;
    letter-spacing: 0.04em;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-foot {
    margin-top: auto;
    padding-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.72rem;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-cap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #1a3a5c;
    font-weight: 600;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-cap .material-symbols-outlined {
    font-size: 1rem;
    color: #6b7c93;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-tiers {
    display: inline-flex;
    gap: 0.2rem;
    font-size: 0.62rem;
    font-weight: 600;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-tiers .tier-40 {
    color: #0f766e;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-tiers .tier-60 {
    color: #b45309;
}

.admin-body.admin-page-bungee-classes .bungee-week-calendar-card-tiers .tier-100 {
    color: #1d4ed8;
}

.admin-body.admin-page-bungee-classes .bungee-classes-empty {
    margin: 0;
    font-size: 0.82rem;
    color: #8a97a8;
    text-align: center;
    padding: 0.75rem 0;
}

.admin-body.admin-page-bungee-classes .bungee-classes-detail-modal {
    max-width: 480px;
}

.admin-body.admin-page-bungee-classes .bungee-classes-detail-body .bungee-week-calendar-card-detail {
    display: block !important;
}

.admin-body.admin-page-bungee-classes .bungee-classes-detail-body .bungee-week-calendar-card-detail header h4 {
    margin: 0 0 0.25rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-detail-body .bungee-week-calendar-card-detail header p {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: #6b7c93;
}

.admin-body.admin-page-bungee-classes .bungee-classes-tier-breakdown {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-tier-breakdown li {
    border-radius: 8px;
    padding: 0.35rem 0.4rem;
    font-size: 0.68rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-tier-breakdown .tier-40 {
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
}

.admin-body.admin-page-bungee-classes .bungee-classes-tier-breakdown .tier-60 {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.admin-body.admin-page-bungee-classes .bungee-classes-tier-breakdown .tier-100 {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.admin-body.admin-page-bungee-classes .bungee-classes-booking-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-booking-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.72rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-booking-band {
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
}

.admin-body.admin-page-bungee-classes .bungee-classes-booking-band.band-40 {
    background: rgba(20, 184, 166, 0.15);
    color: #0f766e;
}

.admin-body.admin-page-bungee-classes .bungee-classes-booking-band.band-60 {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.admin-body.admin-page-bungee-classes .bungee-classes-booking-band.band-100 {
    background: rgba(37, 99, 235, 0.15);
    color: #1d4ed8;
}

.admin-body.admin-page-bungee-classes .bungee-classes-inline-form {
    display: inline;
    margin: 0;
}

.admin-body.admin-page-bungee-classes .bungee-classes-modal {
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: 520px;
    width: calc(100% - 2rem);
    box-shadow: 0 24px 60px rgba(15, 35, 68, 0.2);
}

.admin-body.admin-page-bungee-classes .bungee-classes-detail-modal {
    max-width: 400px;
}

.admin-body.admin-page-bungee-classes .bungee-classes-modal::backdrop {
    background: rgba(15, 35, 68, 0.45);
}

.admin-body.admin-page-bungee-classes .bungee-classes-modal-form {
    padding: 1.25rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-modal-form header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-modal-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7c93;
}

.admin-body.admin-page-bungee-classes .bungee-classes-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.admin-body.admin-page-bungee-classes .bungee-classes-package-card {
    border: 1px solid rgba(15, 35, 68, 0.08);
    border-radius: 14px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 35, 68, 0.05);
}

.admin-body.admin-page-bungee-classes .bungee-classes-package-status {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.admin-body.admin-page-bungee-classes .bungee-classes-package-status.is-available {
    background: rgba(34, 197, 94, 0.14);
    color: #166534;
}

.admin-body.admin-page-bungee-classes .bungee-classes-package-status.is-unavailable {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
}

.admin-body.admin-page-bungee-classes .bungee-classes-package-rules {
    display: grid;
    gap: 0.55rem;
    margin: 0.85rem 0;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}

.admin-body.admin-page-bungee-classes .bungee-classes-package-rules .form-group {
    margin: 0;
}

.admin-body.admin-page-bungee-classes .bungee-classes-package-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2563eb;
    margin: 0.35rem 0;
}

.admin-body.admin-page-bungee-classes .bungee-classes-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.bungee-booking-public {
    position: relative;
    background-image: var(--bungee-booking-bg);
    background-size: cover;
    background-position: center;
}

.bungee-booking-public-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
}

.bungee-booking-public-shell {
    position: relative;
    z-index: 1;
    padding: 0 0 0;
}

.bungee-booking-public-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    max-width: 920px;
    margin: 0 auto;
}

.bungee-booking-public-head h2 {
    color: #0f2344;
}

.bungee-booking-public-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1.25rem 0 1.5rem;
}

.bungee-booking-public-steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .bungee-booking-public-steps--4 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .bungee-booking-public-steps--4 button {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
        text-align: left;
    }

    .bungee-booking-public-steps--4 button span:not(.bungee-booking-public-step-num) {
        font-size: 0.75rem;
        font-weight: 600;
    }
}

.bungee-booking-public-steps button {
    border: 1px solid rgba(15, 35, 68, 0.12);
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.65rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: #5f6b7a;
    cursor: default;
}

.bungee-booking-public-steps button.is-active {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-weight: 600;
}

.bungee-booking-public-step-num {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
}

.bungee-booking-public-steps button:not(.is-active) .bungee-booking-public-step-num {
    background: #cbd5e1;
}

.bungee-booking-public-muted {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.bungee-booking-public-weight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bungee-booking-public-band {
    position: relative;
    border: 2px solid rgba(15, 35, 68, 0.1);
    border-radius: 14px;
    padding: 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.bungee-booking-public-band input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bungee-booking-public-band:has(input:checked) {
    border-color: #2563eb;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.bungee-booking-public-band.bungee-band-40:has(input:checked) {
    border-color: #14b8a6;
}

.bungee-booking-public-band.bungee-band-60:has(input:checked) {
    border-color: #f59e0b;
}

.bungee-booking-public-band.bungee-band-100:has(input:checked) {
    border-color: #2563eb;
}

.bungee-booking-public-band-cap {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.bungee-band-40 .bungee-booking-public-band-cap {
    background: rgba(20, 184, 166, 0.15);
    color: #0f766e;
}

.bungee-band-60 .bungee-booking-public-band-cap {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.bungee-band-100 .bungee-booking-public-band-cap {
    background: rgba(37, 99, 235, 0.15);
    color: #1d4ed8;
}

.bungee-booking-public-band strong {
    display: block;
    font-size: 0.95rem;
}

.bungee-booking-public-band small {
    color: #64748b;
    font-size: 0.75rem;
}

.bungee-booking-public-reception-note {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.88rem;
}

.bungee-booking-public-loading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #64748b;
    padding: 1rem 0;
}

.bungee-booking-public-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(37, 99, 235, 0.2);
    border-top-color: #2563eb;
    border-radius: 999px;
    animation: bungee-spin 0.8s linear infinite;
}

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

/* Class type picker */
.bungee-booking-public-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}

.bungee-booking-public-class-card {
    position: relative;
    text-align: left;
    border: 2px solid color-mix(in srgb, var(--class-accent, #d83f87) 25%, #e2e8f0);
    border-radius: 16px;
    padding: 1.1rem 1rem 0.9rem;
    background: linear-gradient(145deg, var(--class-bg, #fce7f3) 0%, #fff 72%);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    min-height: 7.5rem;
}

.bungee-booking-public-class-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--class-accent, #d83f87) 18%, transparent);
}

.bungee-booking-public-class-card.is-selected {
    border-color: var(--class-accent, #d83f87);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--class-accent, #d83f87) 22%, transparent);
}

.bungee-booking-public-class-card strong {
    display: block;
    font-size: 1.05rem;
    color: #0f2344;
    margin: 0.35rem 0 0.2rem;
    line-height: 1.25;
}

.bungee-booking-public-class-card small {
    display: block;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.35;
}

.bungee-booking-public-class-card em {
    display: block;
    margin-top: 0.55rem;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--class-accent, #d83f87);
}

.bungee-booking-public-class-card-badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    min-width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: var(--class-accent, #d83f87);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bungee-booking-public-class-card.is-teen::before {
    content: attr(data-teen-label);
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7c3aed;
    background: #ede9fe;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

/* Schedule picker: date strip + time cards */
.bungee-booking-public-selected-class {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.bungee-booking-selected-class-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.bungee-booking-public-selected-class strong {
    font-size: 0.95rem;
    color: #0f2344;
}

.bungee-booking-public-selected-class small {
    color: #64748b;
    font-size: 0.78rem;
}

.bungee-booking-public-date-strip-wrap {
    margin: 0 0 1rem;
    overflow: hidden;
}

.bungee-booking-public-date-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bungee-booking-public-date-strip::-webkit-scrollbar {
    display: none;
}

.bungee-booking-public-date-tab {
    flex: 0 0 auto;
    min-width: 4.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.55rem 0.45rem;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.bungee-booking-public-date-tab.is-active {
    border-color: #d83f87;
    background: linear-gradient(180deg, #fff5f9 0%, #fff 100%);
    box-shadow: 0 6px 16px rgba(216, 63, 135, 0.12);
}

.bungee-booking-date-weekday {
    font-size: 0.68rem;
    text-transform: capitalize;
    color: #94a3b8;
    font-weight: 600;
}

.bungee-booking-date-day {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f2344;
}

.bungee-booking-date-count {
    font-size: 0.65rem;
    color: #d83f87;
    font-weight: 700;
}

.bungee-booking-public-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 0.65rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.15rem;
    scrollbar-width: thin;
}

.bungee-booking-public-time-slot {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.7rem 0.75rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bungee-booking-public-time-slot:hover,
.bungee-booking-public-time-slot.is-selected {
    border-color: #d83f87;
    box-shadow: 0 8px 20px rgba(216, 63, 135, 0.14);
}

.bungee-booking-time-head {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.bungee-booking-time-head strong {
    font-size: 1.1rem;
    color: #0f2344;
}

.bungee-booking-time-head span {
    font-size: 0.72rem;
    color: #94a3b8;
}

.bungee-booking-total-badge {
    margin-left: auto;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
}

.bungee-booking-band-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.bungee-booking-band-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    padding: 0.18rem 0.38rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.bungee-booking-band-pill em {
    font-style: normal;
    color: #64748b;
    font-weight: 600;
}

.bungee-booking-band-pill strong {
    color: #0f2344;
    font-weight: 700;
}

.bungee-booking-band-pill.bungee-band-40:not(.is-full) {
    border-color: rgba(20, 184, 166, 0.35);
    background: #ecfdf5;
}

.bungee-booking-band-pill.bungee-band-60:not(.is-full) {
    border-color: rgba(234, 88, 12, 0.35);
    background: #fff7ed;
}

.bungee-booking-band-pill.bungee-band-100:not(.is-full) {
    border-color: rgba(37, 99, 235, 0.35);
    background: #eff6ff;
}

.bungee-booking-band-pill.is-full {
    opacity: 0.45;
}

.bungee-booking-public-slot-recap {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: linear-gradient(90deg, #fff5f9, #fff);
    border: 1px solid rgba(216, 63, 135, 0.2);
}

.bungee-booking-public-slot-recap strong {
    color: #0f2344;
}

.bungee-booking-public-slot-recap span {
    font-size: 0.85rem;
    color: #64748b;
}

.bungee-booking-public-band.is-full {
    opacity: 0.5;
    pointer-events: none;
}

.bungee-booking-public-band.is-recommended {
    border-color: #d83f87;
    box-shadow: 0 8px 24px rgba(216, 63, 135, 0.18);
}

.bungee-booking-public-overlay {
    background: linear-gradient(135deg, rgba(15, 35, 68, 0.4), rgba(216, 63, 135, 0.25));
}

.bungee-booking-public-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.bungee-booking-public-summary dt {
    font-weight: 600;
    color: #475569;
}

.bungee-booking-public-summary dd {
    margin: 0;
}

.bungee-booking-public-step-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

.bungee-booking-public-packages {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(15, 35, 68, 0.08);
}

.bungee-booking-public-packages ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.bungee-booking-public-packages li {
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    background: #f1f5f9;
    font-size: 0.82rem;
}

.bungee-booking-public-packages li span {
    float: right;
    font-weight: 700;
    color: #2563eb;
}

/* Bungee booking — premium studio flow */
@keyframes bk-fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bk-stagger-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bk-live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(0.85);
    }
}

@keyframes bk-shine {
    0% {
        transform: translateX(-120%) skewX(-18deg);
    }
    100% {
        transform: translateX(220%) skewX(-18deg);
    }
}

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

.bk-flow {
    --bk-accent: #ff6b35;
    --bk-accent-2: #d83f87;
    --bk-plum: #3b183f;
    --bk-ink: #1a2537;
    --bk-muted: #64748b;
    --bk-line: rgba(216, 63, 135, 0.12);
    --bk-surface: rgba(248, 250, 252, 0.92);
    --bk-radius: 20px;
    --bk-shadow: 0 28px 56px rgba(59, 24, 63, 0.14), 0 8px 20px rgba(216, 63, 135, 0.1);
}

.bk-flow .bungee-booking-public-card {
    --bk-ticket-notch: #fffaf8;
    position: relative;
    isolation: isolate;
    overflow: visible;
    max-width: min(1180px, 100%);
    min-height: min(680px, calc(100vh - 10rem));
    padding: clamp(1.5rem, 3vw, 2.35rem);
    border-radius: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 252, 250, 0.98) 42%,
        rgba(255, 245, 249, 0.96) 100%
    );
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 32px 64px rgba(59, 24, 63, 0.1),
        0 8px 24px rgba(216, 63, 135, 0.08);
    display: flex;
    flex-direction: column;
}

.bk-flow .bungee-booking-public-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bk-flow .bk-panel.is-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bk-flow .bk-schedule {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bk-flow .bk-class-list-shell {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-height: 0;
}

.bk-flow .bk-class-list-shell.is-scrollable {
    max-height: min(26rem, 52vh);
}

.bk-flow .bk-class-list-shell.is-scrollable.is-many {
    max-height: min(30rem, 58vh);
}

.bk-flow .bk-class-list-count {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bk-flow .bk-class-list-scroll-hint {
    margin: 0;
    padding: 0.15rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bk-muted);
    text-align: center;
}

.bk-flow .bk-class-list-shell.is-scrollable .bk-class-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.15rem;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}

.bk-flow .bk-class-list-shell.is-scrollable .bk-class-list::-webkit-scrollbar {
    width: 6px;
}

.bk-flow .bk-class-list-shell.is-scrollable .bk-class-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(216, 63, 135, 0.28);
}

.bk-flow .bk-class-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    flex: 0 0 auto;
    align-content: start;
    align-items: start;
    min-height: 0;
}

.bk-flow .bk-class-list.is-many {
    grid-template-columns: 1fr;
}

.bk-flow .bk-session-list {
    flex: 1;
    min-height: 16rem;
    max-height: none;
}

.bk-flow .bk-card-ambient {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(70px);
    opacity: 0.55;
}

.bk-flow .bk-card-ambient--rose {
    top: -100px;
    right: -40px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(216, 63, 135, 0.45) 0%, transparent 68%);
}

.bk-flow .bk-card-ambient--coral {
    bottom: -120px;
    left: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.35) 0%, transparent 70%);
}

.bk-flow .bungee-booking-public-form,
.bk-flow .bungee-booking-public-head {
    position: relative;
    z-index: 1;
}

.bk-flow .bungee-booking-public-overlay {
    background:
        linear-gradient(125deg, rgba(59, 24, 63, 0.78) 0%, rgba(216, 63, 135, 0.42) 48%, rgba(17, 22, 30, 0.55) 100%);
}

.bk-flow .lh-booking-head h2 {
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--bk-plum) 0%, var(--bk-accent-2) 55%, var(--bk-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bk-flow .lh-booking-head p {
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.65;
}

.bk-flow .bk-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.25rem;
    position: sticky;
    top: 0.65rem;
    z-index: 8;
    padding: 0 0 0.5rem;
}

.bk-flow .bk-progress.bk-progress--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bk-flow .bk-progress .lh-booking-progress-step {
    min-width: 0;
    width: 100%;
}

.bk-flow .lh-booking-progress-step {
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid rgba(216, 63, 135, 0.1);
    box-shadow: 0 2px 8px rgba(59, 24, 63, 0.03);
    overflow: hidden;
    transition: all 0.3s ease;
}

.bk-flow .lh-booking-progress-step::before {
    display: none;
}

.bk-flow .lh-booking-progress-step.is-locked {
    opacity: 0.88;
    background: #fff;
    border-color: rgba(148, 163, 184, 0.2);
}

.bk-flow .lh-booking-progress-step.is-locked .lh-booking-progress-step-number {
    background: #94a3b8;
    box-shadow: none;
}

@media (max-width: 900px) {
    .bk-flow .lh-booking-progress.bk-progress,
    .bk-flow .bk-progress.bk-progress--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bk-flow .lh-booking-progress-step.is-active {
    border-color: rgba(216, 63, 135, 0.65);
    background: linear-gradient(135deg, #fff 0%, rgba(255, 251, 253, 0.98) 100%);
    box-shadow: 0 8px 28px rgba(216, 63, 135, 0.18), inset 0 0 0 2px rgba(216, 63, 135, 0.12);
    transform: translateY(-1px);
}

.bk-flow .lh-booking-progress-step.is-active .lh-booking-progress-step-number {
    background: linear-gradient(135deg, var(--bk-accent-2) 0%, var(--bk-accent) 100%);
    box-shadow: 0 6px 18px rgba(216, 63, 135, 0.42);
    transform: scale(1.05);
}

.bk-flow .lh-booking-progress-step.is-complete {
    border-color: rgba(34, 197, 94, 0.35);
    background: #fff;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08), inset 0 0 0 2px rgba(34, 197, 94, 0.1);
    cursor: pointer;
}

.bk-flow .lh-booking-progress-step.is-complete:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.14), inset 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.bk-flow .lh-booking-progress-step.is-complete .lh-booking-progress-step-number {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.bk-flow .lh-booking-progress-step.is-active {
    cursor: default;
}

@media (max-width: 720px) {
    .bk-flow .bk-progress,
    .bk-flow .bk-progress.bk-progress--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.45rem;
        top: 0.35rem;
        padding-bottom: 0.65rem;
    }

    .bk-flow .lh-booking-progress-step {
        padding: 0.72rem 0.55rem;
        gap: 0.5rem;
        border-radius: 14px;
    }

    .bk-flow .lh-booking-progress-step-number {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    .bk-flow .lh-booking-progress-step-copy p {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        margin-bottom: 0.08rem;
    }

    .bk-flow .lh-booking-progress-step-copy strong {
        font-size: 0.82rem;
    }
}

@media (max-width: 420px) {
    .bk-flow .bk-progress,
    .bk-flow .bk-progress.bk-progress--4 {
        gap: 0.3rem;
    }

    .bk-flow .lh-booking-progress-step {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.55rem 0.3rem;
        gap: 0.3rem;
        border-radius: 12px;
    }

    .bk-flow .lh-booking-progress-step-number {
        width: 28px;
        height: 28px;
        font-size: 0.72rem;
        border-radius: 8px;
    }

    .bk-flow .lh-booking-progress-step-copy p {
        display: none;
    }

    .bk-flow .lh-booking-progress-step-copy strong {
        font-size: 0.7rem;
        line-height: 1.15;
    }
}

.bk-flow .bk-panel[hidden] {
    display: none !important;
}

.bk-flow .bk-panel--enter {
    animation: bk-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bk-flow .bk-stagger {
    animation: bk-stagger-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bk-flow .bk-panel-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.bk-flow .bk-panel-toolbar .bk-hint {
    margin: 0;
    flex: 1;
    min-width: 12rem;
}

.bk-flow .bk-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9d174d;
    background: linear-gradient(135deg, rgba(255, 241, 246, 0.98), rgba(255, 228, 240, 0.95));
    border: 1px solid rgba(216, 63, 135, 0.22);
    box-shadow: 0 4px 12px rgba(216, 63, 135, 0.1);
    white-space: nowrap;
}

.bk-flow .bk-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
    animation: bk-live-pulse 1.4s ease-in-out infinite;
}

.bk-flow .bk-live-pill.is-busy {
    color: #64748b;
    border-color: rgba(148, 163, 184, 0.35);
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.95));
}

.bk-flow .bk-live-pill.is-busy .bk-live-dot {
    background: #94a3b8;
    box-shadow: none;
    animation: none;
}

.bk-flow .bk-live-pill.is-pulse .bk-live-dot {
    animation: bk-live-pulse 0.55s ease-out 2;
}

.bk-flow .bk-hint {
    margin: 0 0 1rem;
    color: var(--bk-muted);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.bk-flow .bk-sessions-count {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bk-primary);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.95));
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.bk-flow .bk-sessions-count.is-flashing {
    animation: flashRed 0.6s ease-in-out;
}

.bk-flow .bk-sessions-count.is-complete {
    color: #059669;
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.98), rgba(167, 243, 208, 0.95));
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

@keyframes flashRed {
    0%, 100% {
        color: var(--bk-primary);
        background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.95));
        border-color: rgba(59, 130, 246, 0.22);
    }
    50% {
        color: #fff;
        background: #ef4444;
        border-color: #ef4444;
        transform: scale(1.05);
    }
}

.bk-flow .bk-empty {
    margin: 1.25rem 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--bk-muted);
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(255, 251, 253, 0.9));
    border-radius: 18px;
    border: 1.5px dashed rgba(216, 63, 135, 0.15);
    font-weight: 600;
    font-size: 0.9rem;
}

.bk-flow .bk-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem;
    color: var(--bk-muted);
    font-weight: 600;
}

.bk-flow .bk-loading[hidden] {
    display: none !important;
}

.bk-flow .bungee-booking-public-spinner {
    width: 28px;
    height: 28px;
    border-width: 3px;
    border-color: rgba(216, 63, 135, 0.18);
    border-top-color: var(--bk-accent-2);
    animation: bk-spin-glow 0.75s linear infinite;
}

.bk-flow .bk-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(216, 63, 135, 0.08);
    flex-wrap: wrap;
}

.bk-flow .bk-actions .btn-outline {
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    font-weight: 700;
    border: 1.5px solid rgba(216, 63, 135, 0.2);
    color: var(--bk-muted);
    background: transparent;
    box-shadow: 0 4px 12px rgba(59, 24, 63, 0.04);
    transition: all 0.25s ease;
}

.bk-flow .bk-actions .btn-outline:hover {
    transform: translateY(-1px);
    border-color: rgba(216, 63, 135, 0.5);
    color: var(--bungee-rose);
    background: rgba(216, 63, 135, 0.04);
    box-shadow: 0 8px 20px rgba(59, 24, 63, 0.08), 0 4px 10px rgba(216, 63, 135, 0.06);
}

.bk-flow .bk-actions .btn-primary {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 999px;
    min-width: 11rem;
    padding: 0.72rem 1.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--bk-accent-2) 0%, var(--bk-accent) 100%);
    box-shadow: 0 14px 32px rgba(216, 63, 135, 0.32), 0 6px 14px rgba(59, 24, 63, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bk-flow .bk-actions .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 48%,
        transparent 100%
    );
    transform: translateX(-120%) skewX(-18deg);
    animation: bk-shine 3.5s ease-in-out infinite;
}

.bk-flow .bk-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(216, 63, 135, 0.38), 0 8px 18px rgba(59, 24, 63, 0.14);
}

.bk-flow .bk-actions .btn-lg {
    padding: 0.85rem 1.75rem;
    font-size: 1.02rem;
}

@media (min-width: 900px) {
    .bk-flow .bk-class-list:not(.is-many) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .bk-flow .bk-class-list.is-many {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bk-flow .bk-class-row {
    --bk-class-radius: 22px;
    position: relative;
    display: grid;
    grid-template-columns: 5px clamp(6.5rem, 33%, 9.25rem) minmax(0, 1fr) 2.35rem;
    grid-template-areas: "accent media body chevron";
    align-items: stretch;
    align-self: start;
    gap: 0;
    width: 100%;
    min-height: 6.25rem;
    max-height: 6.75rem;
    height: auto;
    text-align: left;
    padding: 0;
    border: 1.5px solid rgba(216, 63, 135, 0.22);
    border-radius: var(--bk-class-radius);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(59, 24, 63, 0.07), 0 2px 6px rgba(216, 63, 135, 0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.bk-flow .bk-class-row::before {
    display: none;
}

.bk-flow .bk-class-row-accent {
    grid-area: accent;
    display: block;
    width: 100%;
    min-height: 100%;
    background: linear-gradient(180deg, var(--row-accent, var(--bk-accent-2)) 0%, var(--bk-accent, #ff6b35) 100%);
    border-radius: var(--bk-class-radius) 0 0 var(--bk-class-radius);
}

.bk-flow .bk-class-row.is-teen .bk-class-row-accent {
    background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
}

.bk-flow .bk-class-row:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(216, 63, 135, 0.38);
    box-shadow: 0 16px 36px rgba(59, 24, 63, 0.12), 0 4px 12px rgba(216, 63, 135, 0.1);
    box-shadow: 0 18px 40px rgba(59, 24, 63, 0.12), 0 6px 16px rgba(216, 63, 135, 0.12);
}

.bk-flow .bk-class-list:has(.bk-class-row.is-selected) .bk-class-row:not(.is-selected) {
    opacity: 0.48;
    filter: saturate(0.65) grayscale(0.08);
    border-color: rgba(216, 63, 135, 0.14);
    box-shadow: 0 6px 18px rgba(15, 35, 68, 0.05);
}

.bk-flow .bk-class-row.is-selected {
    opacity: 1;
    filter: none;
    transform: translateY(-4px) scale(1.012);
    border-color: rgba(216, 63, 135, 0.78);
    background: linear-gradient(105deg, #fff0f7 0%, #fff 38%, #fff 100%);
    box-shadow:
        0 0 0 4px rgba(216, 63, 135, 0.22),
        0 26px 52px rgba(216, 63, 135, 0.3);
    z-index: 3;
    grid-template-columns: 8px clamp(6.5rem, 33%, 9.25rem) minmax(0, 1fr) 2.35rem;
}

.bk-flow .bk-class-row.is-selected .bk-class-row-accent {
    width: 100%;
    box-shadow:
        inset -3px 0 0 rgba(255, 255, 255, 0.45),
        4px 0 14px rgba(216, 63, 135, 0.35);
}

.bk-flow .bk-class-row.is-selected .bk-class-row-body strong {
    color: var(--bk-accent-2);
    font-size: 1.02em;
}

.bk-flow .bk-class-row.is-selected .bk-class-row-meta {
    color: var(--bk-accent-2);
}

.bk-flow .bk-class-row.is-selected .bk-chevron {
    color: var(--bk-accent-2);
    transform: translateX(5px) scale(1.12);
}

.bk-flow .bk-weight-filter:not([hidden]) {
    animation: bk-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bk-flow .bk-class-card-media {
    grid-area: media;
    position: relative;
    display: block;
    min-height: 6.25rem;
    max-height: 6.75rem;
    overflow: hidden;
    border-radius: 0;
    background: #f1f5f9;
}

.bk-flow .bk-class-card-media img {
    width: 100%;
    height: 100%;
    min-height: 6.25rem;
    max-height: 6.75rem;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.35s ease;
}

.bk-flow .bk-class-row:hover .bk-class-card-media img {
    transform: scale(1.05);
}

.bk-flow .bk-class-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 35, 68, 0.02) 0%, rgba(15, 35, 68, 0.18) 100%);
    pointer-events: none;
}

.bk-flow .bk-class-card-media--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bk-flow .bk-class-card-badge {
    position: absolute;
    left: 0.45rem;
    bottom: 0.45rem;
    z-index: 1;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.22rem 0.42rem;
    border-radius: 999px;
    background: rgba(91, 33, 182, 0.88);
    box-shadow: 0 4px 12px rgba(91, 33, 182, 0.35);
}

.bk-flow .bk-class-row-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(145deg, var(--row-accent, var(--bk-accent-2)), color-mix(in srgb, var(--row-accent, var(--bk-accent-2)) 70%, #000));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--row-accent, var(--bk-accent-2)) 35%, transparent);
}

.bk-flow .bk-class-row.is-teen .bk-class-row-icon {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.bk-flow .bk-class-row-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.9rem 0.65rem 0.9rem 0.95rem;
    min-width: 0;
}

.bk-flow .bk-class-row-body strong {
    display: block;
    color: var(--bk-plum);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

.bk-flow .bk-class-row-body small {
    display: block;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
}

.bk-flow .bk-class-row-spots,
.bk-flow .bk-class-row-times {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.4rem;
    font-style: normal;
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    color: #9d174d;
    background: #fce7f3;
    border: 1px solid rgba(216, 63, 135, 0.14);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-flow .bk-class-row-meta {
    grid-area: chevron;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.65rem 0 0;
    color: var(--bk-muted);
    align-self: center;
}

.bk-flow .bk-chevron {
    color: #cbd5e1;
    transition: transform 0.2s, color 0.2s;
}

.bk-flow .bk-class-row:hover .bk-chevron {
    color: var(--bk-accent-2);
    transform: translateX(3px);
}

@media (max-width: 899px) {
    .bk-flow .bk-class-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 720px) {
    .bk-flow .bk-class-row {
        --bk-class-radius: 18px;
        grid-template-columns: 4px clamp(5.5rem, 32%, 7.5rem) minmax(0, 1fr) 2rem;
        min-height: 5.85rem;
        max-height: 6.35rem;
        box-shadow: 0 6px 20px rgba(59, 24, 63, 0.09), 0 2px 8px rgba(216, 63, 135, 0.08);
    }

    .bk-flow .bk-class-card-media,
    .bk-flow .bk-class-card-media img {
        min-height: 5.85rem;
        max-height: 6.35rem;
    }

    .bk-flow .bk-class-row-body {
        padding: 0.75rem 0.5rem 0.75rem 0.8rem;
    }

    .bk-flow .bk-class-row-body strong {
        font-size: 0.92rem;
        line-height: 1.3;
    }

    .bk-flow .bk-class-row-body small {
        font-size: 0.72rem;
    }

    .bk-flow .bk-class-row-spots,
    .bk-flow .bk-class-row-times {
        font-size: 0.62rem;
        padding: 0.28rem 0.55rem;
        border-radius: 999px;
    }

    .bk-flow .bk-chevron {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 400px) {
    .bk-flow .bk-class-row {
        grid-template-columns: 4px clamp(5rem, 30%, 6.5rem) minmax(0, 1fr) 1.65rem;
        min-height: 5.65rem;
        max-height: 6.1rem;
        border-radius: 14px;
    }

    .bk-flow .bk-class-card-media,
    .bk-flow .bk-class-card-media img {
        min-height: 5.65rem;
        max-height: 6.1rem;
    }

    .bk-flow .bk-class-row-body {
        padding: 0.6rem 0.4rem 0.6rem 0.7rem;
    }

    .bk-flow .bk-class-row-body strong {
        font-size: 0.84rem;
        line-height: 1.25;
    }

    .bk-flow .bk-class-row-body small {
        font-size: 0.68rem;
    }

    .bk-flow .bk-class-row-spots,
    .bk-flow .bk-class-row-times {
        font-size: 0.58rem;
        padding: 0.22rem 0.45rem;
        white-space: normal;
        text-align: left;
    }
}

.bk-flow .bk-class-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1.15rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 251, 253, 0.98), rgba(255, 255, 255, 0.96));
    border: 2px solid rgba(216, 63, 135, 0.35);
    box-shadow: 0 8px 24px rgba(59, 24, 63, 0.08), 0 2px 6px rgba(216, 63, 135, 0.08);
    position: relative;
    overflow: hidden;
}

.bk-flow .bk-class-chip-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(216, 63, 135, 0.15);
    border-radius: 14px;
    flex: 1 1 auto;
}

.bk-flow .bk-class-chip-main--package {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(240, 253, 244, 0.6);
}

.bk-flow .bk-class-chip-main--single {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(239, 246, 255, 0.6);
}

.bk-flow .bk-class-chip-copy {
    min-width: 0;
}

.bk-flow .bk-class-chip-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--bungee-rose, #d83f87), var(--bungee-coral, #ff7a59));
    box-shadow: 0 6px 16px rgba(216, 63, 135, 0.25);
}

.bk-flow .bk-class-chip-copy strong {
    display: block;
    color: var(--bk-ink);
}

.bk-flow .bk-class-chip-copy small {
    display: block;
    color: var(--bk-muted);
    font-size: 0.8rem;
}

.bk-flow .bk-class-chip-weight {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.12rem;
    padding: 0.4rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(216, 63, 135, 0.2);
    background: #fff;
    text-align: right;
}

.bk-flow .bk-class-chip-weight em {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.bk-flow .bk-class-chip-weight strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--bk-ink);
    line-height: 1.2;
}

.bk-flow .bk-class-chip-weight.bungee-band-40 {
    border-color: rgba(20, 184, 166, 0.35);
    background: linear-gradient(180deg, #f0fdfa 0%, #fff 100%);
}

.bk-flow .bk-class-chip-weight.bungee-band-60 {
    border-color: rgba(234, 88, 12, 0.35);
    background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
}

.bk-flow .bk-class-chip-weight.bungee-band-100 {
    border-color: rgba(37, 99, 235, 0.35);
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

@media (max-width: 520px) {
    .bk-flow .bk-class-chip {
        flex-direction: column;
        align-items: stretch;
    }

    .bk-flow .bk-class-chip-weight {
        align-items: flex-start;
        text-align: left;
    }
}

.bk-flow .bk-date-carousel {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.bk-flow .bk-date-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.35rem 0.15rem 0.5rem;
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.bk-flow .bk-date-scroll::-webkit-scrollbar {
    display: none;
}

.bk-flow .bk-date-nav {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bk-flow .bk-date-nav svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.bk-flow .bk-date-nav svg path {
    fill: #6366f1;
}

.bk-flow .bk-date-nav:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: #6366f1;
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

.bk-flow .bk-date-nav:hover:not(:disabled) svg path {
    fill: #4f46e5;
}

.bk-flow .bk-date-nav:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
    background: #f1f5f9;
    border-color: rgba(226, 232, 240, 0.5);
}

.bk-flow .bk-date-nav:disabled svg path {
    fill: #94a3b8;
}

.bk-flow .bk-date-scroll-hint {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: center;
}

.bk-flow .bk-date-scroll-hint[hidden] {
    display: none !important;
}

.bk-flow .bk-week {
    display: flex;
    gap: 0.55rem;
    width: max-content;
    min-width: 100%;
    padding-inline: 0.15rem;
}

.bk-flow .bk-date-sentinel {
    flex: 0 0 auto;
    min-width: 4.5rem;
    min-height: 5.5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--bk-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.bk-flow .bk-date-sentinel-dots {
    letter-spacing: 0.2em;
    color: var(--bk-accent-2);
    font-size: 0.85rem;
}

.bk-flow .bk-week-day {
    position: relative;
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding: 0.85rem 0.65rem 0.75rem;
    border: 2px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    scroll-snap-align: center;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bk-flow .bk-week-day::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bk-flow .bk-week-day:hover {
    transform: translateY(-3px);
    border-color: #6366f1;
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.15);
}

.bk-flow .bk-week-day:hover::before {
    opacity: 1;
}

.bk-flow .bk-week-day.is-active {
    border-color: #6366f1;
    border-width: 3px;
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 16px 36px rgba(99, 102, 241, 0.25);
    transform: translateY(-3px) scale(1.05);
}

.bk-flow .bk-week-day.is-active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
}

.bk-flow .bk-week-day.is-active .bk-week-day-name {
    color: #6366f1;
}

.bk-flow .bk-week-day.is-active .bk-week-day-num {
    color: #4f46e5;
}

.bk-flow .bk-week-day-name {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

.bk-flow .bk-week-day-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: #334155;
    line-height: 1;
    letter-spacing: -0.04em;
}

.bk-flow .bk-week-day-month {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    text-transform: capitalize;
}

.bk-flow .bk-week-day-dots {
    position: absolute;
    bottom: 0;
    left: -0.55rem;
    right: -0.55rem;
    display: block;
    width: auto;
    height: 5px;
    background: var(--bk-accent-2);
    border-radius: 0 0 18px 18px;
    font-size: 0;
    letter-spacing: 0;
    line-height: 0;
    color: transparent;
}

.bk-flow .bk-week-day-semaphore {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 0.25rem;
}

.bk-flow .bk-week-day-light {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: all 0.3s ease;
}

.bk-flow .bk-week-day-light.is-on {
    box-shadow: 0 0 8px currentColor;
}

.bk-flow .bk-week-day-light:nth-child(1).is-on {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #22c55e;
}

.bk-flow .bk-week-day-light:nth-child(2).is-on {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #eab308;
}

.bk-flow .bk-week-day-light:nth-child(3).is-on {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ef4444;
}

.bk-flow .bk-week-day-spots {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--bk-muted);
    margin-top: 0.15rem;
    letter-spacing: 0.02em;
}

.bk-flow .bk-day-heading {
    margin: 0 0 0.75rem;
    padding-left: 0.15rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--bk-plum);
    text-transform: capitalize;
    letter-spacing: -0.02em;
}

.bk-flow .bk-session-list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    overflow-y: auto;
    padding-right: 0.2rem;
    scrollbar-width: thin;
}

.bk-flow .bk-session-row {
    display: grid;
    grid-template-columns: 5.25rem 1fr;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 1.1rem 1.4rem !important;
    border: 1.5px solid rgba(216, 63, 135, 0.15);
    border-radius: var(--bk-radius);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 253, 0.96));
    box-shadow: 0 4px 12px rgba(59, 24, 63, 0.04);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    position: relative;
    cursor: pointer;
}

.bk-flow .bk-session-row:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 63, 135, 0.3);
    box-shadow: 0 12px 28px rgba(59, 24, 63, 0.1), 0 4px 10px rgba(216, 63, 135, 0.08);
}

.bk-flow .bk-session-row.is-selected {
    border: 3px solid var(--bungee-rose, #d83f87);
    background: linear-gradient(135deg, rgba(216, 63, 135, 0.08), rgba(168, 85, 247, 0.05));
    box-shadow: 0 4px 16px rgba(216, 63, 135, 0.25);
}

.bk-flow .bk-session-row.is-selected .bk-session-time {
    background: linear-gradient(135deg, #d83f87 0%, #c026d3 50%, #a855f7 100%);
    box-shadow: 0 6px 16px rgba(216, 63, 135, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-color: rgba(216, 63, 135, 0.5);
}

.bk-flow .bk-session-row.is-selected .bk-session-time strong,
.bk-flow .bk-session-row.is-selected .bk-session-time small {
    color: #fff;
}

.bk-flow .bk-session-row.is-selected .bk-session-cap-label {
    color: var(--bungee-rose, #d83f87);
    font-weight: 600;
}

.bk-flow .bk-session-row.is-selected .bk-band-card.is-picked {
    border-color: rgba(216, 63, 135, 0.55);
}

.bk-flow .bk-session-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #d83f87, #c026d3);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(216, 63, 135, 0.5);
    z-index: 2;
}

.bk-flow .bk-class-row.is-selected::after {
    content: "\2714";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #d83f87, #a855f7);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(216, 63, 135, 0.4);
    z-index: 2;
}

.bk-flow .bk-session-row--pickable {
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

/* Vista semanal de horarios */
.bk-flow .bk-weekly-schedule {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    width: 100%;
}

.bk-flow .bk-weekly-day {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bk-flow .bk-weekly-day-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bk-text);
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(216, 63, 135, 0.08), rgba(216, 63, 135, 0.04));
    border-radius: var(--bk-radius);
    text-align: center;
}

.bk-flow .bk-weekly-day-slots {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bk-flow .bk-weekly-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid rgba(15, 35, 68, 0.08);
    border-radius: var(--bk-radius);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 253, 0.96));
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 24, 63, 0.04);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
    text-align: left;
}

.bk-flow .bk-weekly-slot:hover {
    border-color: rgba(216, 63, 135, 0.4);
    box-shadow: 0 8px 20px rgba(59, 24, 63, 0.08), 0 4px 10px rgba(216, 63, 135, 0.08);
    transform: translateY(-1px);
}

.bk-flow .bk-weekly-slot.is-selected {
    border-color: rgba(216, 63, 135, 0.6);
    box-shadow:
        0 0 0 1px rgba(216, 63, 135, 0.2),
        0 12px 28px rgba(59, 24, 63, 0.12),
        0 4px 10px rgba(216, 63, 135, 0.1);
}

.bk-flow .bk-weekly-slot-time {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bk-text);
}

.bk-flow .bk-weekly-slot-cap {
    font-size: 0.8rem;
    color: var(--bk-muted);
}

.bk-flow .bk-session-row--pickable:hover {
    border-color: rgba(216, 63, 135, 0.28);
    box-shadow: 0 12px 28px rgba(59, 24, 63, 0.08);
    transform: translateY(-1px);
}

.bk-flow .bk-weight-filter {
    flex: 0 0 auto;
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px dashed rgba(216, 63, 135, 0.18);
}

.bk-flow .bk-weight-filter[hidden] {
    display: none !important;
}

.bk-flow .bk-weight-filter-hint {
    margin-bottom: 0.65rem;
    font-weight: 600;
}

.bk-flow .bk-weight-filter-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.bk-flow .bk-weight-filter-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: 0.65rem 0.5rem;
    border-radius: 16px;
    border: 1.5px solid rgba(216, 63, 135, 0.15);
    background: #fff;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.2s;
}

.bk-flow .bk-weight-filter-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 24, 63, 0.08);
}

.bk-flow .bk-weight-filter-chip-label {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--bk-ink);
    text-align: center;
}

.bk-flow .bk-weight-filter-chip.is-active {
    border-color: rgba(216, 63, 135, 0.5);
    background: linear-gradient(180deg, #fff9fc 0%, #fff 100%);
    box-shadow: inset 0 0 0 2px rgba(216, 63, 135, 0.12);
}

.bk-flow .bk-weight-filter-chip.bungee-band-40.is-active {
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: inset 0 0 0 2px rgba(20, 184, 166, 0.14);
}

.bk-flow .bk-weight-filter-chip.bungee-band-60.is-active {
    border-color: rgba(234, 88, 12, 0.5);
    box-shadow: inset 0 0 0 2px rgba(234, 88, 12, 0.14);
}

.bk-flow .bk-weight-filter-chip.bungee-band-100.is-active {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.14);
}

@media (max-width: 520px) {
    .bk-flow .bk-weight-filter-chips {
        grid-template-columns: 1fr;
    }
}

.bk-flow .bk-session-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    min-height: 4.2rem;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(99, 102, 241, 0.3);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bk-flow .bk-session-row:hover .bk-session-time {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
}

.bk-flow .bk-session-time strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.bk-flow .bk-session-time small {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.bk-flow .bk-session-cap-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.35rem;
}

.bk-flow .bk-last-spots-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #ff1a1a, #cc0000);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(204, 0, 0, 0.3);
    z-index: 5;
    pointer-events: none;
    letter-spacing: 0.03em;
    line-height: 1.2;
    animation: bk-flash 1.1s ease-in-out infinite;
}

.bk-flow .bk-already-booked-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
    z-index: 5;
    pointer-events: none;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.bk-flow .bk-session-row--booked {
    opacity: 0.65;
    cursor: not-allowed;
    border: 1px dashed rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.04);
}

.bk-flow .bk-session-row--booked .bk-session-time {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
}

.bk-flow .bk-session-row--booked .bk-session-time strong,
.bk-flow .bk-session-row--booked .bk-session-time small {
    color: #fff;
}

.bk-flow .bk-session-row--booked .bk-session-cap-label {
    color: #059669;
    font-weight: 600;
}

.bk-flow .bk-capacity-track {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #e8edf3;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.bk-flow .bk-capacity-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.bk-flow .bk-capacity-track.is-mid span {
    background: linear-gradient(90deg, #f59e0b, #ea580c);
}

.bk-flow .bk-capacity-track.is-high span {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

@keyframes bk-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.bk-flow .bk-capacity-track.is-flash span {
    animation: bk-flash 1.1s ease-in-out infinite;
}

.bk-flow .bk-session-cap-block {
    margin-bottom: 0.55rem;
}

.bk-flow .bk-weight-bands,
.bk-flow .bk-weight-filter {
    display: none !important;
}

.bk-flow .bk-weight-bands {
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(216, 63, 135, 0.14);
}

.bk-flow .bk-weight-bands-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bk-plum);
}

.bk-flow .bk-weight-icon {
    color: var(--bk-accent-2);
    flex-shrink: 0;
}

.bk-flow .bk-band-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.bk-flow .bk-band-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.55rem 0.6rem 0.6rem;
    border-radius: 14px;
    border: 1.5px solid rgba(216, 63, 135, 0.18);
    background: rgba(255, 255, 255, 0.98);
    min-width: 0;
    box-shadow: 0 2px 10px rgba(59, 24, 63, 0.04);
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.bk-flow button.bk-band-card:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: rgba(216, 63, 135, 0.3);
    box-shadow: 0 10px 24px rgba(59, 24, 63, 0.1);
}

.bk-flow button.bk-band-card:not(:disabled):active {
    transform: translateY(0);
}

.bk-flow button.bk-band-card.is-picked,
.bk-flow button.bk-band-card:not(:disabled):focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(216, 63, 135, 0.35),
        0 10px 24px rgba(216, 63, 135, 0.16);
}

.bk-flow button.bk-band-card.is-picked::after {
    content: "\2714";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #d83f87, #a855f7);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(216, 63, 135, 0.4);
    z-index: 2;
}

.bk-flow button.bk-band-card:disabled {
    cursor: not-allowed;
}

.bk-flow .bk-band-card-kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.bk-flow .bk-band-card-range {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--bk-plum);
}

.bk-flow .bk-band-card .bk-capacity-track {
    width: 100%;
    margin: 0.15rem 0 0.25rem;
    height: 6px;
}

.bk-flow .bk-band-card-spots {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: 0.1rem;
    line-height: 1.2;
}

.bk-flow .bk-band-card-free {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
}

.bk-flow .bk-band-card-free strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bk-accent-2);
    margin-right: 0.1rem;
}

.bk-flow .bk-band-card-occ {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: #334155;
    background: rgba(15, 35, 68, 0.08);
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 35, 68, 0.1);
}

.bk-flow .bk-band-card.is-full .bk-band-card-free,
.bk-flow .bk-band-card.is-full .bk-band-card-free strong {
    color: #64748b;
}

.bk-flow .bk-band-card.is-full {
    opacity: 0.72;
}

.bk-flow .bk-band-card.bungee-band-40:not(.is-full) {
    border-color: rgba(20, 184, 166, 0.4);
    background: linear-gradient(180deg, #f0fdfa 0%, #fff 100%);
}

.bk-flow .bk-band-card.bungee-band-60:not(.is-full) {
    border-color: rgba(234, 88, 12, 0.4);
    background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
}

.bk-flow .bk-band-card.bungee-band-100:not(.is-full) {
    border-color: rgba(37, 99, 235, 0.4);
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.bk-flow .bk-weight-row-copy em {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    font-style: normal;
    margin-bottom: 0.1rem;
}

@media (max-width: 720px) {
    .bk-flow .bk-band-cards {
        grid-template-columns: 1fr;
    }
}

.bk-flow .bk-band-meters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bk-flow .bk-band-meter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-line);
}

.bk-flow .bk-band-meter .bk-capacity-track {
    width: 2.2rem;
    margin: 0;
    height: 4px;
}

.bk-flow .bk-band-meter.is-full {
    opacity: 0.45;
}

.bk-flow .bk-band-meter.bungee-band-40:not(.is-full) {
    border-color: rgba(20, 184, 166, 0.35);
}

.bk-flow .bk-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 768px) {
    .bk-flow .bk-schedule-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .bk-flow .bk-schedule-summary-col {
        order: -1;
    }
}

.bk-flow .bk-schedule-col {
    min-width: 0;
}

.bk-flow .bk-schedule-summary-col {
    position: sticky;
    top: 1rem;
}

/* Selected sessions summary */
.bk-flow .bk-selected-sessions-summary {
    margin: 0.75rem 0 1rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);
    border: 2px solid #86efac;
    border-left: 5px solid #16a34a;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.1), 0 0 0 3px rgba(34, 197, 94, 0.08);
}

.bk-flow .bk-selected-sessions-summary.is-scrollable {
    max-height: calc(100vh - 340px);
    display: flex;
    flex-direction: column;
}

.bk-flow .bk-selected-sessions-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.bk-flow .bk-selected-sessions-summary__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #15803d;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bk-flow .bk-selected-sessions-summary__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    background: var(--bk-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
    vertical-align: middle;
}

.bk-flow .bk-selected-sessions-summary__count.is-flashing {
    animation: flashRed 0.6s ease-in-out;
}

@keyframes flashRed {
    0%, 100% {
        background: var(--bk-primary);
    }
    50% {
        background: #ef4444;
        transform: scale(1.15);
    }
}

.bk-flow .bk-selected-sessions-summary__price {
    font-size: 1rem;
    font-weight: 800;
    color: #16a34a;
}

.bk-flow .bk-selected-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 35, 68, 0.25) rgba(15, 35, 68, 0.03);
}

.bk-flow .bk-selected-sessions-list::-webkit-scrollbar {
    width: 8px;
}

.bk-flow .bk-selected-sessions-list::-webkit-scrollbar-track {
    background: rgba(15, 35, 68, 0.05);
    border-radius: 4px;
}

.bk-flow .bk-selected-sessions-list::-webkit-scrollbar-thumb {
    background: rgba(15, 35, 68, 0.25);
    border-radius: 4px;
    border: 2px solid rgba(15, 35, 68, 0.05);
}

.bk-flow .bk-selected-sessions-list::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 35, 68, 0.35);
}

.bk-flow .bk-selected-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: #ffffff;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.06);
}

.bk-flow .bk-selected-session-item__date {
    font-weight: 700;
    color: #166534;
}

.bk-flow .bk-selected-session-item__time {
    font-weight: 600;
    color: #15803d;
    margin-left: 0.5rem;
}

.bk-flow .bk-selected-session-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bk-flow .bk-selected-session-item__remove:hover {
    background: #fecaca;
    transform: scale(1.05);
}

.bk-flow .bk-selected-session-item__remove:active {
    transform: scale(0.95);
}

.bk-flow .bk-band-meter.bungee-band-60:not(.is-full) {
    border-color: rgba(234, 88, 12, 0.35);
}

.bk-flow .bk-band-meter.bungee-band-100:not(.is-full) {
    border-color: rgba(37, 99, 235, 0.35);
}

.bk-flow .bk-session-cta {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bk-accent-2), var(--bk-accent));
    box-shadow: 0 6px 16px rgba(216, 63, 135, 0.28);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.25s, transform 0.25s;
}

.bk-flow .bk-session-row:hover .bk-session-cta,
.bk-flow .bk-session-row.is-selected .bk-session-cta {
    opacity: 1;
    transform: translateX(0);
}

.bk-flow .bk-weight-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.bk-flow .bk-weight-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.4rem 0.85rem;
    align-items: center;
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 254, 0.94));
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.bk-flow .bk-weight-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(59, 24, 63, 0.06);
}

.bk-flow .bk-weight-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bk-flow .bk-weight-row .bk-capacity-track {
    grid-column: 1 / -1;
}

.bk-flow .bk-weight-row:has(input:checked),
.bk-flow .bk-weight-row.is-recommended {
    border-color: rgba(216, 63, 135, 0.4);
    box-shadow:
        0 0 0 1px rgba(216, 63, 135, 0.1),
        0 14px 32px rgba(216, 63, 135, 0.16);
    background: linear-gradient(135deg, #fff9fc 0%, #fff 100%);
}

.bk-flow .bk-weight-row.is-full {
    opacity: 0.5;
    pointer-events: none;
}

.bk-flow .bk-weight-row-icon {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: #14b8a6;
}

.bk-flow .bk-weight-row.bungee-band-60 .bk-weight-row-icon {
    background: #ea580c;
}

.bk-flow .bk-weight-row.bungee-band-100 .bk-weight-row-icon {
    background: #2563eb;
}

.bk-flow .bk-weight-row-copy strong {
    color: var(--bk-ink);
}

.bk-flow .bk-weight-row-copy small {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #334155;
    background: rgba(15, 35, 68, 0.07);
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 35, 68, 0.1);
}

.bk-flow .bk-weight-row-cap {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--bk-accent-2);
    white-space: nowrap;
}

.bk-flow .bk-weight-input {
    max-width: 240px;
}

.bk-flow .bk-weight-input input {
    border-radius: 14px;
    border: 1px solid var(--bk-line);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bk-flow .bk-weight-input input:focus {
    border-color: rgba(216, 63, 135, 0.45);
    box-shadow: 0 0 0 4px rgba(216, 63, 135, 0.12);
    outline: none;
}

.bk-flow .bk-note {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    font-size: 0.88rem;
}

.bk-flow .bk-note--warn {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.bk-flow .bk-ticket--booking {
    position: relative;
    margin-bottom: 1.35rem;
    padding: 0;
    border-radius: 20px;
    border: 1px solid rgba(216, 63, 135, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 38%),
        repeating-linear-gradient(
            -24deg,
            transparent,
            transparent 11px,
            rgba(216, 63, 135, 0.018) 11px,
            rgba(216, 63, 135, 0.018) 12px
        ),
        linear-gradient(145deg, #fffefb 0%, #fff7fb 42%, #fff4ec 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 0 rgba(255, 255, 255, 0.65) inset,
        0 18px 44px rgba(59, 24, 63, 0.12),
        0 6px 16px rgba(216, 63, 135, 0.14);
    overflow: hidden;
}

.bk-flow .bk-ticket--booking::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 15px;
    border: 1px dashed rgba(216, 63, 135, 0.14);
    pointer-events: none;
    z-index: 0;
}

.bk-flow .bk-ticket-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    grid-template-rows: auto auto 1fr;
    min-height: 11rem;
}

.bk-flow .bk-ticket-inner::before,
.bk-flow .bk-ticket-inner::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: calc(5.5rem - 9px);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bk-ticket-notch);
    pointer-events: none;
    transform: translateZ(0);
}

.bk-flow .bk-ticket-inner::before {
    top: 17%;
}

.bk-flow .bk-ticket-inner::after {
    bottom: 17%;
}

.bk-flow .bk-ticket-head {
    grid-column: 1;
    grid-row: 1;
    padding: 1.1rem 0.85rem 0.35rem 1.2rem;
    min-width: 0;
}

.bk-flow .bk-ticket-body {
    grid-column: 1;
    grid-row: 3;
    padding: 0 0.85rem 1rem 1.2rem;
    min-width: 0;
}

.bk-flow .bk-ticket-tear {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0.55rem 0 0.65rem;
}

.bk-flow .bk-ticket-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}

.bk-flow .bk-ticket-head .bk-ticket-kicker {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bk-muted);
    margin: 0;
}

.bk-flow .bk-ticket-serial {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--bk-accent-2);
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: rgba(216, 63, 135, 0.08);
    border: 1px solid rgba(216, 63, 135, 0.16);
    white-space: nowrap;
}

.bk-flow .bk-ticket-title {
    display: block;
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--bk-plum);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.bk-flow .bk-ticket-valid {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #15803d;
}

.bk-flow .bk-ticket-valid::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

.bk-flow .bk-ticket-tear {
    position: relative;
    height: 0;
    border-top: 2px dashed rgba(15, 35, 68, 0.16);
}

.bk-flow .bk-ticket-tear::before,
.bk-flow .bk-ticket-tear::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bk-ticket-notch);
    transform: translateY(-50%) translateZ(0);
}

.bk-flow .bk-ticket-tear::before {
    left: -9px;
}

.bk-flow .bk-ticket-tear::after {
    right: -9px;
}

.bk-flow .bk-ticket-details {
    margin: 0;
    padding: 0;
}

.bk-flow .bk-ticket-detail {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: baseline;
    padding: 0.42rem 0;
    border-bottom: 1px dotted rgba(15, 35, 68, 0.08);
}

.bk-flow .bk-ticket-detail:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bk-flow .bk-ticket-detail dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.bk-flow .bk-ticket-detail dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--bk-ink);
    text-align: right;
    line-height: 1.35;
}

.bk-flow .bk-ticket-detail-band {
    color: var(--bk-plum);
}

.bk-flow .bk-ticket-detail-price {
    color: var(--bk-accent-2);
    font-weight: 800;
}

.bk-flow .bk-phone-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    min-height: 44px;
}

.bk-flow .bk-phone-prefix-wrap {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    background: #f3f4f6;
    border-right: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    gap: 0.4rem;
}

.bk-flow .bk-phone-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.bk-flow .bk-phone-prefix {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    padding: 0.6rem 1.2rem 0.6rem 0;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 8px 5px;
    padding-right: 0.85rem;
    max-width: 140px;
}

.bk-flow .bk-phone-prefix option {
    font-size: 0.85rem;
    padding: 0.3rem;
}

.bk-flow .bk-phone-group input {
    flex: 1 1 auto;
    min-width: 120px;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    color: #374151;
    letter-spacing: 0.02em;
}

.bk-flow .bk-phone-group input:focus {
    outline: none;
    box-shadow: none;
}

@media (max-width: 480px) {
    .bk-flow .bk-phone-group {
        flex-direction: row;
    }
    .bk-flow .bk-phone-prefix-wrap {
        border-right: 1px solid #e5e7eb;
        border-bottom: none;
    }
}

/* intl-tel-input professional styling */
.bk-flow .iti {
    width: 100%;
    display: block;
}
.bk-flow .iti__tel-input {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    min-height: 44px;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    padding-left: 100px !important;
}
#bungee_name {
    text-transform: capitalize;
}
.bk-flow .iti__tel-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.bk-flow .iti__country-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.bk-flow .iti__selected-country {
    border-right: 1px solid #e5e7eb;
    border-radius: 10px 0 0 10px;
    background: #f9fafb;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0 12px 0 8px;
}
.bk-flow .iti__selected-country:hover {
    background: #f3f4f6;
}
.bk-flow .iti__arrow {
    border-top-color: #6b7280;
    margin-left: 0.2rem;
}
.bk-flow .iti__dropdown-content {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    border: 1px solid #e5e7eb;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
}
.bk-flow .iti__country {
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}
.bk-flow .iti__country:hover {
    background: #f0f9ff;
}
.bk-flow .iti__country.iti__highlight {
    background: #e0f2fe;
}
.bk-flow .iti__country-name {
    color: #374151;
}
.bk-flow .iti__dial-code {
    color: #6b7280;
}

/* ===== TICKET DE RESERVA OCULTO POR DEFECTO =====
   Para volver a mostrarlo, elimina o comenta la siguiente regla:
   .bk-flow .bk-ticket--booking { display: none !important; }
   Tambien puedes quitar el comment en la regla del paso 3 si quieres verlo ahi.
   ================================================= */
.bk-flow .bk-ticket--booking {
    display: none !important;
}

/* Toggle para mostrar/ocultar ticket (conservado para uso futuro) */
.bk-flow .bk-ticket-toggle {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1.5px solid rgba(15, 35, 68, 0.12);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bk-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.bk-flow .bk-ticket-toggle:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 35, 68, 0.25);
    color: var(--bk-navy);
}

.bk-flow .bk-ticket-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.7;
}

.bk-flow .bk-ticket--booking.is-collapsed .bk-ticket-toggle svg {
    transform: rotate(-90deg);
}

.bk-flow .bk-ticket--booking.is-collapsed .bk-ticket-inner {
    display: none;
}

.bk-flow .bk-ticket--booking.is-collapsed {
    min-height: 2.4rem;
    margin-bottom: 0.75rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px dashed rgba(15, 35, 68, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.bk-flow .bk-ticket--booking.is-collapsed:hover {
    border-color: rgba(15, 35, 68, 0.22);
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.bk-flow .bk-ticket--booking.is-collapsed .bk-ticket-collapsed-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bk-muted);
    letter-spacing: 0.02em;
}

.bk-flow .bk-ticket--booking.is-collapsed .bk-ticket-collapsed-label svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.bk-flow .bk-ticket-collapsed-label {
    display: none;
}

/* Checkout estilo marketplace (Mercado Libre / Mercado Pago) */
/* .bk-flow .bk-panel[data-bungee-step="3"] .bk-ticket--booking {
    display: none;
} */

.bk-flow .bk-checkout {
    margin: 1.15rem 0 1.35rem;
    display: grid;
    gap: 0.65rem;
}

.bk-flow .bk-checkout__summary {
    position: relative;
    padding: 0;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(15, 35, 68, 0.06);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 12px 32px rgba(15, 35, 68, 0.1),
        0 24px 64px rgba(15, 35, 68, 0.06);
    overflow: hidden;
    --bk-checkout-notch: #fff;
    transform: translateZ(0);
}

.bk-flow .bk-checkout__summary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, 0.02) 0%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #fafbfc 50%, #f5f6f8 100%);
    z-index: 0;
}

/* Subtle grain texture overlay */
.bk-flow .bk-checkout__summary::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
    z-index: 2;
}

.bk-flow .bk-checkout-summary__inner {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.5rem 1rem;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

.bk-flow .bk-checkout-summary__inner::-webkit-scrollbar {
    width: 6px;
}

.bk-flow .bk-checkout-summary__inner::-webkit-scrollbar-track {
    background: rgba(15, 35, 68, 0.03);
    border-radius: 3px;
}

.bk-flow .bk-checkout-summary__inner::-webkit-scrollbar-thumb {
    background: rgba(15, 35, 68, 0.15);
    border-radius: 3px;
}

.bk-flow .bk-checkout-summary__inner::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 35, 68, 0.25);
}

.bk-flow .bk-checkout-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(15, 35, 68, 0.35);
}

.bk-flow .bk-checkout-summary__qty {
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(99, 102, 241, 0.9);
    font-size: 0.7rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06));
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.12);
}

.bk-flow .bk-checkout-summary__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(15, 35, 68, 0.05);
}

.bk-flow .bk-checkout-summary__item:last-of-type {
    border-bottom: none;
}

.bk-flow .bk-checkout-summary__thumb {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #a855f7 100%);
    box-shadow: 
        0 6px 16px rgba(99, 102, 241, 0.35),
        0 2px 4px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.bk-flow .bk-checkout-summary__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.bk-flow .bk-checkout-summary__info {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.bk-flow .bk-checkout-summary__info strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(15, 35, 68, 0.95);
    line-height: 1.3;
}

.bk-flow .bk-checkout-summary__info span {
    font-size: 0.8rem;
    color: rgba(15, 35, 68, 0.5);
    font-weight: 500;
}

.bk-flow .bk-checkout-summary__line-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(15, 35, 68, 0.75);
    white-space: nowrap;
}

/* Tear line separator */
.bk-flow .bk-checkout-summary__tear {
    position: relative;
    height: 0;
    border-top: 2px dashed rgba(15, 35, 68, 0.12);
    margin: 0.4rem 0 0;
}

.bk-flow .bk-checkout-summary__tear::before,
.bk-flow .bk-checkout-summary__tear::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bk-checkout-notch);
    transform: translateY(-50%) translateZ(0);
    box-shadow: 
        inset 0 0 0 2px rgba(15, 35, 68, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.03);
}

.bk-flow .bk-checkout-summary__tear::before {
    left: -10px;
}

.bk-flow .bk-checkout-summary__tear::after {
    right: -10px;
}

/* Ticket number */
.bk-flow .bk-checkout-summary__ticket-num {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(15, 35, 68, 0.3);
    letter-spacing: 0.08em;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.bk-flow .bk-checkout-summary__ticket-line {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        rgba(15, 35, 68, 0.08) 0px,
        rgba(15, 35, 68, 0.08) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* Stub / Total area */
.bk-flow .bk-checkout-summary__stub {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #fef3f0 0%, #fce7e6 50%, #fee2e2 100%);
    padding: 1.1rem 1.5rem 1.35rem;
    border-top: 2px dashed rgba(15, 35, 68, 0.1);
}

.bk-flow .bk-checkout-summary__stub::before,
.bk-flow .bk-checkout-summary__stub::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bk-checkout-notch);
    box-shadow: 
        inset 0 0 0 2px rgba(15, 35, 68, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.03);
}

.bk-flow .bk-checkout-summary__stub::before {
    left: -10px;
}

.bk-flow .bk-checkout-summary__stub::after {
    right: -10px;
}

.bk-flow .bk-checkout-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(15, 35, 68, 0.5);
    letter-spacing: 0.01em;
}

.bk-flow .bk-checkout-summary__total strong {
    font-size: 1.65rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #0f2344 0%, #1e3a5f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bk-flow .bk-checkout__card {
    background: #fff;
    border-radius: 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    overflow: hidden;
}

.bk-flow .bk-checkout__head {
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

.bk-flow .bk-checkout__step {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3483fa;
}

.bk-flow .bk-checkout__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    letter-spacing: -0.02em;
}

.bk-flow .bk-checkout__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: rgba(0, 0, 0, 0.52);
    line-height: 1.4;
}

.bk-flow .bk-checkout__options {
    display: grid;
}

.bk-flow .bk-checkout-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    width: 100%;
    padding: 0.95rem 1rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease;
}

.bk-flow .bk-checkout-option:last-child {
    border-bottom: 0;
}

.bk-flow .bk-checkout-option:hover {
    background: #f7faff;
}

.bk-flow .bk-checkout-option.is-selected {
    background: #f2f7ff;
    box-shadow: inset 3px 0 0 #3483fa;
}

.bk-flow .bk-checkout__options.is-error {
    border: 2px solid #ef4444;
    border-radius: 0.75rem;
    background: #fef2f2;
}

.bk-flow .bk-checkout__options.is-error .bk-checkout-option {
    border-color: rgba(239, 68, 68, 0.15);
}

.bk-flow .bk-checkout-option__radio {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.25);
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.bk-flow .bk-checkout-option.is-selected .bk-checkout-option__radio {
    border-color: #3483fa;
    box-shadow: inset 0 0 0 3px #fff;
    background: #3483fa;
}

.bk-flow .bk-checkout-option__main {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.bk-flow .bk-checkout-option__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.bk-flow .bk-checkout-option__title-row strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
}

.bk-flow .bk-checkout-option__desc {
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.52);
    line-height: 1.35;
}

.bk-flow .bk-checkout-option__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.bk-flow .bk-checkout-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bk-flow .bk-checkout-badge--recommended {
    background: #00a650;
    color: #fff;
}

.bk-flow .bk-checkout-badge--soft {
    background: rgba(52, 131, 250, 0.1);
    color: #3483fa;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}

.bk-flow .bk-checkout-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.bk-flow .bk-checkout-restore-notice {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.45rem;
    background: #eef6ff;
    border: 1px solid rgba(52, 131, 250, 0.25);
    color: #1e4f8c;
    font-size: 0.86rem;
    line-height: 1.4;
}

.bk-flow .bk-checkout-sandbox-notice {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.45rem;
    background: #fff8e6;
    border: 1px solid rgba(245, 166, 35, 0.45);
    color: #7a4d00;
    font-size: 0.86rem;
    line-height: 1.45;
}

.bk-flow .bk-checkout-sandbox-notice strong {
    display: block;
    margin-bottom: 0.25rem;
}

.bk-flow .bk-checkout-sandbox-notice p {
    margin: 0;
}

.bk-flow .bk-checkout-field-hint {
    display: block;
    margin-top: 0.35rem;
    color: #7a4d00;
    font-size: 0.8rem;
    line-height: 1.35;
}

.bk-flow .bk-checkout-success-notice {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.6rem;
    background: #ecfdf3;
    border: 1px solid rgba(22, 163, 74, 0.35);
    color: #14532d;
}

.bk-flow .bk-mp-outcome {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin: 0 0 1.1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.bk-flow .bk-mp-outcome__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
}

.bk-flow .bk-mp-outcome__body {
    min-width: 0;
}

.bk-flow .bk-mp-outcome__title {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
    line-height: 1.25;
}

.bk-flow .bk-mp-outcome__message {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.bk-flow .bk-mp-outcome__hint {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 0.88;
}

.bk-flow .bk-mp-outcome__ref {
    display: inline-block;
    margin-top: 0.55rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bk-flow .bk-mp-outcome--success {
    background: linear-gradient(135deg, #ecfdf3 0%, #f0fdf4 100%);
    border-color: rgba(22, 163, 74, 0.28);
    color: #14532d;
}

.bk-flow .bk-mp-outcome--success .bk-mp-outcome__icon {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.bk-flow .bk-mp-outcome--success .bk-mp-outcome__ref {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}

.bk-flow .bk-mp-outcome--pending {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: rgba(217, 119, 6, 0.28);
    color: #92400e;
}

.bk-flow .bk-mp-outcome--pending .bk-mp-outcome__icon {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.bk-flow .bk-mp-outcome--error {
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-color: rgba(220, 38, 38, 0.24);
    color: #991b1b;
}

.bk-flow .bk-mp-outcome--error .bk-mp-outcome__icon {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.bk-flow .bk-mp-outcome--info {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border-color: rgba(37, 99, 235, 0.22);
    color: #1e40af;
}

.bk-flow .bk-mp-outcome--info .bk-mp-outcome__icon {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.bk-flow .bk-mp-receipt {
    margin: 0 0 1.25rem;
    padding: 1.35rem 1.35rem 1.15rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.bk-flow .bk-mp-receipt__hero {
    text-align: center;
    margin-bottom: 1rem;
}

.bk-flow .bk-mp-receipt__icon {
    display: inline-grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.bk-flow .bk-mp-receipt__title {
    margin: 0 0 0.35rem;
    font-size: 1.45rem;
    line-height: 1.2;
    color: #15803d;
}

.bk-flow .bk-mp-receipt__subtitle {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.bk-flow .bk-mp-receipt__panel {
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 0.85rem;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.bk-flow .bk-mp-receipt__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 0.88rem;
    line-height: 1.35;
}

.bk-flow .bk-mp-receipt__row:last-child {
    border-bottom: 0;
}

.bk-flow .bk-mp-receipt__row span {
    color: #64748b;
    flex: 0 0 42%;
}

.bk-flow .bk-mp-receipt__row strong {
    color: #0f172a;
    text-align: right;
    font-weight: 600;
}

.bk-flow .bk-mp-receipt__row--amount strong {
    font-size: 1.05rem;
}

.bk-flow .bk-mp-receipt__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
}

.bk-flow .bk-mp-receipt__email-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.95rem 0 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    background: #eff6ff;
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: #1e40af;
    font-size: 0.84rem;
}

.bk-flow .bk-mp-receipt__actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.bk-flow .bk-mp-receipt__actions .btn {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
}

.bk-flow .bk-checkout-chips--payments {
    align-items: center;
    margin-top: 0.15rem;
}

.bk-flow .bk-checkout-payment-banner {
    display: block;
    height: 1.25rem;
    width: auto;
    max-width: min(100%, 15rem);
    object-fit: contain;
    object-position: left center;
}

.bk-flow .bk-checkout-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.03em;
}

.bk-flow .bk-checkout-option__brand {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bk-flow .bk-mp-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    flex-shrink: 0;
}

.bk-flow .bk-mp-logo-box {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem;
    border: 2px solid #009ee3;
    background: #fff;
}

.bk-flow .bk-mp-logo-box__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.bk-flow .bk-mp-logo-box__mercado {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    color: #002776;
    white-space: nowrap;
}

.bk-flow .bk-mp-logo-box__pago {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    color: #009ee3;
    white-space: nowrap;
}

.bk-flow .bk-mp-logo-box .bk-mp-icon {
    width: 1.7rem;
    height: 1.7rem;
}

.bk-flow .bk-checkout-option__brand--store,
.bk-flow .bk-checkout-option__brand--bank {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.55rem;
    color: #3483fa;
    background: rgba(52, 131, 250, 0.08);
}

.bk-flow .bk-checkout-option--mercado-pago.is-selected {
    background: linear-gradient(90deg, #f2fbff 0%, #f7faff 100%);
}

.bk-flow .bk-checkout__detail {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fafafa;
}

.bk-flow .bk-checkout-detail__icon {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3483fa;
    background: rgba(52, 131, 250, 0.1);
}

.bk-flow .bk-checkout-detail__icon--store {
    color: #00a650;
    background: rgba(0, 166, 80, 0.1);
}

.bk-flow .bk-checkout-detail__title {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.72);
}

.bk-flow .bk-checkout-detail__copy {
    font-size: 0.82rem;
    color: rgba(0, 0, 0, 0.62);
    line-height: 1.45;
}

.bk-flow .bk-checkout__trust {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}

.bk-flow .bk-checkout__trust-icon {
    flex-shrink: 0;
    color: #00a650;
}

.bk-flow .bk-checkout__trust-copy {
    display: grid;
    gap: 0.05rem;
}

.bk-flow .bk-checkout__trust-copy strong {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.78);
}

.bk-flow .bk-checkout__trust-copy span {
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.48);
}

.bk-flow .bk-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.bk-flow .bk-confirm-hint {
    margin-top: 0.35rem;
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    animation: bkFadeIn 0.25s ease;
}

.bk-flow .bk-confirm-hint.is-visible {
    display: flex;
}

.bk-flow .bk-confirm-ref {
    color: rgba(0, 0, 0, 0.45);
    font-weight: 500;
}

.bk-flow .bk-confirm-ref::before {
    content: 'Ingresado: ';
    color: rgba(0, 0, 0, 0.35);
}

.bk-flow .bk-confirm-status {
    font-weight: 600;
    margin-left: auto;
    transition: color 0.15s ease;
}

.bk-flow .bk-confirm-status--ok {
    color: #10b981;
}

.bk-flow .bk-confirm-status--ok::before {
    content: '\2714 ';
}

.bk-flow .bk-confirm-status--err {
    color: #ef4444;
}

.bk-flow .bk-confirm-status--err::before {
    content: '\2717 ';
}

.bk-flow input[data-confirm-mode] {
    border-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.04);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.bk-flow input[data-confirm-mode]:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

@keyframes bkFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bkLabelBlink {
    0%, 100% { color: #e11d48; }
    50%      { color: #fb7185; text-shadow: 0 0 8px rgba(225, 29, 72, 0.35); }
}

.bk-flow label.bk-confirm-blink,
label.bk-confirm-blink {
    animation: bkLabelBlink 0.5s ease 4;
}

.bk-flow .bk-confirm-edit {
    color: #0ea5e9;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 8px;
    transition: color 0.15s;
}
.bk-flow .bk-confirm-edit:hover {
    color: #0284c7;
}

@media (max-width: 768px) {
    .bk-flow .bk-checkout-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.bk-flow .bk-checkout-details {
    margin-top: 0;
    background: #fff;
    border-radius: 1.25rem;
    border: 1px solid rgba(15, 35, 68, 0.06);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 12px 32px rgba(15, 35, 68, 0.1),
        0 24px 64px rgba(15, 35, 68, 0.06);
    padding: 1.5rem;
    overflow: hidden;
}

.bk-flow .bk-checkout-details__title {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.bk-flow .bk-actions--checkout {
    margin-top: 1.1rem;
    gap: 0.65rem;
    flex-direction: column-reverse;
}

.bk-flow .bk-actions--checkout .btn {
    width: 100%;
}

.bk-flow .bk-actions--checkout .bk-checkout-submit {
    flex: 1 1 auto;
    min-height: 3rem;
    border-radius: 0.45rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: #3483fa;
    border-color: #3483fa;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.bk-flow .bk-actions--checkout .bk-checkout-submit:hover {
    background: #2968c8;
    border-color: #2968c8;
}

.bk-flow .bk-actions--checkout .bk-checkout-submit--mp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, #009ee3 0%, #008ecf 100%);
    border-color: #008ecf;
}

.bk-flow .bk-actions--checkout .bk-checkout-submit--mp .bk-mp-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.bk-flow .bk-actions--checkout .bk-checkout-submit--mp .bk-checkout-submit__label {
    line-height: 1.2;
}

.bk-flow .bk-actions--checkout .bk-checkout-submit--mp:hover {
    background: linear-gradient(180deg, #008ecf 0%, #007db8 100%);
    border-color: #007db8;
}

@media (max-width: 640px) {
    .bk-flow .bk-checkout-option {
        grid-template-columns: auto 1fr;
    }

    .bk-flow .bk-checkout-option__brand {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 0.15rem;
    }

    .bk-flow .bk-checkout-summary__total strong {
        font-size: 1.2rem;
    }
}

.bungee-payment-settings-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(15, 35, 68, 0.08);
}

.bungee-payment-settings-block:last-of-type {
    border-bottom: 0;
}

.bungee-payment-methods-admin {
    display: grid;
    gap: 0.85rem;
}

.bungee-payment-method-admin-card {
    padding: 0.95rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(15, 35, 68, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.bungee-payment-method-admin-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.bungee-payment-settings-note {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    color: var(--text-muted, #64748b);
}

.bungee-payment-settings-note code {
    font-size: 0.78rem;
    word-break: break-all;
}

.admin-body.admin-page-payment-settings .admin-content {
    padding-bottom: 0 !important;
}

/* Pagos — configuración unificada */
.pay-settings {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Cabecera general del panel (Contenedor) */
.pay-settings-head {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Barra del título (Sticky e Integrada de Ancho Completo) */
.pay-settings-bar {
    position: sticky;
    top: calc(68px + 2rem); /* Compensa el margin-top de -2rem para que la adherencia real sea exactamente a 68px de la barra superior */
    z-index: 15; /* Se coloca debajo del topbar (z-index: 20) pero encima del scroll de tarjetas */
    margin-top: -2rem; /* Cancela el padding-top de .pay-settings */
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 1.5rem 1.5rem 1rem;
    background: #edf3fb; /* Color exacto del fondo de la página */
    border: none;
    box-shadow: 
        0 1px 0 rgba(226, 232, 240, 0.8), /* Borde inferior infinito */
        0 0 0 100vmax #edf3fb; /* Fondo infinito hacia los lados */
    clip-path: inset(0 -100vmax); /* Extiende el diseño horizontalmente pero lo recorta verticalmente */
}

/* Introducción de la cabecera (Se desplaza con el scroll) */
.pay-settings-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.pay-settings-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pay-settings-back:hover {
    color: #2563eb;
    transform: translateX(-3px);
}

.pay-settings-back .material-symbols-outlined {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.pay-settings-bar h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pay-settings-intro p {
    margin: 0;
    flex: 1;
    min-width: 280px;
    max-width: 42rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
}

/* Píldoras de estado */
.pay-settings-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pay-settings-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pay-settings-pill.is-ok {
    border-color: rgba(16, 185, 129, 0.2);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.pay-settings-pill.is-warn {
    border-color: rgba(245, 158, 11, 0.25);
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}

.pay-settings-pill--link {
    text-decoration: none;
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.15);
    background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 100%);
}

.pay-settings-pill--link:hover {
    transform: translateY(-2px);
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.pay-settings-pill--link .material-symbols-outlined {
    font-size: 1rem;
}

/* Formulario principal y secciones */
.pay-settings-form {
    display: grid;
    gap: 1.5rem;
}

.pay-settings-section {
    position: relative;
    padding: 1.75rem 2rem 2rem;
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.3s ease;
}

.pay-settings-section:hover {
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
}

.pay-settings-section--mp {
    border-color: rgba(0, 158, 227, 0.15) !important;
    background: linear-gradient(180deg, #fcfefe 0%, #ffffff 100%) !important;
}

.pay-settings-section-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}

/* Insignias de paso */
.pay-settings-step {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.pay-settings-section--mp .pay-settings-step {
    background: linear-gradient(135deg, #009ee3 0%, #007bb0 100%);
    box-shadow: 0 4px 12px rgba(0, 158, 227, 0.25);
}

.pay-settings-section-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.pay-settings-section-head p {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #64748b;
}

.pay-settings-section-head a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.pay-settings-section-head a:hover {
    text-decoration: underline;
}

/* Métodos de Pago (Tarjetas) */
.pay-settings-methods {
    display: grid;
    gap: 1rem;
}

.pay-settings-method {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    opacity: 0.65;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pay-settings-method:hover {
    opacity: 0.9;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.pay-settings-method.is-on {
    opacity: 1;
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.02);
}

.pay-settings-method--mp.is-on {
    border-color: rgba(0, 158, 227, 0.25);
    background: linear-gradient(135deg, rgba(0, 158, 227, 0.03) 0%, #ffffff 100%);
    box-shadow: 0 8px 24px -4px rgba(0, 158, 227, 0.06), 0 4px 12px -2px rgba(0, 158, 227, 0.02);
}

.pay-settings-method.is-on:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}

.pay-settings-method--mp.is-on:hover {
    box-shadow: 0 12px 30px -4px rgba(0, 158, 227, 0.1), 0 4px 16px -2px rgba(0, 158, 227, 0.05);
}

.pay-settings-method-toggle {
    padding-top: 0.25rem;
    cursor: pointer;
}

.pay-settings-method-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Interruptor estilo iOS moderno */
.pay-settings-method-switch {
    display: block;
    width: 2.85rem;
    height: 1.65rem;
    border-radius: 99px;
    background: #cbd5e1;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pay-settings-method-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2), 0 1px 2px rgba(15, 23, 42, 0.1);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pay-settings-method.is-on .pay-settings-method-switch {
    background: #2563eb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(37, 99, 235, 0.2);
}

.pay-settings-method--mp.is-on .pay-settings-method-switch {
    background: #009ee3;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 158, 227, 0.2);
}

.pay-settings-method.is-on .pay-settings-method-switch::after {
    transform: translateX(1.2rem);
}

/* Iconos de métodos de pago */
.pay-settings-method-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    transition: all 0.25s ease;
}

.pay-settings-method.is-on .pay-settings-method-icon {
    transform: scale(1.05);
}

.pay-settings-method--mp .pay-settings-method-icon {
    color: #009ee3;
    background: rgba(0, 158, 227, 0.08);
}

.pay-settings-method-fields {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

/* Inputs y etiquetas */
.pay-settings-field {
    display: grid;
    gap: 0.35rem;
}

.pay-settings-field span {
    font-size: 0.75rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}

.pay-settings-field input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 0.92rem;
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

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

.pay-settings-method--mp .pay-settings-field input:focus {
    border-color: #009ee3;
    box-shadow: 0 0 0 4px rgba(0, 158, 227, 0.12);
}

.pay-settings-method-hint {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #d97706;
}

/* Callouts de Alerta (ngrok) */
.pay-settings-ngrok-callout {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(217, 119, 6, 0.2);
    background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #7c2d12;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.04);
}

.pay-settings-ngrok-callout strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    color: #c2410c;
}

.pay-settings-ngrok-callout p {
    margin: 0;
}

/* Inputs Generales */
.form-group.pay-settings-public-url {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 0.95rem;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

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

.form-group small {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #64748b;
}

/* Webhook URL */
.pay-settings-webhook {
    margin-bottom: 1.5rem;
    background: #f8fafc;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.pay-settings-webhook label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
}

.pay-settings-webhook-row {
    display: flex;
    gap: 0.75rem;
}

.pay-settings-webhook-row input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: #ffffff;
    color: #0f172a;
}

.pay-settings-webhook-row .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pay-settings-webhook-row .btn-outline {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

.pay-settings-webhook-row .btn-outline:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
    color: #0f172a;
}

/* Área de Laboratorio de Pruebas (Test Mode Panel) */
.pay-settings-test.panel-inset {
    margin: 1.75rem 0;
    padding: 1.5rem;
    border-radius: 14px;
    border: 1.5px dashed #cbd5e1;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
}

.pay-settings-test h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pay-settings-test h3::before {
    content: "labs";
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-size: 1.25rem;
    color: #2563eb;
}

.pay-settings-test > p {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #64748b;
}

.pay-settings-test-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pay-settings-test-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pay-settings-test-actions .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 1px solid #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.pay-settings-test-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3);
}

.pay-settings-test-actions .btn-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.pay-settings-test-actions .btn-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.pay-settings-test-result {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: 500;
}

.pay-settings-test-result.is-ok {
    background: #ecfdf3;
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.pay-settings-test-result.is-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Acordeones desplegables */
.pay-settings-test-cards {
    margin-top: 1rem;
    font-size: 0.88rem;
    color: #334155;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.pay-settings-test-cards summary {
    cursor: pointer;
    font-weight: 700;
    padding: 0.85rem 1.25rem;
    background: #f8fafc;
    user-select: none;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pay-settings-test-cards summary:hover {
    background: #f1f5f9;
}

.pay-settings-test-cards summary::after {
    content: "expand_more";
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-size: 1.2rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.pay-settings-test-cards[open] summary::after {
    transform: rotate(180deg);
}

.pay-settings-test-cards ul {
    margin: 0;
    padding: 1rem 1.25rem 1rem 2.25rem;
    list-style-type: disc;
}

.pay-settings-test-cards li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.pay-settings-test-cards li:last-child {
    margin-bottom: 0;
}

.pay-settings-guide {
    padding: 0 1.25rem 1.25rem;
}

.pay-settings-guide h4 {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 750;
    color: #0f172a;
}

.pay-settings-guide h4:first-of-type {
    margin-top: 1rem;
}

.pay-settings-guide ul {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
}

/* Tabla del Sandbox */
.pay-settings-status-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 0.75rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.pay-settings-status-table th,
.pay-settings-status-table td {
    padding: 0.6rem 0.85rem;
    text-align: left;
}

.pay-settings-status-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 750;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid #e2e8f0;
}

.pay-settings-status-table td {
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.pay-settings-status-table tr:last-child td {
    border-bottom: none;
}

.pay-settings-status-table tr:nth-child(even) {
    background: #f8fafc;
}

.pay-settings-status-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    padding: 0.15rem 0.35rem;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 4px;
    color: #0f172a;
}

.pay-settings-guide-note {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #64748b;
}

.pay-settings-grid {
    margin-top: 1rem;
}

/* Pie de Página Flotante (Sticky Footer Glassmorphic Pegado a la Ventana) */
.pay-settings-footer {
    position: sticky;
    bottom: 0;
    margin-top: 2rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: none;
    box-shadow: 0 -10px 30px -10px rgba(15, 23, 42, 0.08);
    z-index: 100;
}

.pay-settings-footer .btn-lg {
    width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 750;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pay-settings-footer .btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.pay-settings-footer .btn-lg:active {
    transform: translateY(0);
}

/* Responsividad para pantallas móviles */
@media (max-width: 640px) {
    .pay-settings {
        padding: 1.25rem 1rem 3rem;
    }

    .pay-settings-bar {
        top: calc(68px + 1.25rem); /* Compensa el margin-top de móvil para adherencia exacta */
        margin-top: -1.25rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pay-settings-section {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .pay-settings-method {
        grid-template-columns: auto 1fr;
        gap: 1rem;
        padding: 1rem 1.15rem;
    }

    .pay-settings-method-icon {
        display: none;
    }

    .pay-settings-webhook-row {
        flex-direction: column;
    }

    .pay-settings-webhook-row .btn {
        padding: 0.75rem;
    }

    .pay-settings-footer {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 12px 12px 0 0;
        border-left: none;
        border-right: none;
    }
}

.bk-flow .bk-ticket-footnote {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    color: var(--bk-muted);
    letter-spacing: 0.02em;
}

.bk-flow .bk-ticket-stub {
    grid-column: 2;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.85rem 0.55rem 0.75rem;
    border-left: 2px dashed rgba(15, 35, 68, 0.12);
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.96) 0%, rgba(255, 244, 249, 0.94) 100%);
    position: relative;
}

.bk-flow .bk-ticket-stub-barcode {
    width: 100%;
    max-width: 3.2rem;
    height: 2.35rem;
    border-radius: 2px;
    background:
        repeating-linear-gradient(
            90deg,
            #1a2537 0,
            #1a2537 2px,
            transparent 2px,
            transparent 4px,
            #1a2537 4px,
            #1a2537 5px,
            transparent 5px,
            transparent 8px,
            #1a2537 8px,
            #1a2537 9px,
            transparent 9px,
            transparent 11px,
            #1a2537 11px,
            #1a2537 13px,
            transparent 13px,
            transparent 16px
        );
    opacity: 0.82;
}

.bk-flow .bk-ticket-stub-brand {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: var(--bk-accent-2);
    margin-top: 0.15rem;
}

.bk-flow .bk-ticket-stub-time {
    font-size: 1.05rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--bk-plum);
    line-height: 1;
}

.bk-flow .bk-ticket-stub-date {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bk-muted);
    text-align: center;
    line-height: 1.25;
}

.bk-flow .bk-ticket--compact {
    margin-bottom: 1rem;
}

@media (max-width: 520px) {
    .bk-flow .bk-ticket-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }

    .bk-flow .bk-ticket-head {
        padding: 1rem 1rem 0.25rem;
    }

    .bk-flow .bk-ticket-body {
        padding: 0 1rem 1rem;
    }

    .bk-flow .bk-ticket-tear {
        grid-column: 1;
        grid-row: 2;
        margin: 0.5rem 1rem;
    }

    .bk-flow .bk-ticket-stub {
        grid-column: 1;
        grid-row: 4;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border-left: none;
        border-top: 2px dashed rgba(15, 35, 68, 0.14);
        padding: 0.75rem 1rem;
        gap: 0.65rem 1rem;
    }

    .bk-flow .bk-ticket-body {
        grid-row: 3;
    }

    .bk-flow .bk-ticket-inner::before,
    .bk-flow .bk-ticket-inner::after {
        display: none;
    }

    .bk-flow .bk-ticket-stub-brand {
        writing-mode: horizontal-tb;
        transform: none;
        order: 1;
    }

    .bk-flow .bk-ticket-stub-barcode {
        order: 2;
        height: 1.75rem;
        max-width: 5.5rem;
    }

    .bk-flow .bk-ticket-stub-time {
        order: 3;
    }

    .bk-flow .bk-ticket-stub-date {
        order: 4;
        width: 100%;
        text-align: center;
    }

    .bk-flow .bk-ticket-detail {
        grid-template-columns: 4.75rem minmax(0, 1fr);
    }

    .bk-flow .bk-ticket-tear::before {
        left: -9px;
    }

    .bk-flow .bk-ticket-tear::after {
        right: -9px;
    }
}

.bk-flow .bk-panel-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--bk-ink);
}

@media (max-width: 640px) {
    .bk-flow .bk-date-carousel {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .bk-flow .bk-date-nav {
        display: none;
    }

    .bk-flow .bk-date-scroll {
        mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }

    .bk-flow .bk-session-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .bk-flow .bk-session-cta {
        justify-self: start;
        opacity: 1;
        transform: none;
    }
}

@media (hover: none) {
    .bk-flow .bk-session-cta {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-flow .bk-panel--enter,
    .bk-flow .bk-stagger,
    .bk-flow .bk-live-dot,
    .bk-flow .bk-actions .btn-primary::after {
        animation: none !important;
    }

    .bk-flow .bk-class-row:hover,
    .bk-flow .bk-class-row.is-selected,
    .bk-flow .bk-session-row:hover,
    .bk-flow .bk-week-day.is-active {
        transform: none;
    }
}

@media (max-width: 900px) {
    .bungee-booking-public-weight-grid,
    .bungee-booking-public-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .bungee-booking-public-card {
        padding: 1.25rem;
    }

    .admin-body.admin-page-bungee-classes .bungee-week-calendar-grid {
        min-width: 48rem;
    }
}

/* Catálogos: menú fijo del sidebar principal (sin duplicar panel interno) */
.admin-body.admin-page-services-catalog .clients-pro-layout--fixed-nav,
.admin-body.admin-page-inventory-catalog .clients-pro-layout--fixed-nav,
.admin-body.admin-page-memberships-catalog .clients-pro-layout--fixed-nav,
.admin-body.admin-page-memberships-form .clients-pro-layout--fixed-nav {
    display: block;
    min-height: calc(100vh - 68px);
}

@media (min-width: 981px) {
    .admin-body.admin-page-services-catalog .clients-pro-layout--fixed-nav .clients-pro-main,
    .admin-body.admin-page-inventory-catalog .clients-pro-layout--fixed-nav .clients-pro-main,
    .admin-body.admin-page-memberships-catalog .clients-pro-layout--fixed-nav .clients-pro-main,
    .admin-body.admin-page-memberships-form .clients-pro-layout--fixed-nav .clients-pro-main {
        margin-left: 210px;
        padding: 0.75rem 1rem 1.2rem;
    }
}

/* Membresías (admin) — mismo shell que servicios/inventario */
.admin-body.admin-page-memberships-catalog .clients-pro-side-nav a,
.admin-body.admin-page-memberships-form .clients-pro-side-nav a {
    min-height: 40px;
    padding: 0.42rem 0.72rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.admin-body.admin-page-memberships-catalog .clients-pro-side-nav a:hover,
.admin-body.admin-page-memberships-form .clients-pro-side-nav a:hover {
    background: #f4f6fb;
    border-color: #e0e6f0;
}

.admin-body.admin-page-memberships-catalog .clients-pro-side-nav a.is-active,
.admin-body.admin-page-memberships-form .clients-pro-side-nav a.is-active {
    background: #efedf9;
    border-color: #dfdbf6;
    color: #1b2230;
    box-shadow: none;
}

.admin-body.admin-page-memberships-catalog .clients-pro-side-section,
.admin-body.admin-page-memberships-form .clients-pro-side-section {
    margin: 0.7rem 0.72rem 0.28rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.admin-body.admin-page-memberships-catalog .clients-pro-side-divider,
.admin-body.admin-page-memberships-form .clients-pro-side-divider {
    margin: 0.5rem 0.72rem;
}

.memberships-page-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.memberships-catalog-shell {
    display: grid;
    gap: 0.85rem;
}

.admin-body.memberships-form-editor-open {
    overflow: hidden;
}

.admin-body.memberships-form-editor-open .admin-content,
.admin-body.memberships-form-editor-open .clients-pro-main,
.admin-body.memberships-form-editor-open .clients-pro-side,
.admin-body.memberships-form-editor-open .clients-pro-side-nav {
    overflow: hidden !important;
}

.memberships-editor-page {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.memberships-editor-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.memberships-editor-page > .memberships-editor-topbar {
    flex-shrink: 0;
}

.memberships-editor-topbar-title strong {
    color: #0f1827;
    font-size: clamp(1.22rem, 1.5vw, 1.55rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.memberships-editor-delete-form {
    margin: 0;
}

.memberships-editor-page .memberships-editor-delete-btn,
.memberships-editor-page button.memberships-editor-delete-btn {
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
}

.memberships-editor-page .memberships-editor-delete-btn:hover,
.memberships-editor-page .memberships-editor-delete-btn:focus-visible,
.memberships-editor-page button.memberships-editor-delete-btn:hover,
.memberships-editor-page button.memberships-editor-delete-btn:focus-visible {
    background: #dc2626;
    color: #ffffff;
}

.memberships-editor-shell {
    display: grid;
    place-items: start center;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 1.6rem 2.5rem;
}

.memberships-editor-content {
    width: min(100%, 720px);
    display: grid;
    gap: 1rem;
}

.memberships-editor-fields {
    display: grid;
    gap: 1rem;
    width: 100%;
}

.memberships-form-alert {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.92rem;
    font-weight: 600;
}

.memberships-editor-page .memberships-services-modal {
    z-index: 1300;
}

.memberships-catalog-toolbar {
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid #d8dce3;
    background: #f3f4f6;
    box-shadow: none;
}

.memberships-catalog-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.memberships-catalog-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0 0.9rem;
    border-radius: 12px;
    border: 1px solid #d8dce3;
    background: #ffffff;
}

.memberships-catalog-search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.65rem 0;
    box-shadow: none;
    font-size: 0.95rem;
}

.memberships-catalog-search-icon,
.memberships-catalog-filter-btn [data-icon] {
    color: #64748b;
    font-size: 1.15rem;
    line-height: 1;
}

.memberships-catalog-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid #d8dce3;
    background: #ffffff;
    color: #111111;
    font-weight: 600;
    cursor: pointer;
}

.memberships-catalog-filter-btn.is-active {
    border-color: #111111;
}

.memberships-catalog-table-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.memberships-catalog-table-wrap {
    overflow-x: auto;
}

.memberships-catalog-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-body.admin-page-memberships-catalog .memberships-catalog-table thead th,
.memberships-catalog-table thead th {
    padding: 0.8rem 1.2rem;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0;
    text-transform: none !important;
    border-bottom: 1px solid #e8ebf0;
    background: #f8fafc;
    white-space: nowrap;
}

.admin-body.admin-page-memberships-catalog .memberships-catalog-table thead th:nth-child(n + 2),
.memberships-catalog-table thead th:nth-child(n + 2),
.memberships-catalog-table tbody td:nth-child(n + 2) {
    text-align: center;
}

.admin-body.admin-page-memberships-catalog .memberships-catalog-table thead th:nth-child(n + 2),
.memberships-catalog-table thead th:nth-child(n + 2),
.admin-body.admin-page-memberships-catalog .memberships-catalog-table thead th:first-child,
.memberships-catalog-table thead th:first-child {
    color: #1e293b;
    font-weight: 700;
}

.memberships-catalog-table thead th.is-price,
.memberships-catalog-table tbody td.is-price {
    white-space: nowrap;
}

.memberships-catalog-row td {
    padding: 1.05rem 1.2rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.45;
    vertical-align: middle;
    transition: background-color 0.18s ease;
}

.memberships-catalog-row:hover td {
    background: #fafbfc;
}

.memberships-catalog-row:last-child td {
    border-bottom: 0;
}

.memberships-catalog-row.is-inactive td {
    color: #94a3b8;
}

.memberships-catalog-row td:not(:first-child):not(.is-price) {
    color: #334155;
    font-weight: 500;
}

.memberships-catalog-name-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.memberships-catalog-name-cell:hover strong {
    text-decoration: underline;
}

.memberships-catalog-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--membership-color, #9b6bff);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.memberships-catalog-icon .material-symbols-outlined {
    font-size: 1.35rem;
}

.memberships-catalog-name-copy {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.memberships-catalog-name-copy strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.memberships-catalog-name-copy small {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.35;
}

.memberships-catalog-row td.is-price {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.memberships-catalog-pagination {
    display: flex;
    justify-content: center;
    padding: 0.85rem 1.2rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
}

.memberships-catalog-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.memberships-filters-dialog {
    max-width: 420px;
}

.memberships-filters-head h3 {
    margin: 0 0 1rem;
}

.memberships-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1rem;
}

.admin-body.admin-page-memberships-form .clients-pro-main {
    max-width: none;
}

.admin-body.admin-page-memberships-form .memberships-editor-fields {
    width: 100%;
    margin: 0;
}

.memberships-catalog-status {
    min-width: 9rem;
    border: 1px solid rgba(15, 35, 68, 0.12);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    background: #fff;
}

.memberships-catalog-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.memberships-editor {
    display: grid;
    gap: 1rem;
}

.memberships-fitune-card {
    border-radius: 16px;
    border: 1px solid rgba(15, 35, 68, 0.08);
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
    padding: 0;
}

.admin-body.admin-page-memberships-form .memberships-fitune-card.panel {
    border: 1px solid rgba(15, 35, 68, 0.08);
    box-shadow: none;
    padding: 0;
}

.memberships-fitune-card-head {
    padding: 1.15rem 1.25rem 0;
}

.memberships-fitune-card-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.memberships-fitune-card-head p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.memberships-fitune-card-body {
    padding: 1rem 1.25rem 1.25rem;
    display: grid;
    gap: 1rem;
}

.memberships-fitune-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.memberships-sessions-grid.is-unlimited {
    grid-template-columns: minmax(0, 1fr);
}

.memberships-sessions-grid.is-package-credits {
    grid-template-columns: minmax(0, 1fr);
}

.memberships-sessions-grid [data-membership-sessions-count-wrap].is-collapsed,
.memberships-sessions-grid [data-membership-sessions-count-wrap][hidden] {
    display: none !important;
}

.memberships-field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.memberships-char-count {
    font-size: 0.8rem;
    color: #94a3b8;
}

.memberships-services-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 35, 68, 0.08);
}

.memberships-services-edit {
    border: 0;
    background: transparent;
    color: #6b5bff;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.memberships-price-input {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    min-height: 46px;
    border: 1px solid #cfd8e7;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.memberships-price-input:focus-within {
    border-color: #6b5bff;
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.14);
}

.memberships-price-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0.85rem;
    border: 0;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

.admin-body.admin-page-memberships-form .memberships-editor-form .memberships-price-input input:not([type='checkbox']):not([type='hidden']) {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0.72rem 0.9rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 600;
}

.admin-body.admin-page-memberships-form .memberships-editor-form .memberships-price-input input:not([type='checkbox']):not([type='hidden']):focus {
    outline: none;
    border: 0 !important;
    box-shadow: none !important;
}

/* Membership center-specific pricing — Pro cards */
.memberships-center-prices {
    margin-top: 0.75rem;
    padding: 0;
    background: none;
    border: none;
}
.memberships-center-prices-header {
    margin-bottom: 0.75rem;
}
.memberships-center-prices-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.82rem;
    color: #1e293b;
    margin-bottom: 0.2rem;
}
.memberships-center-prices-title svg {
    color: #6b5bff;
    flex-shrink: 0;
}
.memberships-center-prices-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    padding-left: 1.35rem;
}
.memberships-center-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
@media (max-width: 640px) {
    .memberships-center-cards {
        grid-template-columns: 1fr;
    }
}

/* Individual center card */
.membership-center-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.membership-center-card.is-active {
    border-color: #c7d2fe;
}
.membership-center-card.is-inactive {
    opacity: 0.55;
}
.membership-center-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(107, 91, 255, 0.08);
}

/* Card header: icon + name + toggle */
.membership-center-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}
.membership-center-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #6366f1;
    flex-shrink: 0;
}
.membership-center-card.is-active .membership-center-card-icon {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
}
.membership-center-card.is-inactive .membership-center-card-icon {
    background: #f1f5f9;
    color: #94a3b8;
}
.membership-center-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toggle switch */
.membership-center-toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    flex-shrink: 0;
}
.membership-center-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.membership-center-toggle-track {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    transition: background 0.25s ease;
}
.membership-center-toggle input:checked + .membership-center-toggle-track {
    background: #34d399;
}
.membership-center-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.25s ease;
}
.membership-center-toggle input:checked + .membership-center-toggle-track .membership-center-toggle-thumb {
    transform: translateX(16px);
}

/* Card body: price field */
.membership-center-card-body {
    padding-top: 0.1rem;
}
.membership-center-price-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.membership-center-price-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.membership-center-price-input-box {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    gap: 0.3rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.membership-center-price-input-box:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: #fff;
}
.membership-center-price-currency {
    font-size: 0.9rem;
    font-weight: 700;
    color: #6366f1;
    line-height: 1;
}
.membership-center-price-amount {
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    width: 100%;
    padding: 0;
    -moz-appearance: textfield;
}
.membership-center-price-amount::-webkit-outer-spin-button,
.membership-center-price-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.membership-center-price-amount::placeholder {
    color: #cbd5e1;
    font-weight: 400;
}
.membership-center-price-suffix {
    font-size: 0.7rem;
    font-weight: 600;
    color: #a5b4fc;
    flex-shrink: 0;
}

.memberships-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.memberships-color-swatch {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--swatch-color);
    cursor: pointer;
    padding: 0;
}

.memberships-color-swatch.is-selected {
    border-color: #6b5bff;
    box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.2);
}

.memberships-online-toggles {
    display: grid;
    gap: 0;
    padding-top: 0;
    border-top: 1px solid #e8ebf0;
}

.memberships-online-toggles .memberships-toggle-row {
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.35rem;
    padding: 1.2rem 0;
}

.memberships-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.memberships-toggle-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.memberships-online-toggles .memberships-toggle-copy {
    flex: 1;
    gap: 0.4rem;
    padding-right: 0.5rem;
}

.memberships-toggle-copy strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.memberships-online-toggles .memberships-toggle-copy strong {
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.memberships-toggle-copy small {
    color: #9ca3af;
    font-size: 0.88rem;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.memberships-online-toggles .memberships-toggle-copy small {
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 36rem;
}

.memberships-toggle-row.is-active .memberships-toggle-copy strong {
    color: #111827;
}

.memberships-toggle-row.is-active .memberships-toggle-copy small {
    color: #64748b;
}

.memberships-online-toggles .memberships-fitune-toggle {
    flex-shrink: 0;
    margin: 0.2rem 0 0;
}

.memberships-online-toggles .memberships-fitune-toggle .service-toggle-pill {
    width: 48px;
    height: 28px;
    border: 1px solid #d1d5db;
    background: #e5e7eb;
}

.memberships-online-toggles .memberships-fitune-toggle .service-toggle-pill::after {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.memberships-online-toggles .memberships-fitune-toggle input:checked + .service-toggle-pill {
    border-color: #6b5bff;
    background: #6b5bff;
}

.memberships-online-toggles .memberships-fitune-toggle input:checked + .service-toggle-pill::after {
    transform: translateX(20px);
}

.memberships-online-toggles .memberships-fitune-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.memberships-online-toggles .memberships-fitune-toggle {
    position: relative;
    cursor: pointer;
}

.memberships-required-mark {
    color: #ef4444;
    font-weight: 800;
}

.memberships-editor-fields .form-group.has-error label {
    color: #b91c1c;
}

.memberships-product-kind-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.memberships-product-kind-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
    margin: 0;
    padding: 1.05rem 1.1rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.memberships-product-kind-option:hover {
    border-color: #c7d2fe;
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.08);
    transform: translateY(-1px);
}

.memberships-product-kind-option.is-selected {
    border-color: #6b5bff;
    background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
    box-shadow:
        0 0 0 3px rgba(107, 91, 255, 0.14),
        0 10px 24px rgba(79, 70, 229, 0.12);
    transform: translateY(-1px);
}

.memberships-product-kind-option.is-package.is-selected {
    border-color: #10b981;
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
    box-shadow:
        0 0 0 3px rgba(16, 185, 129, 0.14),
        0 10px 24px rgba(5, 150, 105, 0.1);
}

.memberships-product-kind-option.is-package:hover {
    border-color: #6ee7b7;
    box-shadow: 0 8px 22px rgba(5, 150, 105, 0.08);
}

.memberships-product-kind-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.memberships-product-kind-option:focus-within {
    outline: none;
}

.memberships-product-kind-option:has(.memberships-product-kind-input:focus-visible) {
    outline: 2px solid #6b5bff;
    outline-offset: 2px;
}

.memberships-product-kind-option.is-package:has(.memberships-product-kind-input:focus-visible) {
    outline-color: #10b981;
}

.memberships-product-kind-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef2ff;
    color: #4f46e5;
    flex-shrink: 0;
}

.memberships-product-kind-option.is-package .memberships-product-kind-icon {
    background: #ecfdf5;
    color: #059669;
}

.memberships-product-kind-icon .material-symbols-outlined {
    font-size: 1.45rem;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.memberships-product-kind-copy {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding-top: 0.05rem;
}

.memberships-product-kind-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.2;
}

.memberships-product-kind-desc {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.4;
    font-weight: 500;
}

.memberships-product-kind-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.memberships-product-kind-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: #f1f5f9;
    color: #475569;
}

.memberships-product-kind-option.is-membership.is-selected .memberships-product-kind-tag {
    background: #ede9fe;
    color: #5b21b6;
}

.memberships-product-kind-option.is-package.is-selected .memberships-product-kind-tag {
    background: #d1fae5;
    color: #047857;
}

.memberships-product-kind-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #cbd5e1;
    opacity: 0.55;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.memberships-product-kind-check .material-symbols-outlined {
    font-size: 1.35rem;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.memberships-product-kind-option.is-selected .memberships-product-kind-check {
    color: #6b5bff;
    opacity: 1;
    transform: scale(1.05);
}

.memberships-product-kind-option.is-package.is-selected .memberships-product-kind-check {
    color: #10b981;
}

.memberships-billing-panel {
    display: grid;
    gap: 0.85rem;
}

.memberships-billing-panel[hidden] {
    display: none !important;
}

.memberships-billing-hint {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.4;
}

.memberships-auto-renew-row {
    padding-top: 0.25rem;
}

.memberships-catalog-table tbody td:nth-child(n + 2) .memberships-catalog-pill {
    margin-inline: auto;
}

.memberships-catalog-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.62rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.memberships-catalog-pill.is-membership {
    background: #eef2ff;
    color: #4338ca;
}

.memberships-catalog-pill.is-package {
    background: #ecfdf5;
    color: #047857;
}

@media (max-width: 720px) {
    .memberships-product-kind-picker {
        grid-template-columns: 1fr;
    }
}

.memberships-services-dialog {
    width: min(520px, 96vw);
    max-width: 520px;
    max-height: calc(100vh - 2rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 1.1rem 1.15rem 1rem;
    overflow: hidden;
}

.memberships-services-dialog-head {
    padding-right: 0.25rem;
}

.memberships-services-dialog-head h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #111827;
}

.memberships-services-dialog-head p {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.4;
}

.memberships-services-empty {
    margin: 1rem 0;
}

.memberships-services-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding: 0 0.85rem;
    min-height: 44px;
    border: 1px solid #d5d9e2;
    border-radius: 12px;
    background: #ffffff;
}

.memberships-services-search .material-symbols-outlined {
    font-size: 1.2rem;
    color: #94a3b8;
}

.memberships-services-search input[type='search'] {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 0.95rem;
    outline: none;
}

.memberships-services-search input[type='search']::placeholder {
    color: #94a3b8;
}

.memberships-services-dialog-list {
    max-height: min(52vh, 420px);
    overflow: auto;
    margin: 0.85rem 0 0.25rem;
    border-top: 1px solid #e8ebf0;
}

.memberships-services-category-block + .memberships-services-category-block {
    border-top: 1px solid #e8ebf0;
}

.memberships-services-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 52px;
    padding: 0.7rem 0.15rem;
    border-bottom: 1px solid #e8ebf0;
    cursor: pointer;
    margin: 0;
}

.memberships-services-row:last-child {
    border-bottom: 0;
}

.memberships-services-row input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #111827;
}

.memberships-services-row-label {
    font-size: 0.96rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
}

.memberships-services-count-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #eef1f6;
    color: #5f6b7c;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.memberships-services-row-service {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.memberships-services-service-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.memberships-services-service-copy small {
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 500;
}

.memberships-services-row-price {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.memberships-services-row.is-partial input[type='checkbox'] {
    opacity: 0.85;
}

.memberships-services-no-results {
    margin: 0.85rem 0 0.25rem;
    text-align: center;
    color: #64748b;
    font-size: 0.9rem;
}

.memberships-services-dialog-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e8ebf0;
}

.memberships-services-close-btn,
.memberships-services-apply-btn {
    min-height: 42px;
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
    font-weight: 700;
}

.memberships-services-close-btn {
    border-color: #111827;
    color: #111827;
    background: #ffffff;
}

.memberships-services-apply-btn {
    border: 0;
    background: #111827;
    color: #ffffff;
}

.memberships-services-apply-btn:hover {
    background: #1f2937;
}

.memberships-services-apply-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-body.admin-page-memberships .form-group .is-invalid,
.admin-body.admin-page-memberships-form .form-group input.is-invalid,
.admin-body.admin-page-memberships-form .form-group textarea.is-invalid {
    border-color: #ef4444;
}

.admin-body.admin-page-memberships-form .field-error {
    color: #ef4444;
    font-size: 0.82rem;
}

@media (max-width: 720px) {
    .memberships-fitune-grid-2,
    .memberships-catalog-search {
        flex-direction: column;
        align-items: stretch;
    }

    .memberships-catalog-filter-btn {
        justify-content: center;
    }

    .memberships-catalog-table thead {
        display: none;
    }

    .memberships-catalog-row,
    .memberships-catalog-row td {
        display: block;
        width: 100%;
    }

    .memberships-catalog-row td {
        border-bottom: 0;
        padding: 0.35rem 1rem;
    }

    .memberships-catalog-row td:first-child {
        padding-top: 1rem;
    }

    .memberships-catalog-row td:last-child {
        padding-bottom: 1rem;
        border-bottom: 1px solid #eceef2;
    }

    .memberships-catalog-row td.is-price {
        text-align: left;
        font-weight: 700;
    }
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-comments {
    display: none !important;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-add-row,
.appointments-service-selector.is-bungee-session [data-service-summary-save],
.appointments-service-selector.is-bungee-session .appointments-service-summary-more {
    display: none !important;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-top: 0.85rem;
    padding-bottom: 0.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 22%);
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-actions {
    display: flex !important;
    width: 100%;
}

.appointments-service-selector.is-bungee-session [data-service-summary-checkout] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.appointments-service-selector.is-bungee-session [data-service-summary-checkout][hidden] {
    display: none !important;
}

.appointments-service-selector.is-bungee-session [data-service-summary-checkout]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-status[aria-disabled="true"] {
    pointer-events: none;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-head [data-service-summary-time] strong,
.appointments-service-selector.is-bungee-session .appointments-service-summary-card-copy small strong {
    font-weight: 700;
}

.appointments-service-selector.is-bungee-session:not(.is-booking-locked) [data-service-client-empty] .appointments-service-selector-icon {
    background: rgba(34, 197, 94, 0.16);
    color: #16a34a;
}

.appointments-service-selector.is-bungee-session.is-booking-locked [data-service-client-empty] {
    cursor: not-allowed;
}

.appointments-service-selector.is-bungee-session.is-booking-locked [data-service-client-empty] .appointments-service-selector-icon {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
}

.appointments-service-selector.is-bungee-session.is-booking-locked [data-service-client-empty] .appointments-service-selector-sidecopy h3,
.appointments-service-selector.is-bungee-session.is-booking-locked [data-service-client-empty] .appointments-service-selector-sidecopy p {
    color: #94a3b8;
}

.appointments-service-selector.is-bungee-session.is-booking-locked .bungee-session-attendees-book-grid input,
.appointments-service-selector.is-bungee-session.is-booking-locked .bungee-session-attendees-book-grid select {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Hide checkout & summary footer totals in Bungee group sessions */
.appointments-service-selector.is-bungee-session .appointments-service-checkout-side-footer,
.appointments-service-selector.is-bungee-session .appointments-service-checkout-totals,
.appointments-service-selector.is-bungee-session .appointments-service-summary-totals {
    display: none !important;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-body,
.appointments-service-selector.is-bungee-session .appointments-service-selector-side {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.12) transparent;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-body::-webkit-scrollbar,
.appointments-service-selector.is-bungee-session .appointments-service-selector-side::-webkit-scrollbar {
    width: 2px;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-body::-webkit-scrollbar-track,
.appointments-service-selector.is-bungee-session .appointments-service-selector-side::-webkit-scrollbar-track {
    background: transparent;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-body::-webkit-scrollbar-thumb,
.appointments-service-selector.is-bungee-session .appointments-service-selector-side::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.14);
    border-radius: 999px;
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-body::-webkit-scrollbar-thumb:hover,
.appointments-service-selector.is-bungee-session .appointments-service-selector-side::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.28);
}

.appointments-service-selector.is-bungee-session .appointments-service-summary-body::-webkit-scrollbar-button,
.appointments-service-selector.is-bungee-session .appointments-service-selector-side::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.bungee-session-attendees-panel {
    margin-top: 0;
}

.bungee-session-attendees-panel .appointments-service-summary-section-head {
    margin-bottom: 0.35rem;
}

.bungee-session-attendees-loading,
.bungee-session-attendees-error {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.bungee-session-attendees-error {
    color: #b91c1c;
}

.bungee-session-attendees-tabs {
    display: flex;
    gap: 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
}

.bungee-session-attendees-tier-bar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    min-width: 0;
    overflow: visible;
}

.bungee-session-attendees-tier-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    text-transform: none;
    letter-spacing: 0;
}

.bungee-session-attendees-tier-row {
    display: flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    overflow: visible;
}

.bungee-session-attendees-tier-bar .bungee-capacity-inline-bands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    flex-wrap: nowrap;
}

.bungee-session-attendees-tier-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

.bungee-session-attendees-tier-item-value {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.bungee-session-attendees-tier-item.tier-40 .bungee-session-attendees-tier-item-value {
    color: #0f766e;
}

.bungee-session-attendees-tier-item.tier-60 .bungee-session-attendees-tier-item-value {
    color: #b45309;
}

.bungee-session-attendees-tier-item.tier-100 .bungee-session-attendees-tier-item-value {
    color: #1d4ed8;
}

.bungee-session-attendees-tier-item:not(:last-child) {
    border-right: 1px solid #e2e8f0;
    padding-right: 0.5rem;
    margin-right: 0.15rem;
}

.bungee-capacity-inline-band.has-capacity-tooltip {
    position: relative;
    cursor: help;
}

.bungee-capacity-inline-band.has-capacity-tooltip::after {
    content: attr(data-capacity-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translate(-50%, 4px);
    padding: 0.42rem 0.62rem;
    border-radius: 10px;
    background: #06080f;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(6, 8, 15, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 40;
}

.bungee-capacity-inline-band.has-capacity-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.12rem);
    transform: translate(-50%, 4px);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #06080f;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 39;
}

.bungee-capacity-inline-band.has-capacity-tooltip:hover::after,
.bungee-capacity-inline-band.has-capacity-tooltip:hover::before,
.bungee-capacity-inline-band.has-capacity-tooltip:focus-visible::after,
.bungee-capacity-inline-band.has-capacity-tooltip:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

.bungee-session-attendees-tier-bar .bungee-capacity-inline-bands,
.bungee-capacity-inline-bands {
    overflow: visible;
}

.bungee-session-attendees-tier-bar,
.bungee-capacity-inline {
    overflow: visible;
}

.appointments-calendar-event.is-bungee-class:has(.has-capacity-tooltip:hover),
.appointments-calendar-event.is-bungee-class:has(.has-capacity-tooltip:focus-visible),
.appointments-calendar-event[data-appointment-type="bungee"]:has(.has-capacity-tooltip:hover),
.appointments-calendar-event[data-appointment-type="bungee"]:has(.has-capacity-tooltip:focus-visible) {
    overflow: visible;
    z-index: 12;
}

.bungee-session-attendees-panel:has(.has-capacity-tooltip:hover),
.bungee-session-attendees-panel:has(.has-capacity-tooltip:focus-visible) {
    overflow: visible;
    z-index: 2;
}

.bungee-session-attendees-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bungee-session-attendees-tab.is-active {
    color: #2563eb;
    background: #eff6ff;
}

.bungee-session-attendees-tab:hover:not(.is-active) {
    color: #64748b;
    background: #f8fafc;
}

.bungee-session-attendees-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.bungee-session-attendees-tab-badge.is-muted {
    background: #cbd5e1;
    color: #475569;
}

.bungee-session-attendees-table-head,
.bungee-session-attendees-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
}

.bungee-session-attendees-row * {
    min-width: 0;
    overflow-wrap: break-word;
}

.bungee-session-attendees-table-head {
    padding: 0.55rem 0.85rem;
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
}

.bungee-session-attendees-row {
    padding: 0.7rem 0.5rem;
    border-top: 1px solid #f1f5f9;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.bungee-session-attendees-row:hover {
    background-color: #f8fafc;
}

.bungee-session-attendees-person {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.bungee-session-attendees-avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
    background: #2563eb;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.bungee-session-attendees-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bungee-session-attendees-copy strong {
    font-size: 0.92rem;
    color: #0f172a;
}

.bungee-session-attendees-copy small {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bungee-session-attendees-payment {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
}

.bungee-session-attendees-collect {
    display: flex;
    align-items: center;
}

.bungee-attendee-collect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
    white-space: nowrap;
}

.bungee-attendee-collect-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}

.bungee-attendee-collect-btn .material-symbols-outlined {
    font-size: 1rem;
}

.bungee-attendee-paid-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.bungee-attendee-paid-badge .material-symbols-outlined {
    font-size: 1rem;
}

.bungee-session-attendees-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.bungee-session-attendees-action {
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.bungee-session-attendees-action:not(:disabled):hover {
    transform: translateY(-3px);
    filter: brightness(0.97);
}

.bungee-session-attendees-action.is-present {
    background: #dbeafe;
    color: #2563eb;
    border-color: #1e40af;
}

.bungee-session-attendees-action.is-absent {
    background: #fee2e2;
    color: #dc2626;
    border-color: #991b1b;
}

.bungee-session-attendees-action.is-present.is-active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: scale(1.08);
}

.bungee-session-attendees-action.is-absent.is-active {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35), 0 0 0 4px rgba(220, 38, 38, 0.08);
    transform: scale(1.08);
}

.bungee-session-attendees-action.is-attendance-locked:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bungee-session-attendees-action.is-present:not(:disabled):hover,
.bungee-session-attendees-action.is-present:not(:disabled):focus-visible {
    background: #dbeafe;
    color: #1d4ed8;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
    border-color: #93c5fd;
}

.bungee-session-attendees-action.is-present.is-active:not(:disabled):hover,
.bungee-session-attendees-action.is-present.is-active:not(:disabled):focus-visible {
    background: #1d4ed8;
    color: #ffffff;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45), 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.bungee-session-attendees-action.is-absent:not(:disabled):hover,
.bungee-session-attendees-action.is-absent:not(:disabled):focus-visible {
    background: #fee2e2;
    color: #b91c1c;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.2);
    border-color: #fca5a5;
}

.bungee-session-attendees-action.is-absent.is-active:not(:disabled):hover,
.bungee-session-attendees-action.is-absent.is-active:not(:disabled):focus-visible {
    background: #b91c1c;
    color: #ffffff;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4), 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.bungee-session-attendees-action.is-more:not(:disabled) {
    cursor: pointer;
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.bungee-session-attendees-action.is-more:not(:disabled):hover,
.bungee-session-attendees-action.is-more:not(:disabled):focus-visible {
    background: #f1f5f9;
    color: #0f172a;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.bungee-session-attendees-more-wrap {
    position: relative;
    display: inline-flex;
}

.bungee-session-attendees-more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.55rem);
    z-index: 30;
    display: grid;
    gap: 0.08rem;
    min-width: 12.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}

.bungee-session-attendees-more-menu[hidden] {
    display: none !important;
}

.bungee-session-attendees-more-item {
    display: block;
    width: 100%;
    padding: 0.45rem 0.35rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.bungee-session-attendees-more-item:hover:not(:disabled),
.bungee-session-attendees-more-item:focus-visible:not(:disabled) {
    background: #f8fafc;
    color: #111827;
}

.bungee-session-attendees-more-item:disabled {
    color: #cbd5e1;
    cursor: default;
}

.bungee-session-attendees-more-item.is-danger {
    color: #be123c;
}

.bungee-session-attendees-more-item.is-danger:hover:not(:disabled),
.bungee-session-attendees-more-item.is-danger:focus-visible:not(:disabled) {
    background: #fff1f2;
    color: #be123c;
}

.bungee-session-attendees-more-divider {
    height: 1px;
    margin: 0.35rem 0;
    background: #e5e7eb;
}

.bungee-session-attendees-action:disabled {
    opacity: 0.55;
    cursor: default;
}

.bungee-session-attendees-cancelled-label {
    font-size: 0.78rem;
    color: #94a3b8;
}

.bungee-session-attendees-empty {
    margin: 0.15rem 0 0.55rem;
    padding: 0.35rem 0 0.15rem;
    font-size: 0.84rem;
    color: #94a3b8;
    text-align: center;
}

.bungee-session-attendees-book {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.bungee-session-attendees-roster {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e2e8f0;
}

.bungee-session-attendees-roster-head {
    margin-bottom: 0.65rem;
}

.bungee-session-attendees-roster-head h3 {
    margin: 0;
}

.bungee-session-attendees-book-weight-error {
    margin: 0.65rem 0 0.85rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #991b1b;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.4;
}

.bungee-session-attendees-book-weight-error::before {
    content: '';
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.bungee-session-attendees-book-weight-error.is-checking {
    color: #475569;
    background: transparent;
    border: none;
}

.bungee-session-attendees-book-weight-error.is-checking::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.bungee-session-attendees-book-weight-error.is-blocked {
    color: #92400e;
    background: transparent;
    border: none;
}

.bungee-session-attendees-book-weight-error.is-blocked::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d97706'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.bungee-session-attendees-book-weight-error:empty,
.bungee-session-attendees-book-weight-error:empty::before {
    display: none !important;
}

.bungee-session-attendees-book-field input.is-invalid,
.bungee-session-attendees-book-field select.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.bungee-session-attendees-book-field select:disabled {
    background: #f8fafc;
    color: #334155;
    cursor: not-allowed;
}

.bungee-session-attendees-book-field select.is-tier-40:disabled,
.bungee-session-attendees-book-field.is-tier-40 select:disabled {
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(15, 118, 110, 0.38);
    font-weight: 700;
}

.bungee-session-attendees-book-field select.is-tier-60:disabled,
.bungee-session-attendees-book-field.is-tier-60 select:disabled {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(180, 83, 9, 0.35);
    font-weight: 700;
}

.bungee-session-attendees-book-field select.is-tier-100:disabled,
.bungee-session-attendees-book-field.is-tier-100 select:disabled {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(29, 78, 216, 0.35);
    font-weight: 700;
}

.bungee-session-attendees-book-hint {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    color: #64748b;
}

.bungee-session-attendees-book-grid {
    display: grid;
    grid-template-columns: minmax(4.5rem, 1fr) minmax(0, 1.35fr);
    gap: 0.55rem 0.65rem;
    margin-bottom: 0.55rem;
    align-items: end;
}

.bungee-session-attendees-book-field--band {
    grid-column: 1 / -1;
}

.bungee-session-attendees-book-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.bungee-session-attendees-book-field input,
.bungee-session-attendees-book-field select {
    width: 100%;
    padding: 0.5rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    font: inherit;
    font-weight: 500;
    color: #0f172a;
    background: #fff;
}

.bungee-session-attendees-book-guest {
    margin-bottom: 0.55rem;
}

.bungee-session-attendees-book-submit {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-radius: 0.55rem;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.bungee-session-attendees-book-submit:hover:not(:disabled) {
    background: #1d4ed8;
}

.bungee-session-attendees-list:empty {
    display: none;
}

/* Home Class Bungee refresh */
.site-body.page-home {
    --bungee-ink: #201625;
    --bungee-plum: #3b183f;
    --bungee-rose: #d83f87;
    --bungee-coral: #ff7a59;
    --bungee-cream: #fff7ef;
    --bungee-soft: #fff0f6;
    background: #fffaf6;
}

.site-body.page-home .lh-hero-overlay {
    background:
        linear-gradient(90deg, rgba(32, 22, 37, 0.68) 0%, rgba(59, 24, 63, 0.42) 48%, rgba(32, 22, 37, 0.12) 100%),
        linear-gradient(180deg, rgba(32, 22, 37, 0.08), rgba(32, 22, 37, 0.25));
}

.site-body.page-home .lh-hero-inner.reveal,
.site-body.page-home .lh-contact-cards .reveal {
    opacity: 1;
    transform: none;
}

.site-body.page-home .lh-hero .lh-script {
    font-family: inherit;
    font-size: clamp(1.17rem, 1.65vw, 1.38rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd6e7;
    text-shadow: none;
}

.site-body.page-home .lh-hero h1 {
    max-width: 720px;
    font-family: inherit;
    font-size: clamp(2.75rem, 7vw, 5.85rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    color: #ffffff;
}

.site-body.page-home .lh-hero p {
    max-width: 610px;
    color: rgba(255, 255, 255, 0.9);
}

.site-body.page-home .lh-btn-primary,
.site-body.page-home .btn.btn-primary {
    border: 0;
    background: linear-gradient(135deg, var(--bungee-rose), var(--bungee-coral)) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(216, 63, 135, 0.25);
}

.site-body.page-home .lh-btn-primary:hover,
.site-body.page-home .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(216, 63, 135, 0.32);
}

.site-body.page-home .lh-card,
.site-body.page-home .lh-catalog-strip,
.site-body.page-home .bungee-booking-public-card {
    border: 1px solid rgba(216, 63, 135, 0.1);
    background: #ffffff;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 46px rgba(68, 33, 55, 0.12);
}

.site-body.page-home .lh-card h3,
.site-body.page-home .lh-section-header h2,
.site-body.page-home .lh-booking-head h2 {
    color: var(--bungee-plum);
}

.site-body.page-home .lh-card p {
    color: #55465c;
}

.site-body.page-home .lh-card a {
    background: linear-gradient(135deg, var(--bungee-rose), var(--bungee-plum));
    color: #ffffff;
}

.site-body.page-home .lh-services {
    background:
        linear-gradient(135deg, rgba(255, 248, 242, 0.84), rgba(255, 255, 255, 0.88)),
        url('https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=2200&q=85');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.site-body.page-home .lh-team {
    background:
        linear-gradient(180deg, #fffaf6 0%, #ffffff 55%, #fff7ef 100%);
}

.site-body.page-home .lh-services:not(.lh-services-pro) .lh-services-bg {
    display: none;
}

.site-body.page-home .lh-services::before {
    display: none;
}

.site-body.page-home .lh-services::after {
    display: none;
}

.site-body.page-home .lh-circle-card {
    border: 8px solid #ffffff;
    box-shadow: 0 20px 48px rgba(59, 24, 63, 0.16);
}

.site-body.page-home .lh-circle-card::after {
    background: linear-gradient(145deg, rgba(59, 24, 63, 0.92), rgba(216, 63, 135, 0.86));
}

.site-body.page-home .lh-circle-caption h3,
.site-body.page-home .lh-circle-hover h3 {
    letter-spacing: -0.025em;
}

.site-body.page-home .lh-circle-book {
    background: #ffffff;
    color: var(--bungee-plum);
}

.site-body.page-home .lh-bungee-feature-strip {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(1rem, 2.8vw, 2rem);
    width: min(1080px, 100%);
    margin: 2.25rem auto 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(216, 63, 135, 0.16);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 20px 55px rgba(68, 33, 55, 0.12);
    backdrop-filter: blur(7px);
}

.site-body.page-home .lh-bungee-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.site-body.page-home .lh-bungee-feature-copy span {
    display: inline-flex;
    margin-bottom: 0.65rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(216, 63, 135, 0.12);
    color: var(--bungee-rose);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-body.page-home .lh-bungee-feature-copy h3 {
    margin: 0;
    max-width: 12ch;
    color: var(--bungee-plum);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.site-body.page-home .lh-bungee-feature-copy p {
    margin: 0.9rem 0 1.2rem;
    max-width: 34rem;
    color: #55465c;
}

.site-body.page-home .lh-bungee-feature-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.site-body.page-home .lh-bungee-feature-list article {
    position: relative;
    min-height: 280px;
    padding: 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--feature-image, #f3e8ee) center/cover no-repeat;
    box-shadow: 0 18px 40px rgba(68, 33, 55, 0.14);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s ease;
    cursor: default;
}

.site-body.page-home .lh-bungee-feature-list article::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(45, 20, 40, 0) 0%, rgba(45, 20, 40, 0.55) 70%, rgba(45, 20, 40, 0.82) 100%);
    z-index: 1;
    transition: background 0.45s ease;
}

.site-body.page-home .lh-bungee-feature-list article:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 28px 60px rgba(68, 33, 55, 0.22);
}

.site-body.page-home .lh-bungee-feature-list article:hover::before {
    background: linear-gradient(180deg, rgba(45, 20, 40, 0.1) 0%, rgba(45, 20, 40, 0.6) 60%, rgba(45, 20, 40, 0.88) 100%);
}

.site-body.page-home .lh-bungee-feature-list article:nth-child(1) {
    --feature-image: url('https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=900&q=85');
}

.site-body.page-home .lh-bungee-feature-list article:nth-child(2) {
    --feature-image: url('https://images.unsplash.com/photo-1534258936925-c58bed479fcb?auto=format&fit=crop&w=900&q=85');
}

.site-body.page-home .lh-bungee-feature-list article:nth-child(3) {
    --feature-image: url('https://images.unsplash.com/photo-1518310383802-640c2de311b2?auto=format&fit=crop&w=900&q=85');
}

.site-body.page-home .lh-bungee-feature-card__body {
    position: relative;
    z-index: 2;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-body.page-home .lh-bungee-feature-list strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.55rem;
}

.site-body.page-home .lh-bungee-feature-list h4 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-body.page-home .lh-bungee-feature-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.5;
}

.site-body.page-home .lh-portfolio {
    background:
        linear-gradient(180deg, #ffffff 0%, #fffaf6 100%);
}

.site-body.page-home .lh-portfolio::before {
    background: radial-gradient(circle, rgba(216, 63, 135, 0.08), transparent 64%);
}

.site-body.page-home .lh-portfolio-head h2 {
    font-family: inherit;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--bungee-plum);
}

.site-body.page-home .lh-portfolio-shot {
    background: #f5dce8;
    box-shadow: 0 18px 38px rgba(68, 33, 55, 0.14);
}

.site-body.page-home .lh-calm-overlay,
.site-body.page-home .bungee-booking-public-overlay {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(59, 24, 63, 0.62) 48%, rgba(216, 63, 135, 0.42) 100%),
        rgba(20, 14, 24, 0.18);
}

.site-body.page-home .lh-calm-head p {
    max-width: 52ch;
    margin-inline: auto;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

.site-body.page-home .lh-calm-grid {
    gap: 1rem;
    align-items: stretch;
}

.site-body.page-home .lh-calm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding: 1.35rem 1.15rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.site-body.page-home .lh-calm-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 0.85rem;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--bungee-rose), var(--bungee-coral));
    box-shadow: 0 10px 24px rgba(216, 63, 135, 0.35);
}

.site-body.page-home .lh-calm-card h3 {
    margin: 0 0 0.55rem;
    font-size: clamp(1.05rem, 2.2vw, 1.28rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.site-body.page-home .lh-calm-card p {
    margin: 0;
    max-width: 30ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.site-body.page-home .lh-calm-foot {
    margin-top: 1.5rem;
    text-align: center;
}

.site-body.page-home .lh-calm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.7rem 1.45rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--bungee-plum, #3b183f) !important;
    font-size: 0.94rem;
    font-weight: 800;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-body.page-home .lh-calm-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.34);
}

.site-body.page-home .lh-icon,
.site-body.page-home .bungee-booking-public-step-num {
    background: linear-gradient(135deg, var(--bungee-rose), var(--bungee-coral));
    color: #ffffff;
}

.site-body.page-home .lh-proof {
    background:
        radial-gradient(circle at 18% 18%, rgba(216, 63, 135, 0.08), transparent 28%),
        linear-gradient(180deg, #fffaf6 0%, #ffffff 100%);
}

.site-body.page-home .lh-proof-bg {
    opacity: 0.24;
    filter: saturate(0.78) contrast(1.02);
}

.site-body.page-home .lh-proof-stats {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(6px);
}

.site-body.page-home .lh-proof-stat,
.site-body.page-home .lh-proof-slide {
    border-color: rgba(216, 63, 135, 0.12);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    color: var(--bungee-ink);
    box-shadow: 0 18px 40px rgba(68, 33, 55, 0.1);
}

.site-body.page-home .lh-proof-quote,
.site-body.page-home .lh-proof-role,
.site-body.page-home .lh-proof-label {
    color: #5e4f65;
}

.site-body.page-home .lh-proof-value,
.site-body.page-home .lh-proof-slide h3 {
    color: var(--bungee-plum);
}

.site-body.page-home .lh-team-front,
.site-body.page-home .lh-team-back {
    border: none;
    background: #ffffff;
}

.site-body.page-home .lh-team-face {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.site-body.page-home .lh-team-card:hover .lh-team-face {
    box-shadow: 0 16px 48px rgba(216, 63, 135, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.site-body.page-home .lh-team-front .lh-team-body {
    background: #fff;
}

.site-body.page-home .lh-team-back {
    background: linear-gradient(145deg, var(--bungee-plum), #6b245c);
}

.site-body.page-home .bungee-booking-public-steps button.is-active,
.site-body.page-home .bungee-booking-public-slot:hover,
.site-body.page-home .bungee-booking-public-slot.is-selected {
    border-color: var(--bungee-rose);
    box-shadow: 0 12px 28px rgba(216, 63, 135, 0.16);
}

.site-body.page-home .bungee-booking-public-slot strong,
.site-body.page-home .bungee-booking-public-packages li span {
    color: var(--bungee-rose) !important;
}

.site-body.page-home .bungee-booking-public-band:has(input:checked) {
    border-color: var(--bungee-rose);
    box-shadow: 0 14px 34px rgba(216, 63, 135, 0.18);
}

.site-body.page-home .bk-flow .bungee-booking-public-card {
    border-color: rgba(216, 63, 135, 0.2);
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 250, 252, 0.97) 45%,
        rgba(255, 245, 249, 0.95) 100%
    );
}

.site-body.page-home .bk-flow .lh-booking-head h2 {
    background: linear-gradient(135deg, var(--bungee-plum) 0%, var(--bungee-rose) 52%, var(--bungee-coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-body.page-home .bk-flow .bk-class-row-spots,
.site-body.page-home .bk-flow .bk-weight-row-cap {
    color: var(--bungee-rose);
}

.site-body.page-home .bk-flow .bk-actions .btn-primary,
.site-body.page-home .bk-flow .bk-session-cta {
    background: linear-gradient(135deg, var(--bungee-rose), var(--bungee-coral));
    color: #fff;
}

.site-body.page-home .bk-flow .bk-date-nav svg path {
    fill: #334155;
}

.site-body.page-home .bk-flow .bk-date-nav:hover:not(:disabled) svg path {
    fill: var(--bungee-rose);
}

@media (max-width: 760px) {
    .site-body.page-home .lh-hero h1 {
        font-size: clamp(2.35rem, 13vw, 4rem);
    }

    .site-body.page-home .lh-bungee-feature-strip,
    .site-body.page-home .lh-bungee-feature-list {
        grid-template-columns: 1fr;
    }

    .site-body.page-home .lh-bungee-feature-list article {
        min-height: 240px;
    }

    .site-body.page-home .lh-bungee-feature-card__body {
        padding: 1.2rem;
    }

    .site-body.page-home .lh-calm-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }

    .site-body.page-home .lh-calm-card {
        padding: 1.15rem;
    }

    .site-body.page-home .lh-calm-card p {
        max-width: none;
    }
}

/* Grupal classes — clean feature card */
.lh-services-pro {
    --lh-pro-rose: #d83f87;
    --lh-pro-coral: #ff6b6b;
    --lh-pro-plum: #3b183f;
    padding: 0 0 2rem;
}

.lh-services-pro .lh-services-bg {
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    overflow: hidden;
    background-color: #f5f5f5;
    position: absolute;
    top: 0;
}

.lh-services-pro .lh-services-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 1;
}

.lh-services-pro .lh-services-bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lh-services-pro-shell {
    position: relative;
    z-index: 1;
    padding-bottom: 0;
}

.lh-services-pro-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 0.5rem;
    padding-top: 2rem;
}

.lh-services-pro-head h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 3.2vw, 2.45rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--lh-pro-plum);
}

.lh-services-pro-head p {
    margin: 0 0 1rem 0;
    color: #5a6678;
    font-size: 1.3rem;
    line-height: 1.5;
}

.lh-class-showcase {
    display: grid;
    gap: 1.25rem;
    max-width: 980px;
    margin: 0 auto 0;
}

.lh-class-showcase.is-multi {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    max-width: 1100px;
}

.lh-class-card {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(216, 63, 135, 0.14);
    background: #fff;
    box-shadow: 0 22px 50px rgba(59, 24, 63, 0.1);
    position: relative;
}

.lh-class-showcase.is-multi .lh-class-card {
    grid-template-columns: 1fr;
}

/* Package card background image */
/* Legacy pkg-bg (kept for any other usage) */
.lh-class-card-pkg-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.lh-class-card-pkg-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
    filter: saturate(1.4) brightness(1.05);
    transition: opacity .3s ease, transform .5s ease;
}
.lh-class-card:hover .lh-class-card-pkg-bg img {
    opacity: .6;
    transform: scale(1.03);
}

/* ── Premium package card themes ────────────────────────────────── */
/* Shared base for themed cards */
.lh-class-card[class*="is-theme-"] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
}
.lh-card-theme-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
/* body text for themed cards */
.lh-class-card[class*="is-theme-"] .lh-class-card-body {
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.lh-class-card[class*="is-theme-"] .lh-class-card-tag {
    background: rgba(255,255,255,.85);
    color: #1a1a1a;
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    backdrop-filter: blur(10px);
}
.lh-class-card[class*="is-theme-"] .lh-class-card-body h3 {
    color: #ffffff;
    font-size: clamp(1.15rem, 2.2vw, 1.42rem);
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.lh-class-card[class*="is-theme-"] .lh-class-card-lead {
    color: rgba(255,255,255,.85);
}
/* metrics glass for themed cards */
.lh-class-card[class*="is-theme-"] .lh-class-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .5rem;
    margin-top: .75rem;
    padding: .65rem;
    border-radius: 14px;
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.55);
    box-shadow:
        0 10px 28px rgba(0,0,0,.32),
        0 0 0 1px rgba(0,0,0,.15) inset,
        inset 0 1px 0 rgba(255,255,255,.22);
}
.lh-class-card[class*="is-theme-"] .lh-class-card-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .7rem .4rem .6rem;
    text-align: center;
    border-radius: 12px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .2s, background .2s;
}
.lh-class-card[class*="is-theme-"] .lh-class-card-metric:hover {
    background: rgba(255,255,255,.28);
    transform: translateY(-2px);
}
.lh-class-card[class*="is-theme-"] .lh-class-card-metric-icon {
    color: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.lh-class-card[class*="is-theme-"] .lh-class-card-metric-label {
    color: rgba(255,255,255,.9);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.lh-class-card[class*="is-theme-"] .lh-class-card-metric-value {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
/* price-note */
.lh-class-card[class*="is-theme-"] .lh-class-card-price-note {
    margin: .45rem 0 0;
    padding: .4rem .65rem;
    border-radius: 8px;
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(255,255,255,.35);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}
/* coverage */
.lh-class-card[class*="is-theme-"] .lh-class-card-coverage {
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    padding: .6rem .8rem;
    backdrop-filter: blur(6px);
}
.lh-class-card[class*="is-theme-"] .lh-class-card-coverage-label {
    color: rgba(255,255,255,.6);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.lh-class-card[class*="is-theme-"] .lh-class-card-coverage-list li {
    color: rgba(255,255,255,.9);
}
.lh-class-card[class*="is-theme-"] .lh-class-card-coverage-list li::before {
    color: rgba(255,255,255,.5);
}
/* CTA dark */
.lh-class-card[class*="is-theme-"] .lh-class-card-cta {
    margin-top: .35rem;
    min-width: min(100%,180px);
    min-height: 44px;
    justify-content: center;
    background: #1a1a1a;
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.3) inset;
    transition: background .25s, transform .2s, box-shadow .25s;
}
.lh-class-card[class*="is-theme-"] .lh-class-card-cta:hover {
    background: #000000;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.4) inset;
}

/* ═══ IMPULSO JUMP — Rocket / speed ════════════════════════════════ */
.is-theme-impulso {
    background: linear-gradient(160deg, #0c2d3e 0%, #0a3d5c 40%, #0e4d6e 70%, #1a6e8e 100%);
}
.is-theme-impulso .lh-card-theme-decor::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(56,189,248,.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: impulsoGlow 3s ease-in-out infinite;
}
.is-theme-impulso .lh-card-theme-decor::after {
    content: '🚀';
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 3.2rem;
    opacity: .55;
    filter: drop-shadow(0 4px 12px rgba(56,189,248,.5));
    animation: impulsoFly 2.2s ease-in-out infinite;
}
@keyframes impulsoGlow {
    0%,100% { transform: scale(1); opacity: .5; }
    50% { transform: scale(1.2); opacity: 1; }
}
@keyframes impulsoFly {
    0%,100% { transform: translateY(0) rotate(-15deg) scale(1); }
    30% { transform: translateY(-14px) rotate(-8deg) scale(1.08); }
    60% { transform: translateY(-6px) rotate(-18deg) scale(.95); }
}
/* speed lines */
.is-theme-impulso .lh-card-theme-decor .lh-theme-particles,
.is-theme-impulso .lh-card-theme-decor .lh-theme-particles span {
    position: absolute;
}
.is-theme-impulso .lh-card-theme-decor {
    background:
        linear-gradient(180deg, transparent 30%, rgba(56,189,248,.1) 100%);
}

/* ═══ MODO BUNGEE — Fire / intensity ═══════════════════════════════ */
.is-theme-modo {
    background: linear-gradient(160deg, #3b1010 0%, #5c1a0a 40%, #7c2410 70%, #9a3015 100%);
}
.is-theme-modo .lh-card-theme-decor::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(251,146,60,.28) 0%, transparent 70%);
    animation: modoFlame 2s ease-in-out infinite;
}
.is-theme-modo .lh-card-theme-decor::after {
    content: '🔥';
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 3.4rem;
    opacity: .6;
    filter: drop-shadow(0 4px 16px rgba(251,146,60,.6));
    animation: modoBurn 1.4s ease-in-out infinite;
}
@keyframes modoFlame {
    0%,100% { transform: translateX(-50%) scaleY(1); opacity: .6; }
    50% { transform: translateX(-50%) scaleY(1.15); opacity: 1; }
}
@keyframes modoBurn {
    0%,100% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(1.12) rotate(5deg); }
    40% { transform: scale(.92) rotate(-4deg); }
    60% { transform: scale(1.08) rotate(3deg); }
    80% { transform: scale(.96) rotate(-2deg); }
}
.is-theme-modo .lh-card-theme-decor {
    background:
        linear-gradient(0deg, rgba(251,146,60,.1) 0%, transparent 50%);
}

/* ═══ ELITE JUMPUP — Crown / royalty ═══════════════════════════════ */
.is-theme-elite {
    background: linear-gradient(160deg, #1a0f3c 0%, #2e1560 40%, #3d1a7a 70%, #5b21b6 100%);
}
.is-theme-elite .lh-card-theme-decor::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(250,204,21,.2) 0%, transparent 65%);
    border-radius: 50%;
    animation: eliteGlow 3s ease-in-out infinite;
}
.is-theme-elite .lh-card-theme-decor::after {
    content: '👑';
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 3.4rem;
    opacity: .6;
    filter: drop-shadow(0 4px 16px rgba(250,204,21,.5));
    animation: eliteCrown 2s ease-in-out infinite;
}
/* sparkle dots */
.is-theme-elite .lh-card-theme-decor .lh-theme-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251,191,36,.6);
    animation: eliteSparkle 1.6s ease-in-out infinite;
}
.is-theme-elite .lh-card-theme-decor .lh-theme-sparkle:nth-child(1) { top: 22%; left: 10%; animation-delay: 0s; width: 7px; height: 7px; }
.is-theme-elite .lh-card-theme-decor .lh-theme-sparkle:nth-child(2) { top: 58%; left: 6%; animation-delay: .5s; width: 5px; height: 5px; }
.is-theme-elite .lh-card-theme-decor .lh-theme-sparkle:nth-child(3) { top: 12%; left: 42%; animation-delay: 1s; width: 8px; height: 8px; }
.is-theme-elite .lh-card-theme-decor .lh-theme-sparkle:nth-child(4) { top: 68%; right: 12%; animation-delay: .3s; width: 6px; height: 6px; }
.is-theme-elite .lh-card-theme-decor .lh-theme-sparkle:nth-child(5) { top: 38%; right: 6%; animation-delay: .8s; width: 5px; height: 5px; }
@keyframes eliteGlow {
    0%,100% { transform: translateX(-50%) scale(1); opacity: .5; }
    50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}
@keyframes eliteCrown {
    0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
    25% { transform: translateY(-8px) rotate(5deg) scale(1.06); }
    50% { transform: translateY(-3px) rotate(-3deg) scale(1.02); }
    75% { transform: translateY(-6px) rotate(2deg) scale(1.04); }
}
@keyframes eliteSparkle {
    0%,100% { opacity: .1; transform: scale(1); }
    50% { opacity: .8; transform: scale(1.8); }
}
.is-theme-elite .lh-card-theme-decor {
    background:
        linear-gradient(180deg, rgba(250,204,21,.08) 0%, transparent 40%);
}

/* ═══ NIVEL IMPARABLE — Stars / power ══════════════════════════════ */
.is-theme-imparable {
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 40%, #312e81 70%, #4338ca 100%);
}
.is-theme-imparable .lh-card-theme-decor::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -30px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(129,140,248,.28) 0%, transparent 70%);
    border-radius: 50%;
    animation: impGlow 3s ease-in-out infinite;
}
.is-theme-imparable .lh-card-theme-decor::after {
    content: '⚡';
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 3.4rem;
    opacity: .55;
    filter: drop-shadow(0 4px 14px rgba(129,140,248,.5));
    animation: impBolt 1.6s ease-in-out infinite;
}
/* star particles */
.is-theme-imparable .lh-card-theme-decor .lh-theme-star {
    position: absolute;
    color: #818cf8;
    font-size: 1.2rem;
    opacity: .25;
    text-shadow: 0 0 8px rgba(129,140,248,.5);
    animation: impStar 2.2s ease-in-out infinite;
}
.is-theme-imparable .lh-card-theme-decor .lh-theme-star:nth-child(1) { top: 18%; left: 8%; animation-delay: 0s; font-size: 1.3rem; }
.is-theme-imparable .lh-card-theme-decor .lh-theme-star:nth-child(2) { top: 52%; left: 4%; animation-delay: .5s; font-size: .9rem; }
.is-theme-imparable .lh-card-theme-decor .lh-theme-star:nth-child(3) { top: 30%; right: 10%; animation-delay: 1s; font-size: 1.4rem; }
.is-theme-imparable .lh-card-theme-decor .lh-theme-star:nth-child(4) { bottom: 18%; left: 18%; animation-delay: .3s; font-size: 1rem; }
.is-theme-imparable .lh-card-theme-decor .lh-theme-star:nth-child(5) { bottom: 28%; right: 22%; animation-delay: .8s; font-size: .8rem; }
@keyframes impGlow {
    0%,100% { transform: scale(1); opacity: .4; }
    50% { transform: scale(1.2); opacity: 1; }
}
@keyframes impBolt {
    0%,100% { transform: scale(1) rotate(0deg); opacity: .4; }
    25% { transform: scale(1.2) rotate(8deg); opacity: .7; }
    50% { transform: scale(.9) rotate(-5deg); opacity: .35; }
    75% { transform: scale(1.1) rotate(4deg); opacity: .6; }
}
@keyframes impStar {
    0%,100% { opacity: .15; transform: scale(1) rotate(0deg); }
    50% { opacity: .6; transform: scale(1.5) rotate(20deg); }
}
.is-theme-imparable .lh-card-theme-decor {
    background:
        linear-gradient(180deg, rgba(129,140,248,.08) 0%, transparent 45%);
}

.lh-class-card-media {
    position: relative;
    min-height: 260px;
    background: #f3f5f8;
}

.lh-class-showcase.is-multi .lh-class-card-media {
    min-height: 220px;
}

.lh-class-card-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center 22%;
}

.lh-class-card-schedule {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(59, 24, 63, 0.82);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lh-class-showcase.is-editorial .lh-class-card-savings {
    position: absolute;
    top: 0;
    right: 0;
    background: #e63946;
    color: #ffffff;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
}

.lh-class-showcase.is-editorial .lh-class-card-body {
    position: relative;
    isolation: isolate;
    gap: 0.6rem;
    padding: 1.25rem 1.35rem 1.4rem;
    color: #ffffff;
    background: transparent;
}

.lh-class-showcase.is-editorial .lh-class-card-savings-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}

.lh-class-showcase.is-editorial .lh-class-card-savings-amount {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
}

.lh-class-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.85rem);
}

.lh-class-card-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(216, 63, 135, 0.1);
    color: var(--lh-pro-rose);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lh-class-card-body h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--lh-pro-plum);
}

.lh-class-card-lead {
    margin: 4px 0 0;
    color: #7c3aed;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 0 8px rgba(124, 58, 237, .25);
    letter-spacing: .01em;
    max-width: 46ch;
}

.lh-class-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    margin: 0.15rem 0 0;
}

.lh-class-card-facts div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lh-class-card-facts dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a96a8;
}

.lh-class-card-facts dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--lh-pro-plum);
}

.lh-class-card-cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lh-pro-rose), var(--lh-pro-coral));
    color: #fff !important;
    font-size: 0.94rem;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(216, 63, 135, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lh-class-card-cta:hover,
.lh-class-card-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(216, 63, 135, 0.3);
}

.lh-services-pro-features-wrap {
    position: relative;
    z-index: 1;
    padding-bottom: 2.5rem;
}

.lh-services-pro-features-wrap .lh-bungee-feature-strip {
    margin-top: 0;
}

.site-body.page-home .lh-services-pro {
    background: transparent;
}

.site-body.page-home .lh-services-pro .lh-services-bg {
    display: block;
    opacity: 1;
}

.site-body.page-home .lh-services-pro-head h2 {
    color: var(--bungee-plum);
}

.site-body.page-home .lh-class-card {
    border-color: rgba(216, 63, 135, 0.16);
}

.site-body.page-home .lh-class-card-cta {
    background: linear-gradient(135deg, var(--bungee-rose), var(--bungee-coral));
}

@media (max-width: 860px) {
    .lh-class-card {
        grid-template-columns: 1fr;
    }

    .lh-class-card-media {
        min-height: 240px;
    }

    .lh-class-card-body {
        padding: 1.25rem 1.35rem 1.5rem;
    }

    .lh-class-card-lead {
        max-width: none;
    }
}

/* Editorial stack — imagen arriba, cuerpo oscuro con textura (home pro) */
.lh-class-showcase.is-editorial {
    max-width: min(760px, 100%);
}

.lh-class-showcase.is-editorial.is-multi {
    max-width: min(1080px, 100%);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 0.85rem;
}

.lh-class-showcase.is-editorial .lh-class-card {
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow:
        0 20px 60px rgba(102, 126, 234, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lh-class-showcase.is-editorial .lh-class-card:nth-child(2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow:
        0 20px 60px rgba(245, 87, 108, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.lh-class-showcase.is-editorial .lh-class-card:nth-child(3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow:
        0 20px 60px rgba(79, 172, 254, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.lh-class-showcase.is-editorial .lh-class-card:nth-child(4) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    box-shadow:
        0 20px 60px rgba(67, 233, 123, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.lh-class-showcase.is-editorial .lh-class-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: left 0.5s ease;
    pointer-events: none;
}

.lh-class-showcase.is-editorial .lh-class-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 30px 80px rgba(102, 126, 234, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.lh-class-showcase.is-editorial .lh-class-card:nth-child(2):hover {
    box-shadow:
        0 30px 80px rgba(245, 87, 108, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.lh-class-showcase.is-editorial .lh-class-card:nth-child(3):hover {
    box-shadow:
        0 30px 80px rgba(79, 172, 254, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.lh-class-showcase.is-editorial .lh-class-card:nth-child(4):hover {
    box-shadow:
        0 30px 80px rgba(67, 233, 123, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.lh-class-showcase.is-editorial .lh-class-card:hover::before {
    left: 100%;
}

.lh-class-showcase.is-editorial .lh-class-card-media {
    min-height: clamp(150px, 24vw, 200px);
}

.lh-class-showcase.is-editorial .lh-class-card-body {
    position: relative;
    isolation: isolate;
    gap: 0.6rem;
    padding: 1.25rem 1.35rem 1.4rem;
    color: #ffffff;
    background: transparent;
}

.lh-class-showcase.is-editorial .lh-class-card-body::before {
    display: none;
}

.lh-class-showcase.is-editorial .lh-class-card-body::after {
    display: none;
}

.lh-class-showcase.is-editorial .lh-class-card-body > * {
    position: relative;
    z-index: 1;
}

.lh-class-showcase.is-editorial .lh-class-card-tag {
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.lh-class-showcase.is-editorial .lh-class-card-body h3 {
    color: #ffffff;
    font-size: clamp(1.15rem, 2.2vw, 1.42rem);
    line-height: 1.2;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.65),
        0 3px 14px rgba(0, 0, 0, 0.45);
}

.lh-class-showcase.is-editorial .lh-class-card-lead {
    margin: 0;
    max-width: none;
    color: #ffffff;
    font-size: 0.94rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 2px 10px rgba(0, 0, 0, 0.35);
}

.lh-class-showcase.is-editorial .lh-class-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.65rem;
    padding: 0.55rem;
    border-radius: 14px;
    background: rgba(8, 18, 32, 0.48);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(0, 0, 0, 0.15) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.lh-class-showcase.is-editorial .lh-class-card-metrics.is-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lh-class-showcase.is-editorial .lh-class-card-metrics.is-cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.lh-class-showcase.is-editorial .lh-class-card-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.55rem 0.35rem 0.5rem;
    text-align: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lh-class-showcase.is-editorial .lh-class-card-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.lh-class-showcase.is-editorial .lh-class-card-metric-label {
    display: block;
    width: 100%;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.lh-class-showcase.is-editorial .lh-class-card-metric-value {
    display: block;
    width: 100%;
    margin: 0;
    font-size: clamp(0.92rem, 2.8vw, 1.08rem);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    word-break: normal;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.lh-class-showcase.is-editorial .lh-class-card-metric--price .lh-class-card-metric-value {
    font-size: clamp(1rem, 3vw, 1.18rem);
}

.lh-class-showcase.is-editorial .lh-class-card-metric--validity .lh-class-card-metric-value {
    font-size: clamp(0.82rem, 2.4vw, 0.96rem);
    line-height: 1.25;
}

.lh-class-showcase.is-editorial .lh-class-card-price-note {
    margin: 0.45rem 0 0;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.lh-class-showcase.is-editorial .lh-class-card-coverage {
    margin-top: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.lh-class-showcase.is-editorial .lh-class-card-coverage-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.lh-class-showcase.is-editorial .lh-class-card-coverage-all {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.lh-class-showcase.is-editorial .lh-class-card-coverage-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lh-class-showcase.is-editorial .lh-class-card-coverage-list li {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-class-showcase.is-editorial .lh-class-card-coverage-list .lh-class-card-coverage-more {
    background: rgba(255, 255, 255, 0.22);
    border-style: dashed;
}

.lh-class-showcase.is-editorial .lh-class-card-facts {
    margin-top: 0.25rem;
    gap: 0.6rem 1.2rem;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

@media (max-width: 420px) {
    .lh-class-showcase.is-editorial .lh-class-card-metrics,
    .lh-class-showcase.is-editorial .lh-class-card-metrics.is-cols-2,
    .lh-class-showcase.is-editorial .lh-class-card-metrics.is-cols-3 {
        grid-template-columns: 1fr;
    }

    .lh-class-showcase.is-editorial .lh-class-card-metric {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.65rem;
        padding: 0.65rem 0.75rem;
        text-align: left;
    }

    .lh-class-showcase.is-editorial .lh-class-card-metric-label,
    .lh-class-showcase.is-editorial .lh-class-card-metric-value {
        width: auto;
    }

    .lh-class-showcase.is-editorial .lh-class-card-metric-label {
        flex: 1 1 auto;
        min-width: 0;
    }

    .lh-class-showcase.is-editorial .lh-class-card-metric-value {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

.lh-class-showcase.is-editorial .lh-class-card-cta {
    margin-top: 0.35rem;
    min-width: min(100%, 180px);
    min-height: 42px;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    font-size: 0.92rem;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.3) inset;
    background: #1a1a1a;
    color: #ffffff;
    font-weight: 700;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lh-class-showcase.is-editorial .lh-class-card-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    transition: left 0.5s ease;
}

.lh-class-showcase.is-editorial .lh-class-card-cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.4) inset;
    background: #000000;
    color: #ffffff;
}

.lh-class-showcase.is-editorial .lh-class-card-cta:hover::before {
    left: 100%;
}

.lh-services-pro-error,
.lh-services-pro-empty {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(216, 63, 135, 0.18);
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
    color: #4f5d70;
}

.lh-packages-empty {
    max-width: min(560px, 100%);
    margin: 0.5rem auto 0;
    padding: clamp(1.75rem, 4vw, 2.35rem) clamp(1.25rem, 4vw, 2rem);
    border-radius: 22px;
    text-align: center;
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(59, 24, 63, 0.58)),
        rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.34);
    box-shadow:
        0 22px 50px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lh-packages-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 1rem;
    border-radius: 18px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.lh-packages-empty-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.15rem, 2.6vw, 1.45rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.lh-packages-empty-message {
    margin: 0 auto;
    max-width: 42ch;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.lh-packages-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 1.15rem;
    padding: 0.65rem 1.35rem;
    border-radius: 999px;
    background: #ffffff;
    color: #3b183f !important;
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lh-packages-empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.site-body.page-home .lh-class-showcase.is-editorial .lh-class-card-body h3 {
    color: #ffffff;
}

.site-body.page-home .lh-class-showcase.is-editorial .lh-class-card-cta {
    background: #1a1a1a;
    color: #ffffff;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.3) inset;
}

.site-body.page-home .lh-class-showcase.is-editorial .lh-class-card-cta:hover {
    background: #000000;
    color: #ffffff;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.4) inset;
}

.admin-sidebar-brand {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.45rem;
    padding: 0 0.15rem 0.35rem;
    border-bottom: 1px solid rgba(178, 191, 209, 0.22);
}

.admin-sidebar-tagline {
    display: none;
    margin: 0;
    color: rgba(226, 234, 248, 0.88);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-wrap: balance;
}

.admin-body.admin-mobile-sidebar-open .admin-sidebar-tagline {
    display: block;
}

@media (max-width: 760px) {
    .lh-class-showcase.is-editorial.is-multi {
        grid-template-columns: 1fr;
    }

    .lh-class-showcase.is-editorial .lh-class-card-media {
        min-height: 160px;
    }
}

/* Bungee booking variables (public + admin) */
.bk-booking-fields {
    margin-top: 1.25rem;
    padding-top: 0.25rem;
}

.bk-booking-field + .bk-booking-field {
    margin-top: 1rem;
}

.bk-booking-field-label .bk-required {
    color: var(--bungee-rose, #d83f87);
}

.bk-booking-field-input {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(25, 32, 42, 0.14);
    border-radius: 12px;
    font: inherit;
    background: #fff;
}

.bk-booking-fields-actions {
    margin-top: 1rem;
}

.bk-weight-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bk-weight-filter-btn {
    flex: 1 1 auto;
    min-width: 7.5rem;
    padding: 0.65rem 0.85rem;
    border: 2px solid rgba(25, 32, 42, 0.12);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.bk-weight-filter-btn.is-active {
    border-color: var(--bungee-rose, #d83f87);
    background: rgba(216, 63, 135, 0.08);
    color: var(--bungee-plum, #5c1a4a);
}

.bungee-booking-variables-panel {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(25, 32, 42, 0.1);
}

.bungee-booking-variables-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.bungee-booking-variables-head h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.bungee-booking-variables-head p {
    margin: 0;
    max-width: 42rem;
    color: var(--lh-muted, #5d6879);
    font-size: 0.92rem;
}

.bungee-booking-var-row {
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(25, 32, 42, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
}

.bungee-booking-var-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bungee-booking-var-grid {
    gap: 0.75rem;
}

.bungee-booking-var-required {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.bungee-booking-var-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

.bungee-booking-var-option-row {
    display: grid;
}

/* Packages section in booking form */
.bk-packages-section {
    margin: 1.25rem 0;
    padding: 1.5rem;
    border: 1.5px solid rgba(216, 63, 135, 0.15);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 245, 249, 0.85) 0%, rgba(255, 251, 253, 0.92) 50%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0 4px 24px rgba(59, 24, 63, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.bk-packages-section.bk-highlight-pulse {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 4px 24px rgba(220, 38, 38, 0.15);
    animation: bk-pulse-red 0.6s ease-in-out 3;
}

@keyframes bk-pulse-red {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 4px 24px rgba(220, 38, 38, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.35), 0 4px 32px rgba(220, 38, 38, 0.25); }
}

.bk-packages-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bungee-rose, #d83f87), var(--bungee-coral, #ff7a59), var(--bungee-rose, #d83f87));
    border-radius: 20px 20px 0 0;
}

.bk-packages-section__header {
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.bk-packages-section__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bk-plum, #3b1843);
}

.bk-packages-section__subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--bk-muted, #7f8fa4);
    line-height: 1.45;
}

/* Redeem code banner */
.bk-redeem-banner {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
    padding: 1.15rem 1.25rem;
    border: 2px dashed rgba(216, 63, 135, 0.55);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(216, 63, 135, 0.1), rgba(168, 85, 247, 0.1));
    box-shadow: 0 4px 16px rgba(216, 63, 135, 0.12);
}
.bk-redeem-banner.is-applied {
    border-style: solid;
    border-color: rgba(5, 150, 105, 0.6);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.08));
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.15);
}
.bk-redeem-banner.is-applied .bk-redeem-banner__info svg {
    color: #059669;
}
.bk-redeem-banner__info {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bk-plum, #3b1843);
}
.bk-redeem-banner__info svg {
    flex-shrink: 0;
    color: #d83f87;
}
.bk-redeem-banner__form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.bk-redeem-banner__form input {
    flex: 1;
    min-width: 160px;
    border: 1.5px solid rgba(216, 63, 135, 0.25);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.bk-redeem-banner__form input:focus {
    border-color: #d83f87;
    box-shadow: 0 0 0 3px rgba(216, 63, 135, 0.12);
}
.bk-redeem-banner__form button {
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #d83f87, #a855f7);
    box-shadow: 0 4px 12px rgba(216, 63, 135, 0.3);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.bk-redeem-banner__form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(216, 63, 135, 0.4);
}
.bk-redeem-banner__form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.bk-redeem-banner__hint {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}
/* Redeem bookings list */
.bk-redeem-bookings {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(0,0,0,0.08);
}
.bk-redeem-bookings__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bk-plum, #3b1843);
    margin-bottom: 0.5rem;
}
.bk-redeem-booking__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.bk-redeem-booking__item:last-child {
    border-bottom: none;
}
.bk-redeem-booking__date {
    font-weight: 700;
    color: #d83f87;
    white-space: nowrap;
}
.bk-redeem-booking__time {
    color: #7f8fa4;
    white-space: nowrap;
}
.bk-redeem-booking__title {
    color: var(--bk-plum, #3b1843);
    font-weight: 500;
    flex: 1;
    text-align: right;
}
/* Readonly checkout fields */
.bk-flow input.is-readonly,
.bk-flow input.is-readonly:focus {
    background: #ffffff !important;
    color: #1f2937 !important;
    cursor: not-allowed;
    border-color: #a7f3d0 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08) !important;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.7rem center !important;
    background-size: 1rem !important;
}

.bk-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.bk-packages-list {
    display: contents;
}

.bk-package-card {
    padding: 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.bk-package-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bk-package-card:hover {
    border-color: #6366f1;
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(99, 102, 241, 0.15);
}

.bk-package-card:hover::before {
    opacity: 1;
}

.bk-package-card.is-selected {
    border: 3px solid #6366f1;
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.15), 0 20px 50px rgba(99, 102, 241, 0.25);
    transform: translateY(-4px);
}

.bk-package-card.is-selected::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
}

.bk-package-card.is-selected::after {
    content: "\2714";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    z-index: 2;
}

.bk-package-card.is-selected .bk-package-card__name {
    color: #4f46e5;
}

.bk-package-card.is-selected .bk-package-card__price {
    color: #4338ca;
}

.bk-package-card.is-selected .bk-package-card__cta {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.bk-package-card__name {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bk-plum, #3b1843);
    line-height: 1.3;
}

.bk-package-card__validity {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    line-height: 1;
}

.bk-package-card__sessions {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bungee-coral, #ff7a59);
}

.bk-package-card__price {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bk-plum, #3b1843);
    line-height: 1;
}

.bk-package-card__desc {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    color: var(--bk-muted, #7f8fa4);
    line-height: 1.5;
}

.bk-package-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1.15rem;
    background: linear-gradient(135deg, var(--bungee-rose, #d83f87), var(--bungee-coral, #ff7a59));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(216, 63, 135, 0.3);
}

.bk-package-card__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(216, 63, 135, 0.4);
}


.bungee-booking-var-option-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bungee-booking-var-options [data-var-option-add] {
    margin-top: 0.35rem;
}

/* ============================================================
   PRO ENHANCEMENTS — Bungee appointments calendar cards
   ============================================================ */

/* Smooth transitions on every bungee card */
.appointments-calendar-event.is-bungee-class,
.appointments-calendar-event[data-appointment-type="bungee"] {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    will-change: transform, box-shadow;
}

/* Hover lift effect */
.appointments-calendar-event.is-bungee-class:not(.is-past-slot):hover,
.appointments-calendar-event[data-appointment-type="bungee"]:not(.is-past-slot):hover {
    transform: translateY(-2px) scale(1.012) !important;
    box-shadow:
        0 0 0 1.5px var(--bungee-class-accent),
        0 8px 22px color-mix(in srgb, var(--bungee-class-accent) 22%, transparent),
        0 2px 6px rgba(15, 35, 68, 0.10) !important;
    z-index: 8 !important;
    border-color: var(--bungee-class-accent) !important;
}

/* Active / press effect */
.appointments-calendar-event.is-bungee-class:not(.is-past-slot):active,
.appointments-calendar-event[data-appointment-type="bungee"]:not(.is-past-slot):active {
    transform: translateY(0) scale(1.004) !important;
    transition-duration: 0.08s !important;
}

/* Animated status dot — open classes */
@keyframes bungee-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12); }
}
.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card.is-open .bungee-week-calendar-card-status,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card.is-open .bungee-week-calendar-card-status {
    animation: bungee-dot-pulse 2.4s ease-in-out infinite;
}

/* Status dot — larger + more visible */
.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card .bungee-week-calendar-card-status,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card .bungee-week-calendar-card-status {
    width: 0.55rem !important;
    height: 0.55rem !important;
    top: 0.46rem !important;
    right: 0.46rem !important;
}

/* Typography refinements */
.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-time strong,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-time strong {
    font-weight: 900 !important;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--bungee-class-accent) 80%, #0f2344);
}

.appointments-calendar-event.is-bungee-class .bungee-week-calendar-card-title,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-week-calendar-card-title {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* Capacity total bolder */
.appointments-calendar-event.is-bungee-class .bungee-capacity-inline-total,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-capacity-inline-total {
    font-weight: 900 !important;
    letter-spacing: -0.03em;
    font-size: 0.82rem !important;
}

/* Capacity progress bar */
.bungee-cap-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 0 0 11px 11px;
    overflow: hidden;
    flex-shrink: 0;
}

.bungee-cap-progress-fill {
    height: 100%;
    width: var(--bungee-cap-pct, 0%);
    background: var(--bungee-class-accent, #14b8a6);
    border-radius: inherit;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.75;
}

/* Progress bar color per state */
.appointments-calendar-event.is-bungee-class.is-half-full .bungee-cap-progress-fill,
.appointments-calendar-event[data-appointment-type="bungee"].is-half-full .bungee-cap-progress-fill {
    background: #ca8a04;
}

.appointments-calendar-event.is-bungee-class.is-full .bungee-cap-progress-fill,
.appointments-calendar-event[data-appointment-type="bungee"].is-full .bungee-cap-progress-fill {
    background: #dc2626;
    opacity: 0.85;
}

.appointments-calendar-event.is-bungee-class.is-past-slot .bungee-cap-progress-fill,
.appointments-calendar-event[data-appointment-type="bungee"].is-past-slot .bungee-cap-progress-fill {
    background: #94a3b8;
    opacity: 0.5;
}

/* Progress bar in compact mode */
.appointments-calendar-event.is-compact.is-bungee-class .bungee-cap-progress-bar,
.appointments-calendar-event.is-compact[data-appointment-type="bungee"] .bungee-cap-progress-bar {
    height: 2.5px;
}

/* Inner card needs overflow visible to keep progress bar flush */
.appointments-calendar-event.is-bungee-class .bungee-appointments-class-card,
.appointments-calendar-event[data-appointment-type="bungee"] .bungee-appointments-class-card {
    overflow: hidden !important;
    padding-bottom: 0.55rem !important;
}


/* -- Payment methods error state: pink flash + blink ----------------------- */
@keyframes bk-payment-error-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(236, 72, 153, 0.45); background: rgba(253, 242, 248, 0.85); }
    40%  { box-shadow: 0 0 0 7px rgba(236, 72, 153, 0.0);  background: rgba(254, 226, 226, 0.60); }
    60%  { box-shadow: 0 0 0 0   rgba(236, 72, 153, 0.30); background: rgba(253, 242, 248, 0.85); }
    100% { box-shadow: 0 0 0 0   rgba(236, 72, 153, 0);    background: rgba(253, 242, 248, 0.50); }
}

[data-bungee-payment-methods].is-error {
    border-radius: 14px;
    outline: 2px solid #ec4899;
    outline-offset: 3px;
    background: rgba(253, 242, 248, 0.5);
    animation: bk-payment-error-pulse 0.55s ease-out 3;
}

[data-bungee-payment-methods].is-error .admin-payment-method,
[data-bungee-payment-methods].is-error .bk-checkout-option {
    border-color: rgba(236, 72, 153, 0.4) !important;
}

/* === PRO ATTENDEE ACTION BUTTONS === */
.bungee-session-attendees-actions {
    gap: 0.55rem !important;
}

.bungee-session-attendees-action {
    width: 2.8rem !important;
    height: 2.8rem !important;
    border-radius: 50% !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #64748b !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    transition: all 0.2s ease !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

/* Center the icon absolutely */
.bungee-session-attendees-action .material-symbols-outlined {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    color: inherit !important;
    font-variation-settings: 'FILL' 1, 'wght' 500 !important;
}

/* Present button */
.bungee-session-attendees-action.is-present {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #93c5fd !important;
}

/* Absent button */
.bungee-session-attendees-action.is-absent {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

/* Locked / disabled buttons */
.bungee-session-attendees-action.is-attendance-locked:disabled {
    opacity: 1 !important;
    background: #f8fafc !important;
    color: #cbd5e1 !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

/* ===== ICON COLORS (BELOW locked rule so they override on disabled state) ===== */

/* Present checkmark - blue */
.bungee-session-attendees-action.is-present .material-symbols-outlined {
    color: #2563eb !important;
}

/* Absent X - red */
.bungee-session-attendees-action.is-absent .material-symbols-outlined {
    color: #dc2626 !important;
}

/* More dots - dark gray */
.bungee-session-attendees-action.is-more .material-symbols-outlined {
    color: #475569 !important;
}

/* Active states - icons white */
.bungee-session-attendees-action.is-present.is-active .material-symbols-outlined,
.bungee-session-attendees-action.is-absent.is-active .material-symbols-outlined {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* When locked WITH is-present or is-absent, preserve icon color */
.bungee-session-attendees-action.is-attendance-locked:disabled.is-present .material-symbols-outlined {
    color: #2563eb !important;
}

.bungee-session-attendees-action.is-attendance-locked:disabled.is-absent .material-symbols-outlined {
    color: #dc2626 !important;
}

.bungee-session-attendees-action.is-attendance-locked:disabled.is-more .material-symbols-outlined {
    color: #475569 !important;
}

/* Active states */
.bungee-session-attendees-action.is-present.is-active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 3px 10px rgba(37,99,235,0.35) !important;
}

.bungee-session-attendees-action.is-absent.is-active {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 3px 10px rgba(220,38,38,0.35) !important;
}

/* Hover */
.bungee-session-attendees-action:not(:disabled):hover {
    transform: translateY(-2px) !important;
    filter: brightness(0.98) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* More button */
.bungee-session-attendees-action.is-more:not(:disabled) {
    background: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

.bungee-session-attendees-action.is-more:not(:disabled):hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}






/* INICIO: admin-sidebar-panel collapse + expand floating buttons */
.admin-sidebar-panel-collapse {
    position: absolute;
    top: 16px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #ffffff;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    z-index: 5;
    padding: 0;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.admin-sidebar-panel-collapse:hover {
    background: #1e293b;
    color: #ffffff;
    border-color: #1e293b;
}

body.admin-sidebar-panel-peek .admin-sidebar-panels {
    position: fixed !important;
    top: 68px !important;
    left: 78px !important;
    bottom: 0 !important;
    width: 30px !important;
    z-index: 29 !important;
    background: #ffffff !important;
    box-shadow: 4px 0 12px rgba(15, 23, 42, 0.06) !important;
    display: block !important;
    overflow: hidden !important;
}

body.admin-sidebar-panel-peek .admin-content {
    margin-left: 0 !important;
}

body.admin-sidebar-panel-peek .admin-content > *:not(.admin-topbar):not(.flash-wrap) {
    margin-left: -180px !important;
    margin-right: auto !important;
}

/* Pages without active sidebar panel: hide expand button and reset content margin */
body.admin-sidebar-no-active-panel.admin-sidebar-panel-peek .admin-sidebar-panel-expand-floating {
    display: none !important;
}
body.admin-sidebar-no-active-panel.admin-sidebar-panel-peek .admin-sidebar-panels {
    width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.admin-sidebar-no-active-panel.admin-sidebar-panel-peek .admin-content > *:not(.admin-topbar):not(.flash-wrap) {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.admin-body.admin-page-dashboard-pro .admin-content > .top-title,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-hero-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-kpi-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-main-grid,
.admin-body.admin-page-dashboard-pro .admin-content > .dashboard-table-panel {
    width: min(1220px, calc(100% - 2.1rem));
}

body.admin-sidebar-panel-peek .admin-sidebar-panel.is-visible,
body.admin-sidebar-panel-peek .admin-sidebar-panel,
body.admin-sidebar-panel-peek .clients-pro-side.is-visible,
body.admin-sidebar-panel-peek .clients-pro-side,
body.admin-sidebar-panel-peek [data-admin-module-side].is-visible,
body.admin-sidebar-panel-peek [data-admin-module-side] {
    display: none !important;
    position: fixed !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body.admin-sidebar-panel-peek .admin-sidebar-panel-collapse {
    display: none;
}

body.admin-sidebar-panel-peek-hover .admin-sidebar-panels {
    width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.admin-sidebar-panel-peek-hover .admin-sidebar-panel.is-visible {
    display: flex !important;
    position: fixed !important;
    top: 68px !important;
    left: 78px !important;
    bottom: 0 !important;
    width: 210px !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden auto !important;
    background: #ffffff !important;
    z-index: 28 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

body.admin-sidebar-panel-peek-hover .clients-pro-side.is-visible,
body.admin-sidebar-panel-peek-hover [data-admin-module-side].is-visible {
    display: flex !important;
    position: fixed !important;
    top: 68px !important;
    left: 288px !important;
    bottom: 0 !important;
    width: 210px !important;
    z-index: 28 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

.admin-sidebar-panel-expand-floating {
    position: fixed;
    top: 96px;
    left: 108px;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #ffffff;
    color: #1e293b;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    padding: 0;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.admin-sidebar-panel-expand-floating:hover {
    background: #1e293b;
    color: #ffffff;
    border-color: #1e293b;
}

body.admin-sidebar-panel-peek .admin-sidebar-panel-expand-floating {
    display: inline-flex;
}

body.admin-sidebar-panel-peek-hover .admin-sidebar-panel-expand-floating {
    display: none !important;
}
/* FIN: admin-sidebar-panel collapse + expand floating buttons */

/* ===== TEAM CARD CHECK CIRCULAR ===== */
.services-editor-team-card {
    position: relative;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.services-editor-team-card.is-selected {
    border-color: #6d5ef6 !important;
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%) !important;
    box-shadow: 0 0 0 3px rgba(109, 94, 246, 0.15) !important;
}
.services-editor-team-card.is-selected .services-editor-team-avatar {
    box-shadow: 0 0 0 2.5px #6d5ef6;
}
.services-editor-team-check {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 2.5px solid #fff;
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
    pointer-events: none;
}
.services-editor-team-check::before {
    content: "check";
    font-family: 'Material Symbols Outlined';
    font-size: 0.92rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}
.services-editor-team-card.is-selected .services-editor-team-check {
    background: #6d5ef6;
    opacity: 1;
    transform: scale(1);
}

/* ===== DISABLED NAV LINKS (no centers selected) ===== */
.services-editor-nav button.is-disabled,
.services-editor-nav button[disabled] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}
.services-editor-nav button.is-disabled span,
.services-editor-nav button[disabled] span {
    color: #94a3b8 !important;
}
.services-editor-nav button.is-disabled strong,
.services-editor-nav button[disabled] strong {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
}


/* ============================================================
   SALES.PHP RESPONSIVE - MOBILE (drawer sidebar)
   ============================================================ */
@media (max-width: 768px) {
    .admin-sidebar-panel-collapse {
        display: none !important;
    }
    .admin-sidebar-panel-expand-floating {
        display: none !important;
    }
    .admin-sidebar-panels {
        display: none !important;
    }
    body.admin-sidebar-panel-peek .admin-sidebar-panels {
        display: none !important;
        width: 0 !important;
        overflow: hidden !important;
    }
    body.admin-sidebar-panel-peek-hover .admin-sidebar-panel.is-visible {
        display: none !important;
    }
    body.admin-sidebar-panel-peek .admin-content > *:not(.admin-topbar):not(.flash-wrap) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.admin-sidebar-panel-peek .admin-sidebar-panel-expand-floating {
        display: none !important;
    }
    .admin-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 78px;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(.4,0,.2,1);
        z-index: 200;
        box-shadow: none;
    }
    .admin-body.admin-mobile-sidebar-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    }
    .admin-body.admin-mobile-sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 199;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .admin-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px !important;
        padding-top: 52px !important;
    }
    .clients-pro-main,
    .appointments-page-shell,
    .sales-page-shell,
    [class*="page-shell"] {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .admin-topbar-ghost {
        display: none !important;
    }
    .admin-topbar-pro-cta {
        display: none !important;
    }
    .admin-topbar {
        flex-wrap: nowrap !important;
        padding: 6px 8px !important;
        gap: 4px !important;
        min-height: auto !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    .admin-topbar-brand {
        display: none !important;
    }
    .admin-topbar-left {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }
    .admin-topbar-copy {
        display: none !important;
    }
    .admin-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    .admin-topbar-right {
        flex: 1 1 0% !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        min-width: 0;
    }
    .admin-topbar-right > * {
        flex: 0 0 auto !important;
    }
    .admin-topbar-quick {
        display: none !important;
    }
    .admin-topbar-pro-actions {
        display: none !important;
    }
    .admin-topbar-ghost {
        display: none !important;
    }
    .admin-topbar-search-wrap {
        flex: 1 1 0% !important;
        min-width: 0;
    }
    .admin-topbar-search input {
        font-size: 0.8rem !important;
        padding: 5px 8px !important;
        width: 100%;
    }
    .admin-notifications-menu {
        flex: 0 0 auto !important;
    }
    .admin-notifications-toggle {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
    .admin-account-menu {
        flex: 0 0 auto !important;
    }
    .admin-account-toggle {
        width: 32px !important;
        height: 32px !important;
    }
    .admin-account-toggle-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    .sales-kpi-grid,
    .appointments-sales-kpis,
    [class*="kpi-grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .sales-kpi-card,
    [class*="kpi-card"] {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    .clients-pro-table-wrap,
    .appointments-sales-table-wrap,
    .inventory-table-footer-wrap,
    [class*="table-wrap"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }
    .clients-pro-table,
    .appointments-sales-table,
    .inventory-table-footer {
        min-width: 560px;
        font-size: 0.8rem;
    }
}
@media (max-width: 420px) {
    .sales-kpi-grid,
    .appointments-sales-kpis,
    [class*="kpi-grid"] {
        grid-template-columns: 1fr !important;
    }
}

    /* ===== OTP Verification Modal — Professional ===== */
    .otp-swal-popup {
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 25px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04) !important;
        font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    }
    .otp-swal-popup .swal2-html-container { margin: 0 !important; padding: 0 !important; }

    .bk-otp { text-align: center; padding: 0; }
    .bk-otp__header { padding: 32px 28px 20px; }
    .bk-otp__shield {
        width: 72px; height: 72px; border-radius: 50%;
        background: linear-gradient(135deg, #fdf2f8, #fce7f3);
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 16px;
        box-shadow: 0 4px 16px rgba(216,63,135,.12);
    }
    .bk-otp__shield--code {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        box-shadow: 0 4px 16px rgba(22,163,74,.12);
    }
    .bk-otp__title {
        font-size: 1.35rem; font-weight: 800; color: #1e293b;
        margin: 0 0 6px; letter-spacing: -.02em;
    }
    .bk-otp__subtitle {
        font-size: .88rem; color: #64748b; margin: 0; line-height: 1.5;
    }
    .bk-otp__target {
        display: inline-block; padding: 8px 18px; border-radius: 10px;
        font-weight: 700; font-size: .95rem; margin: 12px 0 0; letter-spacing: .02em;
    }
    .bk-otp__options { padding: 0 24px 28px; }

    /* Channel cards */
    .bk-otp-channel {
        display: flex; align-items: center; gap: 14px;
        padding: 16px 18px; margin: 8px 0;
        border: 2px solid #e2e8f0; border-radius: 14px;
        cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1);
        background: #fff; position: relative; overflow: hidden;
    }
    .bk-otp-channel:hover { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
    .bk-otp-channel:active { transform: translateY(0); }
    .bk-otp-channel--selected { border-color: #16a34a !important; background: #f0fdf4 !important; box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important; }
    .bk-otp-channel--selected .bk-otp-channel__check { opacity: 1; transform: scale(1); }
    .bk-otp-channel__icon {
        width: 48px; height: 48px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .bk-otp-channel__icon--email { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; }
    .bk-otp-channel__icon--whatsapp { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }
    .bk-otp-channel__info { text-align: left; flex: 1; }
    .bk-otp-channel__name { display: block; font-weight: 700; font-size: .95rem; color: #1e293b; margin-bottom: 2px; }
    .bk-otp-channel__detail { display: block; font-size: .8rem; color: #64748b; }
    .bk-otp-channel__check {
        width: 28px; height: 28px; border-radius: 50%;
        background: #16a34a; color: #fff;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transform: scale(.6);
        transition: all .25s cubic-bezier(.4,0,.2,1); flex-shrink: 0;
    }

    /* Code input */
    .bk-otp-code-wrap { padding: 0 28px 20px; }
    .bk-otp-code-input {
        width: 100%; max-width: 240px; margin: 0 auto; display: block;
        text-align: center; font-size: 1.6rem; letter-spacing: .45em;
        padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 14px;
        outline: none; font-weight: 700; color: #1e293b; background: #f8fafc;
        transition: all .2s; font-family: 'SF Mono', 'Fira Code', monospace;
    }
    .bk-otp-code-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); background: #fff; }
    .bk-otp-code-input::placeholder { color: #cbd5e1; letter-spacing: .3em; }
    .bk-otp-code-hint { text-align: center; font-size: .78rem; color: #94a3b8; margin-top: 8px; transition: color .2s; }

    /* Action buttons */
    .bk-otp-actions { display: flex; gap: 10px; padding: 0 24px 28px; justify-content: center; }
    .bk-otp-btn {
        padding: 12px 24px; border-radius: 12px; font-size: .88rem; font-weight: 700;
        cursor: pointer; border: none; transition: all .2s; letter-spacing: -.01em;
    }
    .bk-otp-btn--back { background: #f1f5f9; color: #64748b; }
    .bk-otp-btn--back:hover { background: #e2e8f0; color: #475569; }
    .bk-otp-btn--resend { background: #f1f5f9; color: #64748b; }
    .bk-otp-btn--resend:hover { background: #e2e8f0; color: #475569; }
    .bk-otp-btn--verify {
        background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
        box-shadow: 0 4px 14px rgba(124,58,237,.3);
    }
    .bk-otp-btn--verify:hover { box-shadow: 0 6px 20px rgba(124,58,237,.4); transform: translateY(-1px); }

    /* Spinner */
    .bk-otp-spinner {
        width: 48px; height: 48px; border: 4px solid #e2e8f0;
        border-top-color: #7c3aed; border-radius: 50%;
        margin: 0 auto 16px; animation: bk-otp-spin .8s linear infinite;
    }
    @keyframes bk-otp-spin { to { transform: rotate(360deg); } }

    /* Loading text */
    .bk-otp-loading-text { font-size: .92rem; color: #475569; font-weight: 500; margin: 0; }

    /* Error icon */
    .bk-otp-error-icon {
        width: 56px; height: 56px; border-radius: 50%;
        background: #fef2f2; border: 2px solid #fecaca;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 12px; font-size: 1.5rem; color: #dc2626; font-weight: 700;
    }

    /* Success icon */
    .bk-otp-success-icon { margin-bottom: 12px; animation: bk-otp-pop .4s cubic-bezier(.175,.885,.32,1.275); }
    @keyframes bk-otp-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }