/*  Page level styles for EMS.Web.

    One section per view, extracted from that view's inline <style> block so the .cshtml files
    hold markup and the styling lives where a stylesheet editor can reach it. Companion to
    crowdflo-components.css, which holds styling shared by two or more views; everything here
    belongs to a single page.

    Every selector was checked against the markup and inline scripts of every other view, and
    against every .js file under Content, before being moved. Fifteen rules whose root class or id also exists
    on other pages stayed behind in their views, each with a comment saying why - moving those
    would have restyled pages they had never applied to. :root is among them, since custom
    properties declared there are global whatever file they sit in.

    Loaded from Views/Shared/_BaseLayout.cshtml, after customstyle.css and UIStyle.css so the
    page rules still win the ties they won when they lived in the view's own <style>. Also
    loaded directly by Guest/ConfirmTicket on its modal branch, where the layout is null.
    Local file, not the CDN, so it ships with the app and needs no S3 upload. */


/* ============================================================================
   Guest/_GuestListExperience
   Guest list drawer, filters and activity panel, rendered inside Guest/Index
   ============================================================================ */
    body.cf-drawer-open {
        overflow: hidden;
    }

    .cf-guest-workspace {
        position: relative;
    }

    .cf-list-intro {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        margin: 0 0 18px;
        padding: 0 2px;
    }

        .cf-list-intro h2 {
            margin: 0 0 4px;
            color: var(--cf-ink);
            font-size: 20px;
            font-weight: 750;
        }

        .cf-list-intro p {
            margin: 0;
            color: var(--cf-muted);
            font-size: 13px;
        }

    .cf-filter-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cf-list-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 12px;
    }

    .cf-toolbar-view {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .cf-toolbar-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-left: auto;
    }

        .cf-toolbar-right .toolbar-records,
        .cf-toolbar-right .toolbar-settings {
            flex: 0 0 auto;
            margin: 0;
        }

    .cf-view-switch {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-width: 244px;
        padding: 4px;
        background: #ece9f2;
        border: 1px solid #e0dce8;
        border-radius: 12px;
    }

    .cf-view-switch__thumb {
        position: absolute;
        z-index: 0;
        top: 4px;
        bottom: 4px;
        left: 4px;
        width: calc(50% - 4px);
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 9px rgba(41, 31, 65, .13);
        transition: transform .2s ease;
    }

    .cf-view-switch.is-compact .cf-view-switch__thumb {
        transform: translateX(100%);
    }

    .cf-view-option {
        position: relative;
        z-index: 1;
        min-height: 34px;
        padding: 7px 12px;
        color: #706979;
        background: transparent;
        border: 0;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 750;
        cursor: pointer;
    }

        .cf-view-option.is-active {
            color: var(--cf-primary-dark);
        }

        .cf-view-option:focus-visible {
            outline: 3px solid rgba(99,56,232,.18);
            outline-offset: 1px;
        }

    .cf-filter-pill {
        min-height: 36px;
        padding: 7px 12px;
        color: #5d5669;
        background: #fff;
        border: 1px solid var(--cf-line);
        border-radius: 11px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

        .cf-filter-pill:hover,
        .cf-filter-pill:focus,
        .cf-filter-pill.is-active {
            color: var(--cf-primary-dark);
            background: #f1edff;
            border-color: #cfc2fb;
            outline: none;
        }

    #guestTable.cf-compact-table {
        table-layout: auto;
        width: 100% !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 8px !important;
    }

        #guestTable.cf-compact-table thead th {
            padding: 9px 12px !important;
            color: #746e7d;
            background: transparent;
            border: 0 !important;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .055em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        #guestTable.cf-compact-table tbody td {
            padding: 13px 12px !important;
            vertical-align: middle;
            background: #fff;
            border-top: 1px solid var(--cf-line) !important;
            border-bottom: 1px solid var(--cf-line) !important;
            border-left: 0 !important;
            border-right: 0 !important;
        }

            #guestTable.cf-compact-table tbody td:first-child {
                border-left: 1px solid var(--cf-line) !important;
                border-radius: 14px 0 0 14px;
            }

            #guestTable.cf-compact-table tbody td:last-child {
                border-right: 1px solid var(--cf-line) !important;
                border-radius: 0 14px 14px 0;
            }

        #guestTable.cf-compact-table tbody tr:hover td {
            background: #fbfaff;
            border-color: #dcd4f2 !important;
        }

    body.cf-guest-table-view .guest-toolbar {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 2px 0 18px;
    }

    body.cf-guest-table-view .guest-toolbar .toolbar-search {
        flex: 1 1 360px;
        max-width: none;
        min-width: 240px;
    }

    body.cf-guest-table-view .guest-toolbar .toolbar-search .form-group {
        margin: 0;
    }

    body.cf-guest-table-view .guest-toolbar .toolbar-search .form-control {
        height: 44px;
        padding-right: 14px;
        padding-left: 42px;
        color: var(--cf-ink);
        background: #fff;
        border: 1px solid #e2ddea;
        border-radius: 12px;
        font-size: 13px;
        box-shadow: 0 5px 15px rgba(45, 33, 79, .04);
    }

    body.cf-guest-table-view .guest-toolbar .toolbar-search .form-control:focus {
        border-color: #7b58ed;
        box-shadow: 0 0 0 3px rgba(99, 56, 232, .10);
    }

    body.cf-guest-table-view .guest-toolbar .toolbar-search .form-control-feedback {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 44px;
        color: #625a70;
    }

    body.cf-guest-table-view .guest-toolbar .total-guests {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 15px;
        color: #493f5a;
        background: linear-gradient(120deg, #dff3ff, #ede2ff);
        border: 1px solid rgba(99, 56, 232, .08);
        border-radius: 12px;
        box-shadow: 0 7px 18px rgba(67, 48, 120, .08);
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }

    body.cf-guest-table-view .guest-toolbar .total-guests span {
        margin: 0 !important;
    }

    body.cf-guest-table-view .cf-toolbar-right {
        gap: 9px;
    }

    body.cf-guest-table-view .cf-toolbar-right .toolbar-records {
        flex: 0 0 104px;
        width: 104px !important;
        min-width: 104px;
        max-width: 104px;
        margin: 0 !important;
    }

    body.cf-guest-table-view .toolbar-records .form-control {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        height: 44px;
        padding: 8px 32px 8px 12px;
        color: #42394f;
        background-color: #fff;
        border: 1px solid #e2ddea;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        box-shadow: none;
    }

    body.cf-guest-table-view #columnList > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        color: #5934c9;
        background: #f3efff;
        border: 1px solid #ded5fb;
        border-radius: 12px;
        box-shadow: none;
    }

    body.cf-guest-table-view #columnList > .btn:hover,
    body.cf-guest-table-view #columnList > .btn:focus {
        color: #fff;
        background: #6338e8;
        border-color: #6338e8;
    }

    body.cf-guest-table-view #checkboxList {
        width: 250px;
        max-height: 360px !important;
        margin-top: 8px;
        padding: 8px;
        background: #fff;
        border: 1px solid #e5e0eb;
        border-radius: 13px;
        box-shadow: 0 18px 45px rgba(35, 24, 70, .18);
    }

    body.cf-guest-table-view #checkboxList li {
        display: flex;
        align-items: center;
        min-height: 34px;
        margin: 0 !important;
        padding: 7px 9px;
        color: #514a5d;
        border-radius: 8px;
        font-size: 12px;
        cursor: pointer;
    }

    body.cf-guest-table-view #checkboxList li:hover {
        color: #4520b8;
        background: #f5f2ff;
    }

    body.cf-guest-table-view #checkboxList #ResetLayout {
        margin-bottom: 5px !important;
        color: #5832ca;
        background: #f3efff;
        font-weight: 800;
    }

    body.cf-guest-table-view #checkboxList input[type="checkbox"] {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: #6338e8;
    }

    .cf-table-view-shell {
        overflow-x: auto;
        margin-top: 2px;
        background: #fff;
        border: 1px solid var(--cf-line);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(45, 33, 79, .055);
        scrollbar-color: #b4adbd #f3f1f6;
        scrollbar-width: thin;
    }

    .cf-table-view-shell::-webkit-scrollbar {
        height: 10px;
    }

    .cf-table-view-shell::-webkit-scrollbar-track {
        background: #f3f1f6;
        border-radius: 999px;
    }

    .cf-table-view-shell::-webkit-scrollbar-thumb {
        background: #b4adbd;
        border: 2px solid #f3f1f6;
        border-radius: 999px;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) {
        width: 100% !important;
        margin: 0 !important;
        color: #342d40;
        background: #fff;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) thead th {
        height: 48px;
        padding: 11px 13px !important;
        color: #716a7b;
        background: #f7f5fa;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e4dfea !important;
        border-left: 0 !important;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .045em;
        line-height: 1.25;
        text-transform: uppercase;
        vertical-align: middle;
        white-space: nowrap;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) thead th:first-child {
        padding-left: 16px !important;
        border-radius: 13px 0 0 0;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) thead th:last-child {
        padding-right: 16px !important;
        border-radius: 0 13px 0 0;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) thead .ascSort,
    .cf-table-view-shell #guestTable:not(.cf-compact-table) thead .descSort {
        margin-left: 2px;
        color: #8670d7 !important;
        font-size: 11px;
        opacity: .58;
        cursor: pointer;
        transition: opacity .16s ease, color .16s ease;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) thead .ascSort:hover,
    .cf-table-view-shell #guestTable:not(.cf-compact-table) thead .descSort:hover {
        color: #4f27c6 !important;
        opacity: 1;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody tr {
        background: #fff;
        transition: background .15s ease, box-shadow .15s ease;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody tr:hover {
        background: #fbfaff !important;
        box-shadow: inset 3px 0 0 #bca9f7;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody tr:has(.checkItem:checked) {
        background: #f3efff !important;
        box-shadow: inset 3px 0 0 #6338e8;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody td {
        height: 58px;
        padding: 9px 13px !important;
        color: #3e3749;
        background: transparent !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #eeeaf2 !important;
        border-left: 0 !important;
        font-size: 12px;
        line-height: 1.35;
        vertical-align: middle;
        white-space: nowrap;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody td:first-child {
        padding-left: 16px !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody td:last-child {
        padding-right: 16px !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #6338e8;
        cursor: pointer;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) input.myInput,
    .cf-table-view-shell #guestTable:not(.cf-compact-table) select.myInput {
        min-width: 150px;
        height: 38px;
        padding: 7px 10px;
        color: #332c40;
        background: #faf9fc;
        border: 1px solid transparent;
        border-radius: 9px;
        font-size: 12px;
        transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) select.myInput {
        min-width: 220px;
        padding-right: 30px;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) input.myInput:hover,
    .cf-table-view-shell #guestTable:not(.cf-compact-table) select.myInput:hover {
        background: #fff;
        border-color: #ddd7e7;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) input.myInput:focus,
    .cf-table-view-shell #guestTable:not(.cf-compact-table) select.myInput:focus {
        background: #fff;
        border-color: #7b58ed;
        outline: none;
        box-shadow: 0 0 0 3px rgba(99, 56, 232, .10);
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) tbody td > a[target="_blank"] {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 5px 9px;
        color: #5832ca;
        background: #f1edff;
        border: 1px solid #e1d9fb;
        border-radius: 8px;
        font-weight: 800;
        text-decoration: none;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .wristband-uid {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 5px 9px;
        color: #315f49;
        background: #eaf8ef;
        border: 1px solid #d7eee0;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 800;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0 !important;
        color: #5d36cf !important;
        background: #f5f1ff !important;
        border: 1px solid #e0d7fb !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action:hover,
    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action:focus-visible {
        color: #fff !important;
        background: #6338e8 !important;
        border-color: #6338e8 !important;
        outline: none;
        transform: translateY(-1px);
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action__icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action--delete {
        color: #bd3045 !important;
        background: #fff5f6 !important;
        border-color: #f2d8dc !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action--delete:hover,
    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action--delete:focus-visible {
        color: #fff !important;
        background: #c43345 !important;
        border-color: #c43345 !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-action:disabled {
        color: #aaa3b3 !important;
        background: #f5f3f7 !important;
        border-color: #ebe7ef !important;
        cursor: not-allowed;
        opacity: .75;
        transform: none;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-status-button {
        min-height: 34px;
        margin: 0 !important;
        padding: 7px 10px;
        border-radius: 9px !important;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        box-shadow: none !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-status-button.btn-outline-primary {
        color: #247047 !important;
        background: #eaf8ef !important;
        border-color: #d7eee0 !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-status-button.btn-outline-danger {
        color: #a72d3f !important;
        background: #fff0f2 !important;
        border-color: #f2d7dc !important;
    }

    .cf-table-view-shell #guestTable:not(.cf-compact-table) .guest-status-button.btn-primary {
        color: #fff !important;
        background: #6338e8 !important;
        border-color: #6338e8 !important;
    }

    body.cf-guest-table-view .cf-table-view-shell + .row {
        align-items: center;
        margin: 14px 0 0;
        color: #777080;
        font-size: 12px;
    }

    body.cf-guest-table-view .pagination {
        gap: 5px;
        margin: 0;
    }

    body.cf-guest-table-view .pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        padding: 7px 10px;
        color: #625a70;
        background: #fff;
        border: 1px solid #e4dfea;
        border-radius: 9px !important;
        font-size: 11px;
        font-weight: 750;
        cursor: pointer;
    }

    body.cf-guest-table-view .pagination .page-item.active .page-link {
        color: #fff;
        background: #6338e8;
        border-color: #6338e8;
    }

    body.cf-guest-table-view .pagination .page-item.disabled .page-link {
        color: #aaa3b3;
        background: #f7f5fa;
    }

    @media (max-width: 1550px) {
        body.cf-guest-table-view .guest-toolbar {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px 12px;
            box-sizing: border-box;
            padding: 0 12px 10px;
        }

        body.cf-guest-table-view .guest-toolbar .toolbar-search {
            grid-row: 1;
            grid-column: 1;
            width: 100%;
            max-width: none;
            min-width: 0;
        }

        body.cf-guest-table-view .guest-toolbar .total-guests {
            grid-row: 1;
            grid-column: 2;
            justify-self: end;
            min-height: 40px;
            padding: 0 12px;
        }

        body.cf-guest-table-view .guest-toolbar .cf-toolbar-right {
            display: flex;
            grid-row: 2;
            grid-column: 1 / -1;
            align-items: stretch;
            justify-content: flex-end;
            justify-self: stretch;
            width: 100%;
            gap: 8px;
            flex-wrap: nowrap;
        }

        body.cf-guest-table-view .guest-toolbar .toolbar-records {
            flex: 0 0 104px;
            width: 104px;
            min-width: 104px;
            max-width: 104px;
            margin: 0;
        }

        body.cf-guest-table-view .guest-toolbar .toolbar-records .form-control {
            width: 100% !important;
            max-width: 100%;
            height: 40px;
            box-sizing: border-box;
        }

        body.cf-guest-table-view .guest-toolbar .cf-toolbar-view {
            flex: 1 1 244px;
            width: 244px;
            min-width: 0;
            margin: 0;
        }

        body.cf-guest-table-view .guest-toolbar .cf-view-switch {
            width: 100%;
            min-width: 0;
        }

        body.cf-guest-table-view .guest-toolbar .toolbar-settings {
            flex: 0 0 44px;
            width: 44px;
            min-width: 44px;
            margin: 0;
        }
    }

    .cf-guest-summary {
        display: none;
        align-items: center;
        gap: 11px;
        min-width: 230px;
    }

    .cf-compact-value {
        display: none;
        color: var(--cf-ink);
        font-size: 13px;
        line-height: 1.35;
        white-space: nowrap;
    }

    #guestTable.cf-compact-table .cf-compact-value {
        display: block;
    }

    .cf-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        color: #fff;
        background: linear-gradient(145deg, #6338e8, #4d8cff);
        border-radius: 12px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .04em;
    }

    .cf-guest-summary__name {
        display: block;
        overflow: hidden;
        max-width: 260px;
        color: var(--cf-ink);
        font-size: 14px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-guest-summary__meta {
        display: block;
        overflow: hidden;
        max-width: 280px;
        margin-top: 2px;
        color: var(--cf-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-status {
        display: none;
        align-items: center;
        gap: 6px;
        padding: 5px 9px;
        color: #26643f;
        background: #eaf8ef;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 750;
        white-space: nowrap;
    }

        .cf-status::before {
            width: 6px;
            height: 6px;
            background: #2ca566;
            border-radius: 50%;
            content: "";
        }

    .cf-status--denied {
        color: #9a2938;
        background: #fff0f2;
    }

        .cf-status--denied::before {
            background: #d64a5c;
        }

    .cf-preview-button {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 36px;
        padding: 7px 11px;
        color: var(--cf-primary-dark);
        background: #f3efff;
        border: 1px solid #ded5fb;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 750;
        cursor: pointer;
    }

        .cf-preview-button:hover,
        .cf-preview-button:focus-visible {
            color: #fff;
            background: var(--cf-primary);
            border-color: var(--cf-primary);
            outline: none;
        }

        .cf-preview-button svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

    #guestTable.cf-compact-table .cf-guest-summary {
        display: flex;
    }

    #guestTable.cf-compact-table .cf-status,
    #guestTable.cf-compact-table .cf-preview-button {
        display: inline-flex;
    }

    #guestTable.cf-compact-table .cf-source-control,
    #guestTable.cf-compact-table .cf-original-action,
    .cf-generated-source {
        display: none !important;
    }

    body.cf-guest-compact-view .guest-toolbar {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 2px 0 18px;
    }

    body.cf-guest-compact-view .guest-toolbar .toolbar-search {
        flex: 1 1 360px;
        max-width: none;
        min-width: 240px;
    }

    body.cf-guest-compact-view .guest-toolbar .toolbar-search .form-group {
        margin: 0;
    }

    body.cf-guest-compact-view .guest-toolbar .toolbar-search .form-control {
        height: 44px;
        padding-right: 14px;
        padding-left: 42px;
        color: var(--cf-ink);
        background: #fff;
        border: 1px solid #e2ddea;
        border-radius: 12px;
        font-size: 13px;
        box-shadow: 0 5px 15px rgba(45, 33, 79, .04);
    }

    body.cf-guest-compact-view .guest-toolbar .toolbar-search .form-control:focus {
        border-color: #7b58ed;
        box-shadow: 0 0 0 3px rgba(99, 56, 232, .10);
    }

    body.cf-guest-compact-view .guest-toolbar .toolbar-search .form-control-feedback {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 44px;
        color: #625a70;
    }

    body.cf-guest-compact-view .guest-toolbar .total-guests {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 15px;
        color: #493f5a;
        background: linear-gradient(120deg, #dff3ff, #ede2ff);
        border: 1px solid rgba(99, 56, 232, .08);
        border-radius: 12px;
        box-shadow: 0 7px 18px rgba(67, 48, 120, .08);
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }

    body.cf-guest-compact-view .guest-toolbar .total-guests span {
        margin: 0 !important;
    }

    body.cf-guest-compact-view .cf-toolbar-right {
        gap: 8px;
    }

    body.cf-guest-compact-view .cf-toolbar-right .toolbar-records {
        flex: 0 0 104px;
        width: 104px !important;
        min-width: 104px;
        max-width: 104px;
        margin: 0 !important;
    }

    body.cf-guest-compact-view .toolbar-records .form-control {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        height: 44px;
        padding: 8px 32px 8px 12px;
        color: #42394f;
        background-color: #fff;
        border: 1px solid #e2ddea;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        box-shadow: none;
    }

    .cf-compact-view-shell {
        overflow-x: auto;
        padding: 2px 2px 11px;
        scrollbar-color: #b4adbd #f3f1f6;
        scrollbar-width: thin;
    }

    .cf-compact-view-shell::-webkit-scrollbar {
        height: 10px;
    }

    .cf-compact-view-shell::-webkit-scrollbar-track {
        background: #f3f1f6;
        border-radius: 999px;
    }

    .cf-compact-view-shell::-webkit-scrollbar-thumb {
        background: #b4adbd;
        border: 2px solid #f3f1f6;
        border-radius: 999px;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table {
        min-width: 1080px;
        margin: 0 !important;
        border-spacing: 0 10px !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table thead th {
        height: 48px;
        padding: 11px 14px !important;
        color: #746e7d;
        background: #f7f5fa;
        border-top: 1px solid #e4dfea !important;
        border-bottom: 1px solid #e4dfea !important;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .045em;
        line-height: 1.25;
        vertical-align: middle;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table thead th:first-child {
        border-left: 1px solid #e4dfea !important;
        border-radius: 14px 0 0 14px !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table thead th:last-child {
        border-right: 1px solid #e4dfea !important;
        border-radius: 0 14px 14px 0 !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table thead .ascSort,
    .cf-compact-view-shell #guestTable.cf-compact-table thead .descSort {
        margin-left: 2px;
        color: #8670d7 !important;
        font-size: 11px;
        opacity: .58;
        cursor: pointer;
        transition: opacity .16s ease, color .16s ease;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table thead .ascSort:hover,
    .cf-compact-view-shell #guestTable.cf-compact-table thead .descSort:hover {
        color: #4f27c6 !important;
        opacity: 1;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table thead th:first-child,
    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:first-child {
        width: 48px !important;
        min-width: 48px;
        text-align: center;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table thead th:nth-child(2),
    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:nth-child(2) {
        min-width: 255px;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr {
        filter: drop-shadow(0 6px 12px rgba(43, 31, 76, .045));
        cursor: pointer;
        transition: filter .16s ease, transform .16s ease;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr:hover,
    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr.cf-row-active {
        filter: drop-shadow(0 10px 18px rgba(56, 38, 110, .11));
        transform: translateY(-1px);
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody td {
        height: 66px;
        padding: 12px 14px !important;
        color: #3e3749;
        background: #fff;
        border-color: #e8e3ed !important;
        font-size: 12px;
        line-height: 1.35;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr:hover td {
        background: #fcfbff;
        border-color: #d9d0ef !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr.cf-row-active td,
    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr:has(.checkItem:checked) td {
        background: #f5f1ff !important;
        border-color: #cfc2f6 !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:first-child {
        border-radius: 14px 0 0 14px !important;
        box-shadow: inset 3px 0 0 transparent;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr.cf-row-active td:first-child,
    .cf-compact-view-shell #guestTable.cf-compact-table tbody tr:has(.checkItem:checked) td:first-child {
        box-shadow: inset 3px 0 0 #6338e8;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:last-child {
        border-radius: 0 14px 14px 0 !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #6338e8;
        cursor: pointer;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-guest-summary {
        gap: 12px;
        min-width: 230px;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-avatar {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        box-shadow: 0 7px 15px rgba(82, 55, 194, .17);
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-guest-summary__name {
        max-width: 230px;
        color: #251e35;
        font-size: 13.5px;
        font-weight: 800;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-guest-summary__meta {
        max-width: 230px;
        margin-top: 3px;
        color: #777080;
        font-size: 11px;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-compact-value {
        overflow: hidden;
        max-width: 220px;
        color: #443c50;
        font-size: 12px;
        font-weight: 650;
        text-overflow: ellipsis;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-status {
        min-height: 32px;
        padding: 6px 9px;
        color: #247047;
        background: #eaf8ef;
        border: 1px solid #d7eee0;
        border-radius: 10px;
        font-size: 10.5px;
        font-weight: 800;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-status--denied {
        color: #a72d3f;
        background: #fff0f2;
        border-color: #f2d7dc;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-preview-button {
        min-width: 76px;
        min-height: 36px;
        padding: 7px 11px;
        color: #5832ca;
        background: #f3efff;
        border: 1px solid #ded5fb;
        border-radius: 10px;
        box-shadow: none;
        font-size: 11px;
        font-weight: 800;
        transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
        vertical-align: middle;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .cf-preview-button:hover,
    .cf-compact-view-shell #guestTable.cf-compact-table .cf-preview-button:focus-visible {
        color: #fff;
        background: #6338e8;
        border-color: #6338e8;
        transform: translateY(-1px);
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .guest-action:not(.cf-original-action) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0 !important;
        color: #5d36cf !important;
        background: #f5f1ff !important;
        border: 1px solid #e0d7fb !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
        vertical-align: middle;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:has(.cf-preview-button),
    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:has(.guest-action--delete) {
        text-align: center !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:has(.cf-preview-button) .cf-original-action {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-height: 36px;
        margin: 0 6px 0 0 !important;
        padding: 0 !important;
        color: #5d36cf !important;
        background: #f5f1ff !important;
        border: 1px solid #e0d7fb !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        vertical-align: middle;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:has(.cf-preview-button) .cf-original-action:hover,
    .cf-compact-view-shell #guestTable.cf-compact-table tbody td:has(.cf-preview-button) .cf-original-action:focus-visible {
        color: #fff !important;
        background: #6338e8 !important;
        border-color: #6338e8 !important;
        outline: none;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .guest-action:not(.cf-original-action):hover,
    .cf-compact-view-shell #guestTable.cf-compact-table .guest-action:not(.cf-original-action):focus-visible {
        color: #fff !important;
        background: #6338e8 !important;
        border-color: #6338e8 !important;
        outline: none;
        transform: translateY(-1px);
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .guest-action__icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .guest-action--delete {
        color: #bd3045 !important;
        background: #fff5f6 !important;
        border-color: #f2d8dc !important;
    }

    .cf-compact-view-shell #guestTable.cf-compact-table .guest-action--delete:hover,
    .cf-compact-view-shell #guestTable.cf-compact-table .guest-action--delete:focus-visible {
        color: #fff !important;
        background: #c43345 !important;
        border-color: #c43345 !important;
    }

    body.cf-guest-compact-view .cf-compact-view-shell + .row {
        align-items: center;
        margin: 14px 0 0;
        color: #777080;
        font-size: 12px;
    }

    body.cf-guest-compact-view .pagination {
        gap: 5px;
        margin: 0;
    }

    body.cf-guest-compact-view .pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        padding: 7px 10px;
        color: #625a70;
        background: #fff;
        border: 1px solid #e4dfea;
        border-radius: 9px !important;
        font-size: 11px;
        font-weight: 750;
        cursor: pointer;
    }

    body.cf-guest-compact-view .pagination .page-item.active .page-link {
        color: #fff;
        background: #6338e8;
        border-color: #6338e8;
    }

    body.cf-guest-compact-view .pagination .page-item.disabled .page-link {
        color: #aaa3b3;
        background: #f7f5fa;
    }

    @media (max-width: 1550px) {
        body.cf-guest-compact-view .guest-toolbar {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px 12px;
            box-sizing: border-box;
            padding: 0 12px 10px;
        }

        body.cf-guest-compact-view .guest-toolbar .toolbar-search {
            grid-row: 1;
            grid-column: 1;
            width: 100%;
            max-width: none;
            min-width: 0;
        }

        body.cf-guest-compact-view .guest-toolbar .total-guests {
            grid-row: 1;
            grid-column: 2;
            justify-self: end;
            min-height: 40px;
            padding: 0 12px;
        }

        body.cf-guest-compact-view .guest-toolbar .cf-toolbar-right {
            display: flex;
            grid-row: 2;
            grid-column: 1 / -1;
            align-items: stretch;
            justify-content: flex-end;
            justify-self: stretch;
            width: 100%;
            gap: 8px;
            flex-wrap: nowrap;
        }

        body.cf-guest-compact-view .guest-toolbar .toolbar-records {
            flex: 0 0 104px;
        }

        body.cf-guest-compact-view .guest-toolbar .toolbar-records .form-control {
            height: 40px;
        }

        body.cf-guest-compact-view .guest-toolbar .cf-toolbar-view {
            flex: 1 1 244px;
            width: 244px;
            min-width: 0;
            margin: 0;
        }

        body.cf-guest-compact-view .guest-toolbar .cf-view-switch {
            width: 100%;
            min-width: 0;
        }
    }

    @media (max-width: 900px) {
        body.cf-guest-compact-view .guest-toolbar {
            align-items: stretch;
            flex-wrap: wrap;
        }

        body.cf-guest-compact-view .guest-toolbar .toolbar-search {
            max-width: none;
        }

        body.cf-guest-compact-view .guest-toolbar .total-guests {
            order: 2;
        }

        body.cf-guest-compact-view .cf-toolbar-right {
            order: 3;
            width: 100%;
        }
    }

    /* On a phone the toolbar's two column row cannot hold both of its items. The total guests
       badge is an auto track, so it takes its content width and the search gets whatever is
       left - 179px, against a placeholder that needs 183. Four pixels, but they fall on the
       first control on the screen and "Search Any Keyword" lost its last letters. Each gets its
       own row here instead, which leaves the search the full width rather than shaving the
       badge and hoping the guest count never grows another digit. */
    @media (max-width: 575.98px) {
        body.cf-guest-table-view .guest-toolbar .toolbar-search,
        body.cf-guest-compact-view .guest-toolbar .toolbar-search {
            grid-row: 1;
            grid-column: 1 / -1;
        }

        body.cf-guest-table-view .guest-toolbar .total-guests,
        body.cf-guest-compact-view .guest-toolbar .total-guests {
            grid-row: 2;
            grid-column: 1 / -1;
            /*  Both views set justify-self:end under 1550px, which pins the badge to the
                right and shrinks it to its text. The row is already full width, so this
                only lets the badge fill the row it already occupies. The 10px margin
                customstyle.css puts on .total-guests is what kept it short of the search
                field above; without it the two come out the same width. */
            justify-self: stretch;
            margin-left: 0;
        }

        body.cf-guest-table-view .guest-toolbar .cf-toolbar-right,
        body.cf-guest-compact-view .guest-toolbar .cf-toolbar-right {
            grid-row: 3;
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 767px) {
        .cf-compact-view-shell #guestTable.cf-compact-table {
            width: 100% !important;
            min-width: 0;
        }

        .cf-compact-view-shell #guestTable.cf-compact-table thead th,
        .cf-compact-view-shell #guestTable.cf-compact-table tbody td {
            padding-right: 10px !important;
            padding-left: 10px !important;
        }

        .cf-compact-view-shell #guestTable.cf-compact-table thead th:nth-child(2),
        .cf-compact-view-shell #guestTable.cf-compact-table tbody td:nth-child(2) {
            min-width: 0;
        }

        .cf-compact-view-shell #guestTable.cf-compact-table .cf-guest-summary,
        .cf-compact-view-shell #guestTable.cf-compact-table .cf-guest-summary__name,
        .cf-compact-view-shell #guestTable.cf-compact-table .cf-guest-summary__meta {
            min-width: 0;
            max-width: none;
        }
    }

    .cf-drawer-backdrop {
        position: fixed;
        z-index: 1055;
        inset: 0;
        visibility: hidden;
        background: rgba(25, 19, 40, .34);
        opacity: 0;
        transition: opacity .22s ease, visibility .22s ease;
    }

        .cf-drawer-backdrop.is-open {
            visibility: visible;
            opacity: 1;
        }

    .cf-guest-drawer {
        position: fixed;
        z-index: 1060;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        width: min(1100px, 97vw);
        background: #f7f6fa;
        box-shadow: -18px 0 50px rgba(31, 24, 49, .22);
        transform: translateX(102%);
        transition: transform .26s cubic-bezier(.2,.75,.25,1);
    }

        .cf-guest-drawer.is-open {
            transform: translateX(0);
        }

    .cf-drawer-header {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 18px 20px;
        background: #fff;
        border-bottom: 1px solid var(--cf-line);
    }

    .cf-drawer-header__copy {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cf-drawer-header h2 {
        overflow: hidden;
        margin: 0;
        color: var(--cf-ink);
        font-size: 18px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-drawer-header p {
        margin: 3px 0 0;
        color: var(--cf-muted);
        font-size: 12px;
    }

    .cf-drawer-header__actions {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 10px;
    }

    .cf-header-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 12px;
        box-sizing: border-box;
        color: #247047;
        background: #e7f7ef;
        border: 1px solid #d8f1e4;
        border-radius: 11px !important;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    .cf-header-status::before {
        width: 7px;
        height: 7px;
        background: #28a66a;
        border-radius: 50%;
        content: "";
    }

    .cf-header-status.is-denied {
        color: #a72d3f;
        background: #fcebed;
        border-color: #f6d7dc;
    }

    .cf-header-status.is-denied::before {
        background: #d9445a;
    }

    .cf-icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        color: #554d63;
        background: #f7f5fa;
        border: 1px solid var(--cf-line);
        border-radius: 11px;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    /*  The status pill and close button take about 174px of a 364px drawer, leaving the name
        under 100px so it ellipsed away. The basis drops that pair onto its own row once the name
        would fall below 150px, and the name wraps rather than ellipsing at the widths above that. */
    @media (max-width: 575.98px) {
        .cf-drawer-header {
            flex-wrap: wrap;
        }

        .cf-drawer-header__copy {
            flex-basis: 150px;
        }

        .cf-drawer-header__actions {
            margin-left: auto;
        }

        .cf-drawer-header h2 {
            overflow-wrap: break-word;
            white-space: normal;
        }
    }

    .cf-drawer-body {
        display: grid;
        grid-template-columns: minmax(320px, .8fr) minmax(520px, 1.35fr);
        grid-template-areas:
            "ticket guest"
            "manage manage"
            "activity activity";
        align-items: stretch;
        align-content: start;
        gap: 14px;
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 18px;
    }

    .cf-drawer-column {
        display: grid;
        align-content: start;
        gap: 14px;
        min-width: 0;
    }

    .cf-drawer-ticket {
        grid-area: ticket;
    }

    .cf-drawer-guest {
        grid-area: guest;
        display: flex;
        flex-direction: column;
        padding: 22px;
        background: linear-gradient(145deg, #fff, #fdfcff);
    }

        .cf-drawer-guest .cf-section-heading {
            margin-bottom: 18px;
        }

            .cf-drawer-guest .cf-section-heading h3 {
                font-size: 16px;
            }

        .cf-drawer-guest .cf-field-grid {
            flex: 0 0 auto;
            align-content: start;
            column-gap: 16px;
            row-gap: 18px;
        }

        .cf-drawer-guest .cf-field label {
            margin-bottom: 7px;
            font-size: 12px;
        }

        .cf-drawer-guest .cf-field input,
        .cf-drawer-guest .cf-field select {
            min-height: 46px;
            padding: 11px 13px;
            background: #fcfbfe;
            font-size: 14px;
        }

    .cf-drawer-manage {
        grid-area: manage;
        align-self: start;
    }

    .cf-drawer-activity {
        grid-area: activity;
        align-self: start;
    }

        .cf-drawer-activity .cf-wristband-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    .cf-ticket-preview,
    .cf-drawer-section {
        margin-bottom: 0;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--cf-line);
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(45, 33, 79, .05);
    }

    .cf-ticket-preview {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        color: #fff;
        background: linear-gradient(145deg, #2d1d66, #6338e8 60%, #4d8cff);
        border: 0;
    }

    .cf-ticket-preview__top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        flex: 1 1 auto;
        gap: 16px;
        padding: 20px;
    }

    .cf-ticket-preview__top > div:first-child {
        min-width: 0;
    }

    .cf-ticket-preview__eyebrow {
        display: block;
        margin-bottom: 8px;
        color: rgba(255,255,255,.72);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .cf-ticket-preview h3 {
        margin: 0 0 5px;
        color: #fff;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .cf-ticket-preview p {
        margin: 3px 0;
        color: rgba(255,255,255,.82);
        font-size: 12px;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* renderTicketQr overwrites this width and height once it knows how many modules the code
       needs, so that it can draw a whole number of pixels per module. The value here is the
       no-JS fallback: 138 = a 122px code plus the 8px border either side, box-sizing being
       border-box. The border is not decoration - qrcodejs draws no margin of its own, the
       modules run to the image edge, so this white ring is the quiet zone a scanner needs, and
       the JS reads its width rather than assuming it. .cf-ticket-preview__top's second column
       is auto so it follows whatever size the code ends up, and its first column is
       minmax(0, 1fr) so the text absorbs the difference instead of the card's padding. */
    .cf-qr-frame {
        align-self: start;
        overflow: hidden;
        width: 138px;
        height: 138px;
        background: #fff;
        border: 8px solid #fff;
        border-radius: 12px;
    }

        .cf-qr-frame iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

    .cf-ticket-preview__bottom {
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 20px;
        background: rgba(16, 8, 48, .20);
        font-size: 11px;
    }

        .cf-ticket-preview__bottom strong {
            display: block;
            margin-top: 2px;
            color: #fff;
            font-size: 13px;
        }

    .cf-ticket-facts {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        padding: 14px 20px;
        background: rgba(17, 8, 52, .13);
        border-top: 1px solid rgba(255,255,255,.13);
    }

    .cf-ticket-fact span {
        display: block;
        margin-bottom: 3px;
        color: rgba(255,255,255,.68);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .cf-ticket-fact strong {
        display: block;
        overflow: hidden;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-field-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .cf-field--wide {
        grid-column: span 2;
    }

    .cf-field--full {
        grid-column: 1 / -1;
    }

    .cf-field label {
        display: block;
        margin: 0 0 5px;
        color: #625b6c;
        font-size: 11px;
        font-weight: 750;
    }

    .cf-field input,
    .cf-field select,
    .cf-readonly {
        width: 100%;
        min-height: 40px;
        padding: 9px 10px;
        color: var(--cf-ink);
        background: #fbfafd;
        border: 1px solid #e4dfeb;
        border-radius: 10px;
        font-size: 13px;
    }

    .cf-readonly {
        display: flex;
        align-items: center;
        color: #5f5868;
    }

    .cf-field input:focus,
    .cf-field select:focus {
        background: #fff;
        border-color: #9f86ef;
        box-shadow: 0 0 0 3px rgba(99,56,232,.10);
        outline: none;
    }

    .cf-action-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .cf-wristband-list {
        display: grid;
        gap: 10px;
    }

    .cf-wristband-item {
        padding: 11px;
        background: #faf9fc;
        border: 1px solid #e9e4ef;
        border-radius: 12px;
    }

        .cf-wristband-item .cf-field {
            margin-bottom: 8px;
        }

    .cf-wristband-reassign-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 10px;
    }

        .cf-wristband-reassign-row .cf-field {
            margin-bottom: 0;
        }

        .cf-wristband-reassign-row .cf-drawer-action {
            min-height: 42px;
            padding: 9px 13px;
            white-space: nowrap;
        }

    .cf-field-help {
        display: block;
        margin: 6px 0 0;
        color: var(--cf-muted);
        font-size: 10px;
        line-height: 1.45;
    }

    .cf-activity-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 13px;
        padding: 4px;
        background: #f1eef6;
        border-radius: 11px;
    }

    .cf-activity-tab {
        flex: 1 1 0;
        min-height: 34px;
        padding: 7px 9px;
        color: #716a7c;
        background: transparent;
        border: 0;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 750;
        cursor: pointer;
    }

        .cf-activity-tab.is-active {
            color: var(--cf-primary-dark);
            background: #fff;
            box-shadow: 0 3px 10px rgba(42, 31, 66, .10);
        }

    .cf-activity-panel {
        display: none;
    }

        .cf-activity-panel.is-active {
            display: block;
        }

    .cf-audit-log {
        min-height: 84px;
        padding: 14px;
        overflow-x: auto;
        background: #faf9fc;
        border: 1px solid #e9e4ef;
        border-radius: 12px;
    }

    .cf-audit-log__status {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        color: var(--cf-muted);
        font-size: 12px;
        text-align: center;
    }

    .cf-audit-log .modal-header,
    .cf-audit-log .modal-footer {
        display: none;
    }

    .cf-audit-log .modal-body {
        padding: 0;
    }

    .cf-audit-open-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        color: var(--cf-primary-dark) !important;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .cf-audit-open-link:hover,
    .cf-audit-open-link:focus {
        color: #35138f !important;
        text-decoration: underline !important;
    }

    .cf-manage-toolbar {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
        width: 100%;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--cf-line);
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(45, 33, 79, .05);
    }

        .cf-manage-toolbar .cf-drawer-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-width: 0;
            min-height: 50px;
            padding: 7px;
            font-size: 12px;
            line-height: 1.25;
            text-align: center;
            white-space: nowrap;
        }

    .cf-guest-drawer.cf-drawer-behind-modal {
        z-index: 1038;
    }

    .cf-drawer-backdrop.cf-drawer-behind-modal {
        z-index: 1037;
    }

    .cf-save-notice {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 12001;
        max-width: 360px;
        padding: 12px 15px;
        color: #fff;
        background: #198754;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(24, 18, 43, .22);
        font-size: 13px;
        font-weight: 700;
    }

    .cf-save-notice--warning {
        background: #b7791f;
    }

    .cf-save-notice--error {
        background: #c43345;
    }

    .cf-drawer-control.is-saving {
        opacity: .65;
    }

    .cf-action-icon {
        color: var(--cf-primary);
        font-size: 16px;
    }

    .cf-drawer-action--danger .cf-action-icon {
        color: var(--cf-danger);
    }

    .cf-qr-frame {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cf-qr-frame img,
        .cf-qr-frame canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
        }

    .cf-qr-fallback {
        color: var(--cf-primary-dark);
        font-size: 10px;
        font-weight: 750;
        text-align: center;
    }

    .cf-drawer-action {
        min-height: 40px;
        padding: 9px 11px;
        color: #4d4262;
        background: #faf9fc;
        border: 1px solid #e5e0ec;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 750;
        text-align: left;
        cursor: pointer;
    }

        .cf-drawer-action:hover,
        .cf-drawer-action:focus {
            color: var(--cf-primary-dark);
            background: #f2eeff;
            border-color: #d2c6f5;
            outline: none;
        }

    .cf-drawer-action--danger {
        color: #a92c3c;
    }

    .cf-history-callout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px;
        background: #f8f6fd;
        border-radius: 12px;
    }

        .cf-history-callout strong {
            display: block;
            color: var(--cf-ink);
            font-size: 13px;
        }

        .cf-history-callout span {
            display: block;
            margin-top: 3px;
            color: var(--cf-muted);
            font-size: 11px;
        }

    .cf-empty-action {
        color: var(--cf-muted);
        font-size: 12px;
    }

    @media (max-width: 1099px) {
        .cf-drawer-body {
            grid-template-columns: 1fr;
            grid-template-areas:
                "ticket"
                "guest"
                "manage"
                "activity";
        }

        .cf-field-grid,
        .cf-action-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cf-manage-toolbar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cf-drawer-activity .cf-wristband-list {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767px) {
        .cf-list-intro {
            align-items: flex-start;
            flex-direction: column;
        }

        .cf-list-controls,
        .cf-view-switch {
            width: 100%;
        }

        .cf-toolbar-view {
            width: 100%;
            margin-left: 0;
        }

        .cf-toolbar-right {
            width: 100%;
            flex-wrap: wrap;
        }

        /* The QR frame used to drop to 112px here, which squeezed the code into a 96px box and
           left it softer on a phone than anywhere else - the one place it actually gets
           scanned. Its size is renderTicketQr's to decide now, since only that knows the module
           count, so there is nothing to override: a width here would just put the code back on
           fractional pixels. The drawer is already single column below 1099px, so the ticket
           card has the room for it. */

        .cf-field-grid,
        .cf-action-grid {
            grid-template-columns: 1fr;
        }

        .cf-field--wide {
            grid-column: auto;
        }

        .cf-field--full {
            grid-column: auto;
        }

        /* Everything from the fourth column on - ticket type, booking type, booking number,
           event, alcohol, view and delete - used to be display:none here. The trouble was that
           the three columns left over still measured 422px inside a 350px shell, so the list
           kept a 74px horizontal scrollbar that moved but uncovered nothing: the other columns
           were not off to the side waiting to be scrolled to, they were out of the layout
           altogether. A scrollbar that promises more and delivers none reads as broken data.
           They are all laid out again now and the shell scrolls the ~1216px table properly,
           the same as table view does. No width override is needed to get there - the headers
           are white-space:nowrap, so the table's own minimum content width already pushes it
           past the width:100% further up. */
    }


/* ============================================================================
   Event/Edit
   Event editor: tabs, publish bar, ticketing and options panels
   ============================================================================ */
    .publish-row-1 .unpublish-button-1,
    .publish-row-1 .pause-bookings-1 {
        cursor: pointer;
        transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

        .publish-row-1 .unpublish-button-1:hover:not(:disabled),
        .publish-row-1 .pause-bookings-1:hover:not(:disabled),
        .publish-row-1 .unpublish-button-1:focus-visible,
        .publish-row-1 .pause-bookings-1:focus-visible {
            color: #fff !important;
            background: linear-gradient( 135deg, #6338e8, #4d8cff ) !important;
            border-color: #6338e8 !important;
            box-shadow: 0 10px 24px rgba(88, 52, 200, 0.24);
            outline: none;
            transform: translateY(-2px);
        }

            .publish-row-1 .unpublish-button-1:hover i,
            .publish-row-1 .pause-bookings-1:hover i,
            .publish-row-1 .unpublish-button-1:focus-visible i,
            .publish-row-1 .pause-bookings-1:focus-visible i {
                color: #fff !important;
            }

    /* Event editor design system. Scoped so legacy tables and tabs elsewhere are unchanged. */
    .cf-event-editor {
        --cf-event-primary: #5832ca;
        --cf-event-accent: #6338e8;
        --cf-event-line: #e5e0eb;
        --cf-event-muted: #746d7e;
        overflow: visible;
        background: #fff;
        border: 1px solid rgba(145, 131, 169, .24);
        border-radius: 18px;
        box-shadow: 0 18px 48px rgba(38, 27, 68, .08);
    }

    .cf-event-editor > .cf-event-editor__body {
        padding: 22px;
    }

    .cf-event-editor .event-tabs,
    .cf-event-editor .nav-tabs.nav-tabs-bottom,
    .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom,
    .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom,
    .cf-event-editor .communication-tabs {
        display: flex;
        align-items: center !important;
        align-content: center !important;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
        margin: 0 0 22px;
        padding: 6px;
        overflow-x: auto;
        background: #f5f6f8;
        border: 1px solid #e3e6eb;
        border-radius: 14px;
        scrollbar-width: thin;
        scrollbar-color: #c5bdd1 transparent;
    }

    .cf-event-editor .event-tabs::-webkit-scrollbar,
    .cf-event-editor .nav-tabs.nav-tabs-bottom::-webkit-scrollbar {
        height: 6px;
    }

    /* The primary Event Edit navigation always fits inside its card. Unlike
       nested tabs, it wraps into balanced rows when space is genuinely tight
       instead of creating a clipped horizontal scroller. */
    .cf-event-editor .event-tabs {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        overflow: hidden !important;
        scrollbar-width: none !important;
    }

    .cf-event-editor .event-tabs::-webkit-scrollbar {
        display: none;
    }

    .cf-event-editor .event-tabs > .nav-item {
        min-width: 0;
        height: 100%;
        flex: none;
    }

    .cf-event-editor .event-tabs > .nav-item > .nav-link {
        overflow: hidden;
        min-width: 0;
        height: 100% !important;
        white-space: nowrap !important;
        overflow-wrap: normal;
        text-align: center;
    }

    .cf-event-editor .event-tabs > .nav-item,
    .cf-event-editor .nav-tabs.nav-tabs-bottom > .nav-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 0 145px;
        align-self: center !important;
        margin: 0 !important;
    }

    .cf-event-editor .event-tabs > .nav-item > .nav-link,
    .cf-event-editor .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 46px;
        min-height: 46px;
        margin: 0;
        padding: 10px 15px;
        color: #626875;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        white-space: nowrap;
        background: transparent;
        border: 0;
        border-radius: 10px;
        box-shadow: none;
        transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .cf-event-editor .event-tabs > .nav-item > .nav-link:hover,
    .cf-event-editor .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link:hover {
        color: #333a47;
        background: #eceff3;
        border: 0;
        transform: none;
    }

    .cf-event-editor .event-tabs > .nav-item > .nav-link.active,
    .cf-event-editor .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link.active {
        color: #4f27c6 !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: 0 5px 14px rgba(51, 37, 79, .12) !important;
        transform: none;
    }

    /* Nested navigation responds to its own available card width rather than
       the browser viewport. This matters when the open sidebar makes the
       editor narrow on an otherwise desktop-sized screen. */
    .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom,
    .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom,
    .cf-event-editor .communication-tabs {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        overflow: hidden !important;
        scrollbar-width: none !important;
    }

    .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom::-webkit-scrollbar,
    .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom::-webkit-scrollbar,
    .cf-event-editor .communication-tabs::-webkit-scrollbar {
        display: none;
    }

    .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom > .nav-item,
    .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom > .nav-item,
    .cf-event-editor .communication-tabs > .nav-item {
        min-width: 0;
        height: 100%;
        flex: none;
    }

    .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link,
    .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link,
    .cf-event-editor .communication-tabs > .nav-item > .nav-link {
        overflow: hidden;
        min-width: 0;
        height: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .cf-event-editor .tab-content {
        overflow: visible;
    }

    .cf-event-editor .event-tabs + form > .tab-content > .tab-pane,
    .cf-event-editor .event-tabs + .tab-content > .tab-pane {
        animation: none;
    }

    .cf-event-editor .tab-pane h3,
    .cf-event-editor .tab-pane h3.block {
        margin: 0 0 15px;
        color: #282134 !important;
        font-size: 20px !important;
        font-weight: 700;
        line-height: 1.3;
    }

    .cf-event-editor .tab-pane h4,
    .cf-event-editor .tab-pane h5,
    .cf-event-editor .card-title {
        color: #312a3c;
        font-weight: 700;
    }

    .cf-event-editor .tab-pane .block:not(h3),
    .cf-event-editor .cf-info-panel,
    .cf-event-editor .tab-pane .alert,
    .cf-event-editor .tab-pane .publish-notice {
        margin-bottom: 16px;
        padding: 15px 17px;
        color: #554e61;
        background: #f8f6fb;
        border: 1px solid #e9e4ef;
        border-left: 4px solid #6d55df;
        border-radius: 11px;
    }

    .cf-event-editor .cf-info-panel {
        margin-top: 0 !important;
    }

    .cf-event-editor .cf-info-panel h3,
    .cf-event-editor .cf-info-panel__title {
        margin: 0 0 5px !important;
        color: #30283b !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.35;
    }

    .cf-event-editor .cf-info-panel p,
    .cf-event-editor .cf-info-panel__description {
        margin: 0 !important;
        color: #746d7e !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.55;
    }

    .cf-event-editor .tab-pane .block:not(h3) h3,
    .cf-event-editor .tab-pane .block:not(h3) h4 {
        margin-bottom: 5px;
    }

    .cf-event-editor .tab-pane .text,
    .cf-event-editor .tab-pane p {
        color: var(--cf-event-muted);
        line-height: 1.55;
    }

    .cf-event-editor .tab-pane > .col-lg-12,
    .cf-event-editor .tab-pane > .col-md-12 {
        padding-right: 0;
        padding-left: 0;
    }

    .cf-event-editor .tab-pane .form-group {
        margin-bottom: 17px;
    }

    .cf-event-editor .tab-pane .form-group:last-child {
        margin-bottom: 0;
    }

    .cf-event-editor .tab-pane .row.justify-content-end,
    .cf-event-editor .tab-pane .row.justify-content-md-end {
        align-items: center;
        gap: 10px;
        margin-right: 0;
        margin-left: 0;
    }

    .cf-event-editor .cf-event-editor__footer-actions {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid #e6e2ed;
    }

    .cf-event-editor .tab-pane .row.justify-content-end > [class*="col-"],
    .cf-event-editor .tab-pane .row.justify-content-md-end > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

    .cf-event-editor .tab-pane .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0;
        padding: 9px 14px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        border-radius: 10px;
        box-shadow: none;
    }

    .cf-event-editor .tab-pane .btn + .btn {
        margin-left: 8px;
    }

    .cf-event-editor .tab-pane .form-group > .row {
        align-items: flex-end;
        row-gap: 10px;
    }

    .cf-event-editor .cf-event-editor__section-action {
        margin: 0 0 12px !important;
    }

    .cf-event-editor .cf-event-editor__section-action + .table-responsive {
        margin-top: 0;
    }

    .cf-event-editor .cf-section-heading,
    .cf-event-editor .cf-card-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        width: 100%;
    }

    .cf-event-editor .cf-section-heading {
        margin: 0 0 16px;
        padding: 15px 17px;
        background: #f8f7fb;
        border: 1px solid #e7e2ed;
        border-left: 4px solid #6d55df;
        border-radius: 12px;
    }

    .cf-event-editor .cf-section-heading h3,
    .cf-event-editor .cf-card-heading h5 {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .cf-event-editor .cf-section-stats {
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cf-event-editor .cf-section-stat {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 7px;
        min-height: 38px;
        padding: 7px 11px;
        color: #393244;
        background: #fff;
        border: 1px solid #e1dbe8;
        border-radius: 9px;
    }

    .cf-event-editor .cf-section-stat__label {
        color: #766e81;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .cf-event-editor .cf-section-stat__value {
        color: #4f27c6;
        font-size: 13px;
        font-weight: 800;
    }

    .cf-event-editor .cf-section-action {
        width: 100%;
        margin: 0 0 12px !important;
        padding-right: 0;
        padding-left: 0;
    }

    .cf-event-editor .cf-section-action + [class*="col-"] {
        margin-top: 0 !important;
    }

    .cf-event-editor .cf-settings-section {
        width: 100%;
        margin-top: 14px;
        overflow: visible;
    }

    .cf-event-editor .cf-access-point-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 13px !important;
    }

    .cf-event-editor .cf-access-point-actions .btn {
        margin: 0 !important;
    }

    .cf-event-editor .cf-location-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cf-event-editor .cf-location-actions .btn,
    .cf-event-editor .cf-location-actions > a {
        margin: 0 !important;
    }

    .cf-event-editor #EntryAndExitPOSContainer > [id^="poslocation_"] > .card > .card-body > .nav-tabs {
        margin-top: 10px;
    }

    .cf-event-editor #EventStore_tab .cf-section-action {
        margin-top: 10px !important;
    }

    .cf-event-editor #POSContainer > [id^="pos_"] > .card > .card-body > .nav-tabs {
        margin-top: 10px;
    }

    .cf-event-editor .cf-access-tabs .nav-link {
        gap: 7px;
    }

    .cf-event-editor .cf-access-tab__name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cf-event-editor .cf-access-tab__type {
        flex: 0 0 auto;
        padding: 3px 7px;
        color: #6b6178;
        background: #ebe8ef;
        border-radius: 6px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .cf-event-editor .nav-link.active .cf-access-tab__type {
        color: #4f27c6;
        background: #f0ebff;
    }

    .cf-event-editor .cf-access-tab__remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        margin-left: auto;
        color: #a33a4a;
        background: #fff4f5;
        border: 1px solid #efd5da;
        border-radius: 6px;
        transition: color .15s ease, background .15s ease;
    }

    .cf-event-editor .cf-access-tab__remove:hover {
        color: #fff;
        background: #c43345;
    }

    .cf-event-editor .cf-access-tab__remove > i {
        position: static !important;
        top: auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0 !important;
        font-size: 10px;
        line-height: 1 !important;
        transform: none !important;
    }

    .cf-event-editor .tab-pane .card {
        margin-bottom: 16px;
        background: #fff;
        border: 1px solid var(--cf-event-line);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(45, 33, 79, .055);
    }

    .cf-event-editor .tab-pane .card-header {
        min-height: 56px;
        padding: 14px 16px;
        background: #faf9fc;
        border-bottom: 1px solid var(--cf-event-line);
        border-radius: 13px 13px 0 0;
    }

    .cf-event-editor .tab-pane .card-body {
        padding: 18px;
    }

    .cf-event-editor .table-responsive {
        width: 100%;
        margin: 12px 0 16px;
        overflow: auto;
        background: #fff;
        border: 1px solid var(--cf-event-line);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(45, 33, 79, .055);
        scrollbar-color: #b4adbd #f3f1f6;
        scrollbar-width: thin;
    }

    .cf-event-editor .table-responsive::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }

    .cf-event-editor .table-responsive::-webkit-scrollbar-track {
        background: #f3f1f6;
        border-radius: 999px;
    }

    .cf-event-editor .table-responsive::-webkit-scrollbar-thumb {
        background: #b4adbd;
        border: 2px solid #f3f1f6;
        border-radius: 999px;
    }

    .cf-event-editor .table-responsive > .table,
    .cf-event-editor table.table {
        width: 100% !important;
        margin: 0 !important;
        color: #342d40;
        background: #fff;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .cf-event-editor table.table thead th {
        height: 48px;
        padding: 11px 13px !important;
        color: #716a7b;
        background: #f7f5fa;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e4dfea !important;
        border-left: 0 !important;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .045em;
        line-height: 1.25;
        text-transform: uppercase;
        vertical-align: middle;
        white-space: nowrap;
    }

    .cf-event-editor table.table thead th:first-child {
        padding-left: 16px !important;
        border-radius: 13px 0 0 0;
    }

    .cf-event-editor table.table thead th:last-child {
        padding-right: 16px !important;
        border-radius: 0 13px 0 0;
    }

    .cf-event-editor table.table tbody tr {
        background: #fff;
        transition: background .15s ease, box-shadow .15s ease;
    }

    .cf-event-editor table.table tbody tr:hover {
        background: #fbfaff !important;
        box-shadow: inset 3px 0 0 #bca9f7;
    }

    .cf-event-editor table.table tbody td {
        min-height: 56px;
        padding: 10px 13px !important;
        color: #3e3749;
        background: transparent !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #eeeaf2 !important;
        border-left: 0 !important;
        font-size: 12px;
        line-height: 1.4;
        vertical-align: middle;
    }

    .cf-event-editor table.table tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    .cf-event-editor table.table tbody td:first-child {
        padding-left: 16px !important;
    }

    .cf-event-editor table.table tbody td:last-child {
        padding-right: 16px !important;
    }

    .cf-event-editor table.table input[type="checkbox"] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: var(--cf-event-accent);
    }

    .cf-event-editor table.table .btn,
    .cf-event-editor table.table a.btn,
    .cf-event-editor table.table button.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        margin: 2px;
        padding: 7px 11px;
        color: #5832ca;
        background: #f5f1ff;
        border: 1px solid #e0d7fb;
        border-radius: 9px;
        box-shadow: none;
        font-size: 11px;
        font-weight: 800;
    }

    .cf-event-editor table.table .btn:hover,
    .cf-event-editor table.table .btn:focus {
        color: #fff;
        background: var(--cf-event-accent);
        border-color: var(--cf-event-accent);
    }

    .cf-event-editor table.table .btn-danger,
    .cf-event-editor table.table .btn-outline-danger,
    .cf-event-editor table.table [class*="delete"] {
        color: #b72e43;
        background: #fff4f5;
        border-color: #f0d4d9;
    }

    .cf-event-editor table.table a.text-black,
    .cf-event-editor table.table a.text-danger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: #5832ca !important;
        background: #f5f1ff;
        border: 1px solid #e0d7fb;
        border-radius: 9px;
        text-decoration: none;
        transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
    }

    .cf-event-editor table.table a.text-black:hover,
    .cf-event-editor table.table a.text-black:focus {
        color: #fff !important;
        background: var(--cf-event-accent);
        border-color: var(--cf-event-accent);
        transform: translateY(-1px);
    }

    .cf-event-editor table.table a.text-danger {
        color: #bd3045 !important;
        background: #fff5f6;
        border-color: #f2d8dc;
    }

    .cf-event-editor table.table a.text-danger:hover,
    .cf-event-editor table.table a.text-danger:focus {
        color: #fff !important;
        background: #c43345;
        border-color: #c43345;
        transform: translateY(-1px);
    }

    .cf-event-editor .form-control,
    .cf-event-editor .select2-selection,
    .cf-event-editor textarea,
    .cf-event-editor select {
        min-height: 45px;
        color: #332c40;
        background-color: #fbfaff;
        border: 1px solid #ddd7e7;
        border-radius: 10px;
        box-shadow: none;
    }

    .cf-event-editor textarea.form-control {
        min-height: 110px;
    }

    .cf-event-editor .form-control:focus,
    .cf-event-editor textarea:focus,
    .cf-event-editor select:focus {
        background-color: #fff;
        border-color: #7b58ed;
        outline: none;
        box-shadow: 0 0 0 3px rgba(99, 56, 232, .10);
    }

    .cf-event-editor .form-group > label {
        margin-bottom: 7px;
        color: #554e61;
        font-size: 12px;
        font-weight: 700;
    }

    .cf-event-editor .tab-pane > .row:last-child .btn,
    .cf-event-editor .tab-pane .text-right .btn,
    .cf-event-editor .tab-pane .justify-content-end .btn {
        min-height: 42px;
        margin-top: 0 !important;
        padding: 9px 14px;
        font-weight: 700;
        border-radius: 10px;
    }

    .cf-event-editor .pagination {
        display: flex;
        gap: 5px;
    }

    .cf-event-editor .pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        color: #625a70;
        background: #fff;
        border: 1px solid #e4dfea;
        border-radius: 9px !important;
        font-size: 11px;
        font-weight: 700;
    }

    .cf-event-editor .pagination .active .page-link {
        color: #fff;
        background: var(--cf-event-accent);
        border-color: var(--cf-event-accent);
    }

    @media (max-width: 991.98px) {
        .cf-event-editor > .cf-event-editor__body {
            padding: 17px;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom,
        .cf-event-editor .communication-tabs {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            overflow: hidden !important;
            scrollbar-width: none !important;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom::-webkit-scrollbar,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom::-webkit-scrollbar,
        .cf-event-editor .communication-tabs::-webkit-scrollbar {
            display: none;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom > .nav-item,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom > .nav-item,
        .cf-event-editor .communication-tabs > .nav-item {
            min-width: 0;
            flex: none;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link,
        .cf-event-editor .communication-tabs > .nav-item > .nav-link {
            min-width: 0;
            padding-right: 8px;
            padding-left: 8px;
            white-space: normal;
            text-align: center;
        }

        .cf-event-editor .event-tabs > .nav-item,
        .cf-event-editor .nav-tabs.nav-tabs-bottom > .nav-item {
            flex-basis: 155px;
        }

        .cf-event-editor table.table {
            min-width: 680px;
        }

        /* The ticket type table is table-layout:fixed with a 920px min-width of its own, and the
           680px above was overriding that downwards. Fixed layout does not reflow when it is
           squeezed - the columns just get narrower and the content hangs out over whatever is
           next to it, which is why the Configured and External badges sat on top of the price
           and a 170px quantity box was living in a 75px cell. Even at its intended 920px it
           still overhung by 82px, so the width was never the real answer. Letting the columns
           size to their own content is: the table settles at ~1123px with nothing overlapping,
           and the wrapper around it already scrolls. */
        .cf-event-editor table.cf-ticket-type-table {
            table-layout: auto;
            width: auto;
            min-width: 100%;
        }

        /* Add Ticket Type and Sync Oztix Ticket Types wrap onto separate lines here and met with
           no space at all between them. UIStyle gives them a margin-bottom for exactly this, but
           .cf-event-editor .tab-pane .btn in this file zeroes every button margin in the editor
           and outranks it. Spacing the row rather than the buttons steps around that entirely -
           gap is not something a margin rule can cancel. */
        .cf-event-editor .ticketing-actions__row {
            gap: 8px;
        }
    }

    /* .cf-event-editor .tab-pane .btn + .btn puts 8px to the left of every button that follows
       another one, which is what you want while they sit side by side. In the event store's
       inventory panel they do not: they are too wide for the phone and wrap onto their own
       lines, so that margin stops being a gap between neighbours and becomes an indent on every
       line after the first. Add Inventory Item started at 92 and the three under it at 100.
       Only this container's buttons wrap - the rest of the editor still sits in rows and keeps
       its spacing - so the reset is scoped to it. */
    @media (max-width: 767.98px) {
        #deviceandinventorycontainer .btn + .btn {
            margin-left: 0;
        }
    }

    @media (max-width: 575.98px) {
        .cf-event-editor {
            border-radius: 15px;
        }

        .cf-event-editor > .cf-event-editor__body {
            padding: 13px;
        }

        .cf-event-editor .event-tabs,
        .cf-event-editor .nav-tabs.nav-tabs-bottom {
            margin-bottom: 16px;
            padding: 5px;
            border-radius: 12px;
        }

        .cf-event-editor .event-tabs {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            overflow: hidden !important;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom,
        .cf-event-editor .communication-tabs {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            overflow: hidden !important;
            scrollbar-width: none !important;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom::-webkit-scrollbar,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom::-webkit-scrollbar,
        .cf-event-editor .communication-tabs::-webkit-scrollbar {
            display: none;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom > .nav-item,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom > .nav-item,
        .cf-event-editor .communication-tabs > .nav-item {
            min-width: 0;
            flex: none;
        }

        .cf-event-editor .tab-pane > .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link,
        .cf-event-editor .tab-pane > * > .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link,
        .cf-event-editor .communication-tabs > .nav-item > .nav-link {
            min-width: 0;
            padding-right: 8px;
            padding-left: 8px;
            white-space: normal;
            text-align: center;
        }

        .cf-event-editor .event-tabs > .nav-item {
            min-width: 0;
        }

        .cf-event-editor .event-tabs > .nav-item > .nav-link {
            min-width: 0;
            padding-right: 7px;
            padding-left: 7px;
            white-space: nowrap !important;
            overflow-wrap: normal;
            text-align: center;
        }

        .cf-event-editor .tab-pane .row.justify-content-end,
        .cf-event-editor .tab-pane .row.justify-content-md-end {
            align-items: stretch;
            flex-direction: column;
        }

        .cf-event-editor .tab-pane .row.justify-content-end > [class*="col-"],
        .cf-event-editor .tab-pane .row.justify-content-md-end > [class*="col-"],
        .cf-event-editor .tab-pane .row.justify-content-end .btn,
        .cf-event-editor .tab-pane .row.justify-content-md-end .btn {
            width: 100%;
        }

        .cf-event-editor .event-tabs > .nav-item,
        .cf-event-editor .nav-tabs.nav-tabs-bottom > .nav-item {
            flex-basis: 135px;
        }

        .cf-event-editor .event-tabs > .nav-item > .nav-link,
        .cf-event-editor .nav-tabs.nav-tabs-bottom > .nav-item > .nav-link {
            min-height: 42px;
            padding: 9px 12px;
            font-size: 12px;
        }

        .cf-event-editor .tab-pane h3,
        .cf-event-editor .tab-pane h3.block {
            font-size: 18px !important;
        }

        .cf-event-editor .table-responsive {
            border-radius: 12px;
        }

        .cf-event-editor .cf-section-heading,
        .cf-event-editor .cf-card-heading {
            align-items: flex-start;
            flex-direction: column;
        }

        .cf-event-editor .cf-section-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100%;
        }

        .cf-event-editor .cf-section-stat {
            grid-template-columns: 1fr;
            gap: 2px;
        }

        .cf-event-editor .cf-location-actions {
            justify-content: flex-start;
            width: 100%;
            margin-top: 10px;
        }
    }

    @media (max-width: 420px) {
        .cf-event-editor .event-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Payment Setup's search box and its page size select share one bootstrap row as col-sm-8
       and col-sm-2, so under 576 they stop sitting side by side and stack instead. Nothing was
       left to separate them at that point: the .form-group around the search has its bottom
       margin zeroed by the theme, and bootstrap columns carry horizontal gutters only, so the
       two controls met exactly edge to edge. Hung on the select's own id rather than the row,
       whose classes are plain bootstrap and shared with the rest of the app. */
    @media (max-width: 575.98px) {
        #PaymentSetupRecordsPerPage {
            margin-top: 12px;
        }
    }


/* ============================================================================
   Guest/BookTicket
   Booking form: attendee rows, add-ons and totals
   ============================================================================ */
    .cf-booking-form {
        --cf-book-ink: #211a35;
        --cf-book-muted: #716b7d;
        --cf-book-line: #e9e5f1;
        --cf-book-soft: #f8f7fb;
        --cf-book-primary: #6338e8;
        --cf-book-primary-dark: #4520b8;
        --cf-book-danger: #c43345;
        max-width: 1380px;
        margin: 0 auto;
        color: var(--cf-book-ink);
    }

    .cf-booking-form #bookingContainer,
    .cf-booking-form #surveyQuestionAnswersContainer {
        margin-right: -8px;
        margin-left: -8px;
    }

    .cf-booking-form #bookingContainer > [class*="col-"],
    .cf-booking-form #surveyQuestionAnswersContainer > [class*="col-"] {
        padding-right: 8px;
        padding-left: 8px;
    }

    .cf-booking-form .ticket-card {
        position: relative;
        overflow: hidden;
        margin-top: 10px;
        margin-bottom: 14px !important;
        border: 1px solid var(--cf-book-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 35px rgba(38, 25, 70, .07);
    }

    .cf-booking-form .ticket-card .card-header {
        min-height: 64px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--cf-book-line);
        background: linear-gradient(135deg, #fbfaff 0%, #f5f1ff 100%);
    }

    .cf-booking-form .ticket-card .card-title {
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 0;
        color: var(--cf-book-ink);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .cf-booking-form .ticket-card .card-title::before {
        display: inline-flex;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: linear-gradient(135deg, #6338e8 0%, #536dfe 100%);
        box-shadow: 0 7px 16px rgba(99, 56, 232, .2);
        color: #fff;
        content: "\f145";
        font-family: "Font Awesome 5 Free", FontAwesome;
        font-size: 14px;
        font-weight: 900;
    }

    .cf-booking-form .ticket-card .header-elements {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    .cf-booking-form .ticket-card .list-icons {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cf-booking-form .ticket-card .list-icons-item,
    .cf-booking-form .cf-ticket-add,
    .cf-booking-form .cf-ticket-delete {
        display: inline-flex;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--cf-book-line);
        border-radius: 11px;
        background: #fff;
        color: var(--cf-book-muted);
        line-height: 1;
        text-decoration: none;
        box-shadow: none;
    }

    .cf-booking-form .ticket-card .list-icons-item::after,
    .cf-booking-form .cf-ticket-add i,
    .cf-booking-form .cf-ticket-delete i {
        display: block;
        margin: 0;
        line-height: 1;
    }

    .cf-booking-form .cf-ticket-delete i {
        display: inline-flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        line-height: 1 !important;
    }

    .cf-booking-form .cf-ticket-delete i::before {
        display: block;
        line-height: 1 !important;
    }

    .cf-booking-form .cf-ticket-delete svg {
        display: block;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        margin: 0;
        pointer-events: none;
    }

    .cf-booking-form .cf-ticket-add {
        border-color: #d9cffb;
        background: #f4f0ff;
        color: var(--cf-book-primary-dark);
    }

    .cf-booking-form .ticket-card:not(:last-child) .cf-ticket-add {
        display: none;
    }

    .cf-booking-form .cf-ticket-add:hover,
    .cf-booking-form .cf-ticket-add:focus {
        border-color: #b9a7f7;
        background: #ece5ff;
        color: #35148f;
    }

    .cf-booking-form .ticket-card .card-body {
        padding: 20px 20px 8px;
    }

    .cf-booking-form .ticket-card .card-body > .row {
        align-items: flex-start;
    }

    .cf-booking-form .ticket-card .card-body > .row > .col-lg-6:first-of-type {
        flex: 1 1 650px;
        max-width: 100%;
    }

    .cf-booking-form .ticket-card .card-body > .row > [id^="limit_"] {
        flex: 0 1 410px;
        max-width: 410px;
    }

    .cf-booking-form .cf-ticket-delete {
        border: 1px solid #f3d5da;
        background: #fff6f7;
        color: var(--cf-book-danger);
    }

    .cf-booking-form .cf-ticket-delete:hover,
    .cf-booking-form .cf-ticket-delete:focus {
        border-color: #e8b5bd;
        background: #ffedef;
        color: #a82032;
    }

    .cf-booking-form .form-group {
        margin-bottom: 16px;
    }

    .cf-booking-form .form-group > label,
    .cf-booking-form .addon-tickets-heading {
        margin-bottom: 7px;
        color: #5e586b;
        font-size: 12px !important;
        font-weight: 750 !important;
        letter-spacing: .01em;
    }

    .cf-booking-form .form-control {
        min-height: 46px;
        padding: 10px 13px;
        border: 1px solid #e2ddea;
        border-radius: 12px;
        background: #fbfafd;
        color: var(--cf-book-ink);
        font-size: 14px;
        box-shadow: none;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

    .cf-booking-form textarea.form-control {
        min-height: 72px;
        line-height: 1.5;
    }

    .cf-booking-form textarea.ticketDescription {
        min-height: 46px !important;
        height: auto;
        padding-top: 11px;
        padding-bottom: 11px;
        overflow: hidden;
    }

    .cf-booking-form .form-control:focus {
        border-color: #a993f3;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(99, 56, 232, .1);
    }

    .cf-booking-form .form-control[readonly],
    .cf-booking-form .ticketDescription[readonly] {
        border-color: #ebe8f0;
        background: #f6f4f8 !important;
        color: var(--cf-book-muted);
    }

    .cf-booking-form .select2-container {
        width: 100% !important;
    }

    .cf-booking-form .select2-container--default .select2-selection--single {
        height: 46px !important;
        padding: 0 12px !important;
        border: 1px solid #e2ddea !important;
        border-radius: 12px !important;
        background: #fbfafd !important;
    }

    .cf-booking-form .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-right: 28px;
        padding-left: 0;
        color: var(--cf-book-ink);
        line-height: 44px;
    }

    .cf-booking-form .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 9px;
        right: 8px;
    }

    .cf-booking-form .addon-tickets-section {
        margin-top: 2px !important;
        margin-bottom: 16px !important;
        padding: 14px 14px 4px;
        border: 1px solid var(--cf-book-line);
        border-radius: 14px;
        background: var(--cf-book-soft);
    }

    .cf-booking-form .addon-row {
        margin-bottom: 8px;
        padding: 10px;
        border: 1px solid var(--cf-book-line);
        border-radius: 12px;
        background: #fff;
    }

    .cf-booking-form .btn-add-addon {
        min-height: 40px;
        padding: 8px 11px !important;
        border: 1px solid #d9cffb !important;
        border-radius: 10px;
        background: #f4f0ff !important;
        color: var(--cf-book-primary-dark) !important;
        font-weight: 700;
    }

    .cf-booking-form .addon-row .btn-remove-addon {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid #f3d5da;
        border-radius: 10px;
        background: #fff6f7;
        color: var(--cf-book-danger);
    }

    .cf-booking-form .addon-row .btn-remove-addon:hover,
    .cf-booking-form .addon-row .btn-remove-addon:focus {
        border-color: #e8b5bd;
        background: #ffedef;
        color: #a82032;
    }

    .cf-booking-form .attendee-ticket-cost-row {
        margin: 2px 0 16px !important;
        padding: 12px 14px;
        border: 1px solid #ddd4fa;
        border-radius: 12px;
        background: #f6f2ff;
        color: var(--cf-book-primary-dark);
    }

    .cf-booking-form .ticket-card .card-body > .row > [id^="limit_"] > div {
        padding: 16px !important;
        border: 1px solid #ded7f0 !important;
        border-radius: 14px !important;
        background: #faf8ff;
    }

    .cf-booking-form input[type="checkbox"] {
        accent-color: var(--cf-book-primary);
    }

    .cf-booking-form .booking-subtotal-container {
        margin: 0 0 14px !important;
    }

    .cf-booking-form .booking-subtotal-box {
        min-width: 230px;
        padding: 14px 16px !important;
        border: 1px solid #d9cffb !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #f8f5ff 0%, #eef2ff 100%) !important;
        color: var(--cf-book-primary-dark);
        font-size: 15px;
    }

    .cf-booking-form .validation-summary-errors {
        margin-bottom: 14px;
        padding: 12px 14px;
        border: 1px solid #f3d5da;
        border-radius: 12px;
        background: #fff6f7;
        color: #a82032;
    }

    .cf-booking-form .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

    .cf-booking-form .cf-booking-actions {
        margin-top: 2px;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid var(--cf-book-line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(38, 25, 70, .06);
    }

    .cf-booking-form .cf-booking-actions__row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 10px;
        margin: 0;
    }

    .cf-booking-form .cf-booking-actions__row > [class*="col-"] {
        flex: 0 1 auto;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .cf-booking-form .cf-booking-actions .btn,
    .cf-booking-form .cf-survey-actions .btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 10px 17px;
        border-radius: 12px;
        font-weight: 750;
    }

    .cf-booking-form .btn-primary {
        border-color: var(--cf-book-primary);
        background: var(--cf-book-primary);
    }

    .cf-booking-form .btn-primary:hover,
    .cf-booking-form .btn-primary:focus {
        border-color: var(--cf-book-primary-dark);
        background: var(--cf-book-primary-dark);
    }

    .cf-booking-form .btn-outline-primary {
        border-color: #d9cffb;
        background: #fff;
        color: var(--cf-book-primary-dark);
    }

    .cf-booking-form .cf-survey-card {
        overflow: hidden;
        margin-bottom: 14px !important;
        border: 1px solid var(--cf-book-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 35px rgba(38, 25, 70, .07);
    }

    .cf-booking-form .cf-survey-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 20px;
        border-bottom: 1px solid var(--cf-book-line);
        background: linear-gradient(135deg, #fbfaff 0%, #f5f1ff 100%);
    }

    .cf-booking-form .cf-survey-card__header h4 {
        margin: 0 0 3px;
        color: var(--cf-book-ink);
        font-size: 17px;
        font-weight: 800;
    }

    .cf-booking-form .cf-survey-card__header p {
        margin: 0;
        color: var(--cf-book-muted);
        font-size: 13px;
    }

    .cf-booking-form .cf-survey-card .card-body {
        padding: 20px;
    }

    .cf-booking-form .cf-survey-question {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid var(--cf-book-line);
        border-radius: 14px;
        background: var(--cf-book-soft);
    }

    .cf-booking-form .cf-survey-question .form-group {
        margin: 0;
    }

    .cf-booking-form .cf-survey-question .text-bold {
        display: block;
        margin-bottom: 4px;
        color: var(--cf-book-primary-dark);
        font-size: 11px;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .cf-booking-form .cf-survey-question .qslink {
        display: block;
        margin-bottom: 10px;
        color: var(--cf-book-ink);
        font-size: 14px;
        font-weight: 700;
    }

    .cf-booking-form .cf-survey-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 4px;
    }

    @media (max-width: 991.98px) {
        .cf-booking-form .ticket-card .card-body > .row > .col-lg-6:first-of-type,
        .cf-booking-form .ticket-card .card-body > .row > [id^="limit_"] {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .cf-booking-form .ticket-card .card-body > .row > [id^="limit_"] {
            margin-top: 0 !important;
            margin-bottom: 16px;
        }
    }

    @media (max-width: 767.98px) {
        .cf-booking-form #bookingContainer,
        .cf-booking-form #surveyQuestionAnswersContainer {
            margin-right: -5px;
            margin-left: -5px;
        }

        .cf-booking-form #bookingContainer > [class*="col-"],
        .cf-booking-form #surveyQuestionAnswersContainer > [class*="col-"] {
            padding-right: 5px;
            padding-left: 5px;
        }

        .cf-booking-form .ticket-card {
            border-radius: 14px;
        }

        .cf-booking-form .ticket-card .card-header {
            min-height: 58px;
            padding: 12px 14px;
        }

        .cf-booking-form .ticket-card .card-title::before {
            width: 30px;
            height: 30px;
            flex-basis: 30px;
            border-radius: 9px;
        }

        .cf-booking-form .ticket-card .card-body {
            padding: 16px 14px 4px;
        }

        .cf-booking-form .cf-booking-actions .btn,
        .cf-booking-form .cf-survey-actions .btn {
            width: 100%;
        }

        .cf-booking-form .cf-booking-actions__row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .cf-booking-form .cf-booking-actions__row > [class*="col-"] {
            width: 100%;
        }

        .cf-booking-form .cf-survey-actions {
            display: grid;
            grid-template-columns: 1fr;
        }

        .cf-booking-form .cf-survey-card__header {
            display: block;
            padding: 16px;
        }

        .cf-booking-form .cf-survey-card .card-body {
            padding: 14px;
        }
    }

    /* Layout remains controlled by the existing ticket/subtotal JavaScript. */
    #bookingContainer .booking-subtotal-container {
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 10px 0 10px 0 !important;
        padding: 0 !important;
    }
    #bookingContainer .booking-subtotal-container > div {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
    }


/* ============================================================================
   Guest/Index
   Guest list page: toolbar, table, bulk actions and its modals
   ============================================================================ */
    .guest-event-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        width: calc(100% - 36px);
        margin: 0 18px 24px;
        padding: 16px 18px;
        background: linear-gradient(125deg, rgba(255,255,255,.94), rgba(255,255,255,.76));
        border: 1px solid rgba(255,255,255,.9);
        border-radius: 22px;
        box-shadow: 0 8px 20px rgba(45,33,79,.06), 0 24px 50px rgba(45,33,79,.10);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    .guest-event-toolbar__actions,
    .guest-event-toolbar__publish {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
    }

    .guest-event-toolbar__actions {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start !important;
        gap: 9px !important;
    }

    .guest-event-toolbar__actions > .guest-toolbar-divider {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .guest-event-toolbar__publish {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-left: auto;
    }

    .guest-event-toolbar__item {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }

    .guest-event-toolbar .btn-outline-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 15px;
        color: #4520b8 !important;
        background: rgba(255,255,255,.88) !important;
        border: 1px solid rgba(99,56,232,.20) !important;
        border-radius: 13px !important;
        box-shadow: 0 4px 10px rgba(49,35,91,.04), 0 10px 22px rgba(49,35,91,.07) !important;
        font-size: 13px;
        font-weight: 650;
        line-height: 1;
        text-decoration: none !important;
        white-space: nowrap;
        transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }

        .guest-event-toolbar .btn-outline-primary i,
        .guest-event-toolbar button i {
            margin-right: 0 !important;
            font-size: 16px;
        }

        .guest-event-toolbar .btn-outline-primary:hover,
        .guest-event-toolbar .btn-outline-primary:focus {
            color: #fff !important;
            background: linear-gradient(135deg, #6338e8, #4d8cff) !important;
            border-color: transparent !important;
            box-shadow: 0 9px 20px rgba(87,52,196,.20), 0 16px 32px rgba(87,52,196,.13) !important;
            outline: none;
            transform: translateY(-2px);
        }

    .guest-event-toolbar #BulkDeleteBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 15px;
        color: #b4232d !important;
        background: rgba(255,255,255,.88) !important;
        border: 1px solid rgba(203,49,61,.22) !important;
        border-radius: 13px !important;
        box-shadow: 0 4px 10px rgba(49,35,91,.04), 0 10px 22px rgba(49,35,91,.07) !important;
        font-size: 13px;
        font-weight: 650;
    }

        .guest-event-toolbar #BulkDeleteBtn[style*="display: none"] {
            display: none !important;
        }

    .guest-event-toolbar .ticketflo-status,
    .guest-event-toolbar .publish-button-1,
    .guest-event-toolbar .pause-bookings-1,
    .guest-event-toolbar .resume-bookings-1,
    .guest-event-toolbar .unpublish-button-1 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 15px;
        border-radius: 13px !important;
        font-size: 13px;
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
    }

    .guest-event-toolbar .ticketflo-status {
        color: #272136;
        background: rgba(255,255,255,.88) !important;
        border: 1px solid rgba(99,56,232,.14) !important;
        box-shadow: 0 4px 10px rgba(49,35,91,.04), 0 10px 22px rgba(49,35,91,.06);
    }

        .guest-event-toolbar .ticketflo-status i {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            color: #fff;
            background: linear-gradient(145deg, #6338e8, #4d8cff);
            border-radius: 50%;
            font-size: 0;
            line-height: 0;
        }

        .guest-event-toolbar .ticketflo-status i::before {
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            margin: 0 !important;
            font-size: 13px;
            line-height: 1;
            transform: translate(-50%, -50%);
        }

        .guest-event-toolbar .ticketflo-status strong {
            color: #272136;
            font-size: 12px;
            font-weight: 700;
        }

    .guest-event-toolbar .publish-button-1,
    .guest-event-toolbar .resume-bookings-1 {
        color: #fff !important;
        background: linear-gradient(135deg, #6338e8, #4d8cff) !important;
        border: 0px solid transparent !important;
        box-shadow: 0 8px 18px rgba(88,52,200,.20), 0 14px 28px rgba(88,52,200,.12);
        padding: 0 20px 0 20px;
    }

    .guest-event-toolbar .pause-bookings-1,
    .guest-event-toolbar .unpublish-button-1 {
        color: #4520b8 !important;
        background: rgba(255, 255, 255, .88) !important;
        border: 1px solid rgba(85, 75, 102, .18) !important;
        box-shadow: 0 4px 10px rgba(49, 35, 91, .04), 0 10px 22px rgba(49, 35, 91, .07);
    }

    .guest-event-toolbar .publish-button-1::before,
    .guest-event-toolbar .pause-bookings-1::before,
    .guest-event-toolbar .resume-bookings-1::before,
    .guest-event-toolbar .unpublish-button-1::before {
        display: none;
    }

    .guest-event-toolbar a:focus-visible,
    .guest-event-toolbar button:focus-visible {
        outline: 3px solid rgba(99,56,232,.24);
        outline-offset: 2px;
    }

    @media (max-width: 1650px) {
        .guest-event-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
            gap: 10px;
        }

        .guest-event-toolbar__actions,
        .guest-event-toolbar__publish {
            justify-content: flex-start;
            width: 100%;
            margin-left: 0;
        }

        .guest-event-toolbar__publish {
            padding-top: 10px;
            border-top: 1px solid rgba(99, 56, 232, .10);
        }

        .guest-event-toolbar__actions {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-auto-flow: row dense;
            align-items: stretch;
            gap: 9px;
        }

        .guest-event-toolbar__actions .guest-event-toolbar__item,
        .guest-event-toolbar__actions .guest-event-toolbar__item > .btn {
            width: 100% !important;
            min-width: 0;
        }

        .guest-event-toolbar__actions .guest-event-toolbar__item:has(> #BulkDeleteBtn[style*="display: none"]) {
            display: none;
        }

        .guest-toolbar-divider {
            display: none;
        }
    }

    @media (max-width: 1100px) {
        .guest-event-toolbar .guest-toolbar-divider,
        .guest-event-toolbar .guest-toolbar-divider::before,
        .guest-event-toolbar .guest-toolbar-divider::after {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            height: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            content: none !important;
        }

        .guest-event-toolbar__actions,
        .guest-event-toolbar__publish {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-flow: row dense;
            align-items: stretch;
            gap: 8px;
        }

        .guest-event-toolbar__item:has(> #BulkDeleteBtn[style*="display: none"]) {
            display: none;
        }

        .guest-event-toolbar__item,
        .guest-event-toolbar__item > .btn,
        .guest-event-toolbar__publish > * {
            width: 100% !important;
            min-width: 0;
        }

        .guest-event-toolbar .btn-outline-primary,
        .guest-event-toolbar .publish-button-1,
        .guest-event-toolbar .pause-bookings-1,
        .guest-event-toolbar .resume-bookings-1,
        .guest-event-toolbar .unpublish-button-1,
        .guest-event-toolbar .ticketflo-status {
            padding: 9px 10px;
            white-space: normal;
            text-align: center;
        }

        .guest-event-toolbar__actions .guest-event-toolbar__item--export {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 767px) {
        .guest-event-toolbar {
            width: calc(100% - 24px);
            margin: 0 12px 20px;
            padding: 14px;
            border-radius: 18px;
        }

        .guest-event-toolbar__actions,
        .guest-event-toolbar__publish {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .guest-event-toolbar__actions > .guest-event-toolbar__item:first-child {
            grid-column: 1 / -1;
        }

        .guest-event-toolbar__actions .guest-event-toolbar__item--export {
            grid-column: auto;
        }

        .guest-event-toolbar__publish .ticketflo-status {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 480px) {
        .guest-event-toolbar__actions,
        .guest-event-toolbar__publish {
            grid-template-columns: minmax(0, 1fr);
        }

        .guest-event-toolbar__publish .ticketflo-status {
            grid-column: auto;
        }

        .guest-event-toolbar__actions > .guest-event-toolbar__item:first-child {
            grid-column: auto;
        }
    }

    .guest-event-toolbar .publish-button-1,
    .guest-event-toolbar .unpublish-button-1,
    .guest-event-toolbar .resume-bookings-1,
    .guest-event-toolbar .pause-bookings-1 {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }

    .guest-event-toolbar .publish-button-1 i,
    .guest-event-toolbar .unpublish-button-1 i,
    .guest-event-toolbar .resume-bookings-1 i,
    .guest-event-toolbar .pause-bookings-1 i {
        margin: 0 !important;
        font-size: 16px;
    }

    .guest-event-toolbar__publish {
        display: flex !important;
        align-items: stretch;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px;
    }

    .guest-event-toolbar__publish .ticketflo-status {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

    .guest-event-toolbar__state-actions {
        display: flex;
        flex: 1 1 auto;
        width: 100% !important;
        min-width: 0;
        align-items: stretch;
        gap: 8px;
        margin: 0;
    }

    .cf-booking-modal .modal-dialog {
        display: flex;
        align-items: center;
        width: calc(100% - 32px);
        max-width: 860px;
        min-height: 0;
        margin: 16px auto;
    }

    .cf-booking-modal .modal-content {
        width: 100%;
        height: auto;
        max-height: calc(100vh - 32px);
        overflow: hidden;
        border: 1px solid rgba(145, 131, 169, .28);
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(30, 20, 53, .25);
    }

    .cf-booking-modal .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        padding: 8px 14px;
        background: #fff;
        border-bottom: 1px solid #e8e3ed;
    }

    .cf-booking-modal .modal-title {
        margin: 0;
        color: #292234;
        font-size: 18px;
        font-weight: 800;
    }

    .cf-booking-modal__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        color: #5f5769;
        background: #f8f6fa;
        border: 1px solid #e6e0eb;
        border-radius: 10px;
        font-size: 22px;
        line-height: 1;
        opacity: 1;
    }

    .cf-booking-modal .modal-body {
        position: relative;
        height: auto;
        max-height: calc(100vh - 90px);
        padding: 0;
        overflow: hidden;
        background: #f8f7fa;
    }

    .cf-booking-modal__loading {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        color: #716a7c;
        background: #fbfafd;
        font-size: 13px;
    }

    .cf-booking-modal__loading i {
        color: #5b34df;
        font-size: 24px;
    }

    .cf-booking-modal__frame {
        display: block;
        width: 100%;
        height: 420px;
        max-height: calc(100vh - 90px);
        opacity: 0;
        pointer-events: none;
        background: #fff;
        border: 0;
    }

    @media (max-width: 767.98px) {
        .cf-booking-modal .modal-dialog {
            width: calc(100% - 12px);
            margin: 6px auto;
        }

        .cf-booking-modal .modal-content {
            max-height: calc(100vh - 12px);
            border-radius: 14px;
        }

        .cf-booking-modal .modal-body,
        .cf-booking-modal__frame {
            max-height: calc(100vh - 70px);
        }
    }


/* ============================================================================
   Guest/ConfirmTicket
   Checkout review and confirmation, also shown as a modal from Guest/Index
   ============================================================================ */
    .cf-checkout-form {
        --cf-checkout-ink: #211a35;
        --cf-checkout-muted: #716b7d;
        --cf-checkout-line: #e9e5f1;
        --cf-checkout-soft: #f8f7fb;
        --cf-checkout-primary: #6338e8;
        --cf-checkout-primary-dark: #4520b8;
        max-width: 1380px;
        margin: 0 auto;
        color: var(--cf-checkout-ink);
    }

    html body .cf-checkout-document--modal {
        box-sizing: border-box;
        margin: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    html body .cf-checkout-document--modal > [class*="col-"] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .cf-checkout-form.cf-checkout-form--modal {
        margin-top: 0;
        margin-bottom: 0;
    }

    .cf-checkout-form.cf-checkout-form--modal .cf-checkout-payment {
        margin-bottom: 0 !important;
    }

    .cf-checkout-form .cf-checkout-layout {
        margin-right: -8px;
        margin-left: -8px;
    }

    .cf-checkout-form .cf-checkout-layout > [class*="col-"] {
        padding-right: 8px;
        padding-left: 8px;
    }

    .cf-checkout-form .cf-checkout-ticket,
    .cf-checkout-form .cf-checkout-fees {
        position: relative;
        overflow: hidden;
        margin-bottom: 14px !important;
        border: 1px solid var(--cf-checkout-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 35px rgba(38, 25, 70, .07);
    }

    .cf-checkout-form .cf-checkout-ticket .card-header,
    .cf-checkout-form .cf-checkout-fees .card-header {
        min-height: 64px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--cf-checkout-line);
        background: linear-gradient(135deg, #fbfaff 0%, #f5f1ff 100%);
    }

    .cf-checkout-form .cf-checkout-ticket .card-title,
    .cf-checkout-form .cf-checkout-fees .card-title {
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 0;
        color: var(--cf-checkout-ink);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .cf-checkout-form .cf-checkout-ticket .card-title::before,
    .cf-checkout-form .cf-checkout-fees .card-title::before {
        display: inline-flex;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: linear-gradient(135deg, #6338e8 0%, #536dfe 100%);
        box-shadow: 0 7px 16px rgba(99, 56, 232, .2);
        color: #fff;
        content: "\f145";
        font-family: "Font Awesome 5 Free", FontAwesome;
        font-size: 14px;
        font-weight: 900;
    }

    .cf-checkout-form .cf-checkout-fees .card-title::before {
        content: "\f0d6";
    }

    .cf-checkout-form .cf-checkout-ticket .header-elements {
        margin-left: auto;
    }

    .cf-checkout-form .cf-checkout-ticket .list-icons-item {
        display: inline-flex;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--cf-checkout-line);
        border-radius: 11px;
        background: #fff;
        color: var(--cf-checkout-muted);
    }

    .cf-checkout-form .cf-checkout-ticket .card-body,
    .cf-checkout-form .cf-checkout-fees .card-body {
        padding: 20px 20px 8px;
    }

    .cf-checkout-form .cf-checkout-ticket .card-body > .row > .col-lg-6:first-of-type {
        flex: 1 1 650px;
        max-width: 100%;
    }

    .cf-checkout-form .cf-checkout-ticket .card-body > .row > [id^="limit_"] {
        flex: 0 1 410px;
        max-width: 410px;
    }

    .cf-checkout-form .form-group {
        margin-bottom: 16px;
    }

    .cf-checkout-form .form-group > label {
        margin-bottom: 7px;
        color: #5e586b;
        font-size: 12px;
        font-weight: 750;
        letter-spacing: .01em;
    }

    .cf-checkout-form .form-control {
        min-height: 46px;
        padding: 10px 13px;
        border: 1px solid #e2ddea;
        border-radius: 12px;
        background: #f6f4f8;
        color: var(--cf-checkout-ink);
        font-size: 14px;
        box-shadow: none;
    }

    .cf-checkout-form textarea.form-control {
        min-height: 72px;
        line-height: 1.5;
    }

    .cf-checkout-form .form-control[readonly],
    .cf-checkout-form .form-control:disabled {
        border-color: #ebe8f0;
        background: #f6f4f8;
        color: #625c6e;
        opacity: 1;
    }

    .cf-checkout-form .cf-checkout-addons {
        margin: 2px 0 16px !important;
        padding: 14px;
        border: 1px solid var(--cf-checkout-line);
        border-radius: 14px;
        background: var(--cf-checkout-soft);
    }

    .cf-checkout-form .cf-checkout-addons > .form-group {
        margin: 0;
    }

    .cf-checkout-form .cf-checkout-addons .text-muted {
        display: block;
        margin: 0;
        padding: 9px 11px;
        border: 1px solid var(--cf-checkout-line);
        border-radius: 10px;
        background: #fff;
        color: #5e586b !important;
        font-size: 13px;
    }

    .cf-checkout-form .attendee-ticket-cost-row {
        margin: 2px 0 16px !important;
        padding: 12px 14px;
        border: 1px solid #ddd4fa;
        border-radius: 12px;
        background: #f6f2ff;
        color: var(--cf-checkout-primary-dark);
    }

    .cf-checkout-form .cf-checkout-ticket .card-body > .row > [id^="limit_"] > div {
        padding: 16px !important;
        border: 1px solid #ded7f0 !important;
        border-radius: 14px !important;
        background: #faf8ff;
    }

    .cf-checkout-form input[type="checkbox"] {
        accent-color: var(--cf-checkout-primary);
    }

    .cf-checkout-form .cf-checkout-payment {
        overflow: hidden;
        margin: 2px 0 14px;
        border: 1px solid var(--cf-checkout-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 35px rgba(38, 25, 70, .07);
    }

    .cf-checkout-form .cf-checkout-payment__row {
        margin: 0;
    }

    .cf-checkout-form .cf-checkout-payment__header {
        padding: 18px 20px;
        border-bottom: 1px solid var(--cf-checkout-line);
        background: linear-gradient(135deg, #fbfaff 0%, #f5f1ff 100%);
    }

    .cf-checkout-form .cf-checkout-payment__header h4 {
        margin: 0 0 3px;
        color: var(--cf-checkout-ink);
        font-size: 17px;
        font-weight: 800;
    }

    .cf-checkout-form .cf-checkout-payment__header p {
        margin: 0;
        color: var(--cf-checkout-muted);
        font-size: 13px;
    }

    .cf-checkout-form .cf-checkout-total {
        flex: 0 0 290px;
        max-width: 290px;
        margin: 0 !important;
        padding: 18px 10px 12px 20px;
    }

    .cf-checkout-form .cf-checkout-total .form-group-feedback {
        margin: 0;
    }

    .cf-checkout-form .cf-checkout-total .form-control {
        border-color: #d9cffb;
        background: #f6f2ff;
        color: var(--cf-checkout-primary-dark);
        font-size: 18px;
        font-weight: 800;
    }

    .cf-checkout-form .cf-checkout-total .form-control-feedback {
        top: 7px;
        color: var(--cf-checkout-muted);
    }

    .cf-checkout-form .cf-checkout-delivery {
        display: flex;
        flex: 1 1 360px;
        align-items: center;
        margin: 0 !important;
        padding: 28px 20px 12px;
        color: var(--cf-checkout-muted);
        font-size: 13px;
    }

    .cf-checkout-form .cf-checkout-delivery::before {
        margin-right: 9px;
        color: var(--cf-checkout-primary);
        content: "\f0e0";
        font-family: "Font Awesome 5 Free", FontAwesome;
        font-size: 16px;
        font-weight: 900;
    }

    .cf-checkout-form .cf-checkout-actions {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        padding: 14px 20px 18px;
        border-top: 1px solid var(--cf-checkout-line);
        background: #fcfbfe;
        text-align: right !important;
    }

    .cf-checkout-form .cf-checkout-actions .btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 10px 17px;
        border-radius: 12px;
        font-weight: 750;
    }

    .cf-checkout-form .cf-checkout-actions .btn-primary {
        border-color: var(--cf-checkout-primary);
        background: var(--cf-checkout-primary);
    }

    .cf-checkout-form .cf-checkout-actions .btn-primary:hover,
    .cf-checkout-form .cf-checkout-actions .btn-primary:focus {
        border-color: var(--cf-checkout-primary-dark);
        background: var(--cf-checkout-primary-dark);
    }

    .cf-checkout-form .cf-checkout-actions .btn-outline-primary {
        border-color: #d9cffb;
        background: #fff;
        color: var(--cf-checkout-primary-dark);
    }

    .cf-checkout-form .cf-checkout-actions .cf-btn-warning {
        border: 1px solid #f0d58a;
        background: #fff8df;
        color: #865c00;
    }

    @media (max-width: 991.98px) {
        .cf-checkout-form .cf-checkout-ticket .card-body > .row > .col-lg-6:first-of-type,
        .cf-checkout-form .cf-checkout-ticket .card-body > .row > [id^="limit_"] {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .cf-checkout-form .cf-checkout-ticket .card-body > .row > [id^="limit_"] {
            margin-bottom: 16px;
        }
    }

    @media (max-width: 767.98px) {
        .cf-checkout-form .cf-checkout-ticket,
        .cf-checkout-form .cf-checkout-fees,
        .cf-checkout-form .cf-checkout-payment {
            border-radius: 14px;
        }

        .cf-checkout-form .cf-checkout-ticket .card-header,
        .cf-checkout-form .cf-checkout-fees .card-header {
            min-height: 58px;
            padding: 12px 14px;
        }

        .cf-checkout-form .cf-checkout-ticket .card-body,
        .cf-checkout-form .cf-checkout-fees .card-body {
            padding: 16px 14px 4px;
        }

        .cf-checkout-form .cf-checkout-total {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 16px 16px 4px;
        }

        .cf-checkout-form .cf-checkout-delivery {
            padding: 8px 16px 16px;
        }

        .cf-checkout-form .cf-checkout-actions {
            display: grid;
            grid-template-columns: 1fr;
            padding: 14px 16px 16px;
        }

        .cf-checkout-form .cf-checkout-actions .btn {
            width: 100%;
        }
    }


/* ============================================================================
   Client/Edit
   Client editor form
   ============================================================================ */
    .client-editor {
        max-width: 1280px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid #e3e7ef;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 20px 55px rgba(25,34,58,.10);
    }

    .client-editor__hero {
        position: relative;
        overflow: hidden;
        min-height: 180px;
        padding: 30px 40px 30px 340px;
        color: #fff;
        background: linear-gradient(120deg,#3b2e98 0%,#5144eb 55%,#0c98b7 100%);
    }

        .client-editor__hero:before, .client-editor__hero:after {
            position: absolute;
            content: "";
            border-radius: 50%;
            border: 35px solid rgba(255,255,255,.08);
        }

        .client-editor__hero:before {
            width: 230px;
            height: 230px;
            right: -50px;
            top: -120px;
        }

        .client-editor__hero:after {
            width: 145px;
            height: 145px;
            right: 210px;
            bottom: -110px;
        }

    .client-editor__tag {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        padding: 6px 12px;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 999px;
        background: rgba(255,255,255,.1);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .client-editor__hero h3 {
        position: relative;
        z-index: 1;
        margin: 0 0 5px;
        color: #fff;
        font-size: 27px;
        font-weight: 700;
    }

    .client-editor__hero p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: rgba(255,255,255,.82);
    }

    .client-editor__layout {
        display: grid;
        grid-template-columns: 300px minmax(0,1fr);
    }

    .client-editor__sidebar {
        padding: 0 30px 30px;
        border-right: 1px solid #e5e8ef;
        background: #fbfcfe;
        text-align: center;
    }

    .client-editor__avatar-wrap {
        position: relative;
        width: 156px;
        height: 156px;
        margin: -72px auto 18px;
        padding: 7px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 12px 30px rgba(29,38,64,.17);
    }

    .client-editor__avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .client-editor__company {
        margin: 0 0 4px;
        color: #17213a;
        font-size: 20px;
        font-weight: 700;
    }

    .client-editor__email {
        margin-bottom: 20px;
        color: #7b8498;
        word-break: break-word;
    }

    .client-editor__image-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

        .client-editor__image-actions .btn {
            padding: 8px 12px;
            border-radius: 9px;
            font-weight: 700;
        }

        .client-editor__image-actions .btn-change {
            color: #5144eb;
            border: 1px solid #dcd8ff;
            background: #f3f1ff;
        }

        .client-editor__image-actions .btn-remove {
            color: #e53935;
            border: 1px solid #ffd7d7;
            background: #fff4f4;
        }

    .client-editor__busy {
        margin-top: 14px;
        color: #7b8498;
        font-size: 12px;
    }

    .client-editor__content {
        padding: 34px 40px 36px;
    }

    .client-editor__section-title {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 25px;
        padding-bottom: 18px;
        border-bottom: 1px solid #e7eaf1;
    }

    .client-editor__section-icon {
        display: inline-flex;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #5144eb;
        background: #eef0ff;
        font-size: 20px;
    }

    .client-editor__section-title h4 {
        margin: 0 0 3px;
        color: #17213a;
        font-size: 20px;
        font-weight: 700;
    }

    .client-editor__section-title p {
        margin: 0;
        color: #7d8497;
    }

    .client-editor .form-group {
        margin-bottom: 22px;
    }

    .client-editor label {
        margin-bottom: 8px;
        color: #1f2940;
        font-weight: 700;
    }

    .client-editor .form-control {
        min-height: 50px;
        border: 1px solid #d8deea;
        border-radius: 12px;
        box-shadow: none;
    }

    .client-editor textarea.form-control {
        min-height: 112px;
        resize: vertical;
    }

    .client-editor .form-control:focus {
        border-color: #6658eb;
        box-shadow: 0 0 0 3px rgba(102,88,235,.12);
    }

    .client-editor .form-control[disabled] {
        color: #697386;
        background: #f5f7fa;
        cursor: not-allowed;
    }

    .client-editor__locked {
        margin-top: 7px;
        color: #9299aa;
        font-size: 12px;
    }

        .client-editor__locked i {
            margin-right: 5px;
        }

    .client-editor__required {
        color: #e53935;
    }

    .client-editor__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: 8px;
        padding-top: 24px;
        border-top: 1px solid #e7eaf1;
    }

    .client-editor__footer-left, .client-editor__footer-right {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .client-editor__footer .btn {
        padding: 10px 16px;
        border-radius: 10px;
        font-weight: 700;
    }

    .client-editor__save {
        color: #fff !important;
        border-color: #5144eb !important;
        background: #5144eb !important;
        box-shadow: 0 9px 22px rgba(81,68,235,.22);
    }

    .client-editor__back {
        color: #29324a;
        border: 1px solid #dce1ea;
        background: #fff;
    }

    .client-editor__verify {
        color: #5144eb;
        border: 1px solid #dcd8ff;
        background: #f3f1ff;
    }

    .client-editor__stripe {
        color: #fff;
        border-color: #635bff;
        background: #635bff;
    }

    @media (max-width: 900px) {
        .client-editor__hero {
            min-height: 210px;
            padding: 28px 24px 105px;
            text-align: center;
        }

        .client-editor__layout {
            grid-template-columns: 1fr;
        }

        .client-editor__sidebar {
            border-right: 0;
            border-bottom: 1px solid #e5e8ef;
        }

        .client-editor__avatar-wrap {
            margin-top: -78px;
        }
    }

    @media (max-width: 767px) {
        .client-editor__hero {
            min-height: 220px;
            padding: 26px 22px 110px;
        }

        .client-editor__content {
            padding: 26px 20px;
        }

        .client-editor__footer {
            align-items: stretch;
            flex-direction: column;
        }

        .client-editor__footer-left, .client-editor__footer-right {
            flex-direction: column;
        }

        .client-editor__footer .btn {
            width: 100%;
        }
    }


/* ============================================================================
   Guest/AddEditSurveyQuestion
   Survey answers modal opened from the guest list
   ============================================================================ */
    .cf-survey-dialog {
        width: calc(100% - 32px);
        max-width: 880px;
        margin: 28px auto;
    }

    .cf-survey-modal {
        overflow: hidden;
        color: #211a35;
        background: #f8f7fb;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(32, 23, 65, .24);
    }

    .cf-survey-modal .modal-header {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 18px 20px;
        background: #fff;
        border-bottom: 1px solid #e9e5f1;
    }

    .cf-survey-header-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        color: #fff;
        background: linear-gradient(145deg, #6338e8, #4d8cff);
        border-radius: 12px;
        font-size: 17px;
    }

    .cf-survey-header-copy {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cf-survey-header-copy h4 {
        margin: 0;
        color: #211a35;
        font-size: 18px;
        font-weight: 800;
    }

    .cf-survey-header-copy p {
        overflow: hidden;
        margin: 3px 0 0;
        color: #716b7d;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-survey-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        padding: 0;
        color: #554d63;
        background: #f7f5fa;
        border: 1px solid #e9e5f1;
        border-radius: 11px;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .cf-survey-modal .modal-body {
        padding: 18px;
    }

    .cf-survey-panel {
        padding: 16px;
        background: #fff;
        border: 1px solid #e9e5f1;
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(35, 24, 70, .05);
    }

    .cf-survey-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 13px;
    }

    .cf-survey-section-heading h5 {
        margin: 0;
        color: #211a35;
        font-size: 14px;
        font-weight: 800;
    }

    .cf-survey-count,
    .cf-survey-required {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 5px 9px;
        color: #5832ca;
        background: #f1edff;
        border: 1px solid #dfd6ff;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .cf-survey-list {
        overflow-y: auto;
        max-height: min(58vh, 560px);
        margin: 0;
        padding-right: 5px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .cf-survey-list .card-body {
        padding: 0;
    }

    .cf-survey-question-col {
        padding-right: 10px;
        padding-left: 10px;
    }

    .cf-survey-question-number {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        margin: 0 0 8px;
        padding: 4px 8px;
        color: #5832ca;
        background: #eee9ff;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 850 !important;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .cf-survey-modal .form-control {
        min-height: 42px;
        color: #2c2540;
        background: #fff;
        border: 1px solid #e2ddea;
        border-radius: 10px;
        font-size: 12px;
        box-shadow: none;
    }

    .cf-survey-modal .form-control:focus {
        border-color: #7b58ed;
        box-shadow: 0 0 0 3px rgba(99, 56, 232, .11);
    }

    .cf-survey-modal .select2-container {
        width: 100% !important;
    }

    .cf-survey-modal .select2-container .select2-selection--single {
        height: 42px;
        border-color: #e2ddea;
        border-radius: 10px;
    }

    .cf-survey-modal .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px;
    }

    .cf-survey-modal .select2-container .select2-selection--single .select2-selection__arrow {
        height: 40px;
    }

    .cf-survey-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        margin: 0;
        padding: 20px;
        color: #777080;
        background: #faf9fc;
        border: 1px dashed #ddd7e7;
        border-radius: 11px;
        text-align: center;
    }

    .cf-survey-modal .validation-summary-errors {
        margin-top: 4px;
        padding: 11px 13px;
        color: #a72a3d;
        background: #fff5f6;
        border: 1px solid #f2d8dc;
        border-radius: 10px;
        font-size: 12px;
    }

    .cf-survey-modal .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

    .cf-survey-modal .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding: 14px 18px 18px;
        background: #f8f7fb;
        border-top: 0;
    }

    .cf-survey-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 9px 13px;
        border-radius: 11px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
    }

    .cf-survey-action--primary {
        color: #fff;
        background: #6338e8;
        border: 1px solid #6338e8;
    }

    .cf-survey-action--secondary {
        color: #514863;
        background: #fff;
        border: 1px solid #ddd7e7;
    }

    @media (max-width: 640px) {
        .cf-survey-dialog {
            width: calc(100% - 18px);
            margin: 9px auto;
        }

        /*  The icon and close button leave the subtitle about 210px on a phone against the 274px
            it needs, so it ellipsed away mid-word. Wrapping only kicks in when it cannot fit. */
        .cf-survey-header-copy p {
            overflow-wrap: break-word;
            white-space: normal;
        }

        .cf-survey-modal .modal-body {
            padding: 12px;
        }

        .cf-survey-modal .modal-footer {
            flex-direction: column-reverse;
        }

        .cf-survey-action {
            width: 100%;
        }
    }


/* ============================================================================
   Guest/_SubTicket
   Sub-ticket panel loaded into the guest list
   ============================================================================ */
    .cf-addon-dialog {
        width: calc(100% - 32px);
        max-width: 880px;
        margin: 28px auto;
    }

    .cf-addon-modal {
        overflow: hidden;
        color: #211a35;
        background: #f8f7fb;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(32, 23, 65, .24);
    }

    .cf-addon-modal .modal-header {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 18px 20px;
        background: #fff;
        border-bottom: 1px solid #e9e5f1;
    }

    .cf-addon-header-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        color: #fff;
        background: linear-gradient(145deg, #6338e8, #4d8cff);
        border-radius: 12px;
        font-size: 17px;
    }

    .cf-addon-header-copy {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cf-addon-header-copy h4 {
        margin: 0;
        color: #211a35;
        font-size: 18px;
        font-weight: 800;
    }

    .cf-addon-header-copy p {
        overflow: hidden;
        margin: 3px 0 0;
        color: #716b7d;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-addon-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        padding: 0;
        color: #554d63;
        background: #f7f5fa;
        border: 1px solid #e9e5f1;
        border-radius: 11px;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .cf-addon-modal .modal-body {
        padding: 18px;
    }

    .cf-addon-modal .modal-body > .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .cf-addon-panel {
        margin: 0;
        padding: 16px !important;
        background: #fff;
        border: 1px solid #e9e5f1 !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 28px rgba(35, 24, 70, .05);
    }

    .cf-addon-list-panel {
        margin-top: 14px;
    }

    .cf-addon-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 13px;
    }

    .cf-addon-section-heading h5 {
        margin: 0;
        color: #211a35;
        font-size: 14px;
        font-weight: 800;
    }

    .cf-addon-count,
    .cf-addon-badge {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 5px 9px;
        color: #5832ca;
        background: #f1edff;
        border: 1px solid #dfd6ff;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .cf-addon-master .box-content {
        padding: 14px !important;
        background: #f8f7fb;
        border: 1px solid #eeeaf4;
        border-radius: 12px;
    }

    .cf-addon-modal .form-control[readonly] {
        height: 42px;
        color: #2c2540;
        background: #fff !important;
        border: 1px solid #e2ddea;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        box-shadow: none;
    }

    .cf-addon-field-label {
        display: block;
        margin: 0 0 5px;
        color: #777080;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .cf-addon-row {
        min-height: 60px;
        margin: 0 0 9px !important;
        padding: 9px 4px;
        background: #fbfafd;
        border: 1px solid #ece8f2;
        border-radius: 11px;
    }

    .cf-addon-row:last-child {
        margin-bottom: 0 !important;
    }

    .cf-addon-row-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: #5832ca;
        background: #eee9ff;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 850;
    }

    .cf-addon-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        color: #bd3045 !important;
        background: #fff5f6;
        border: 1px solid #f2d8dc;
        border-radius: 10px;
        text-decoration: none !important;
    }

    .cf-addon-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        margin: 0;
        padding: 20px;
        color: #777080 !important;
        background: #faf9fc;
        border: 1px dashed #ddd7e7;
        border-radius: 11px;
        text-align: center;
    }

    .cf-addon-modal .alert-warning {
        margin: 14px 0 0;
        padding: 11px 13px !important;
        color: #7b5a18;
        background: #fff8e8;
        border: 1px solid #f2dfb1;
        border-radius: 11px;
        font-size: 12px;
    }

    .cf-addon-modal .modal-body > .col-md-12 {
        padding: 0;
    }

    .cf-addon-modal .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding: 14px 18px 18px;
        background: #f8f7fb;
        border-top: 0;
    }

    .cf-addon-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 9px 13px;
        border-radius: 11px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
    }

    .cf-addon-action--primary {
        color: #fff;
        background: #6338e8;
        border: 1px solid #6338e8;
    }

    .cf-addon-action--secondary {
        color: #514863;
        background: #fff;
        border: 1px solid #ddd7e7;
    }

    .cf-addon-action:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    @media (max-width: 640px) {
        .cf-addon-dialog {
            width: calc(100% - 18px);
            margin: 9px auto;
        }

        .cf-addon-modal .modal-footer {
            flex-direction: column-reverse;
        }

        .cf-addon-action {
            width: 100%;
        }
    }


/* ============================================================================
   TransactionLog/Index
   Transaction log list and filters
   ============================================================================ */
    .cf-transaction-log {
        --cf-log-accent: #5b36e8;
        --cf-log-accent-dark: #4522c7;
        --cf-log-line: #e6e1ec;
        --cf-log-muted: #766f80;
        overflow: hidden;
        margin-bottom: 24px;
        background: #fff;
        border: 1px solid rgba(145, 131, 169, .24);
        border-radius: 18px;
        box-shadow: 0 16px 42px rgba(38, 27, 68, .07);
    }

    .cf-transaction-log > .card-body {
        padding: 22px;
    }

    .cf-transaction-log__toolbar {
        display: grid;
        grid-template-columns: auto minmax(280px, 1fr) 138px;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .cf-transaction-log__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 18px;
        color: #4f27c6 !important;
        background: #fff;
        border: 1px solid #dcd3fb;
        border-radius: 11px;
        box-shadow: 0 7px 18px rgba(55, 37, 90, .08);
        font-weight: 700;
        white-space: nowrap;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .cf-transaction-log__back:hover,
    .cf-transaction-log__back:focus {
        color: #3f1fb0 !important;
        background: #f8f6ff;
        border-color: #cbbef8;
        box-shadow: 0 9px 22px rgba(55, 37, 90, .12);
    }

    .cf-transaction-log__search {
        position: relative;
        min-width: 0;
    }

    .cf-transaction-log__search .form-control {
        height: 48px;
        padding: 0 16px 0 47px;
        color: #2d2738;
        background: #fff;
        border: 1px solid #e2dce9;
        border-radius: 11px;
        box-shadow: 0 7px 18px rgba(55, 37, 90, .045);
    }

    .cf-transaction-log__search .form-control:focus {
        border-color: #baa9f5;
        box-shadow: 0 0 0 3px rgba(91, 54, 232, .10);
    }

    .cf-transaction-log__search-icon {
        position: absolute;
        top: 50%;
        left: 17px;
        z-index: 2;
        color: #635b70;
        font-size: 18px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .cf-transaction-log__page-size {
        height: 48px;
        padding: 0 40px 0 15px;
        color: #342d40;
        background-color: #fff;
        border: 1px solid #e2dce9;
        border-radius: 11px;
        font-weight: 700;
    }

    .cf-transaction-log__table-wrap {
        overflow-x: auto;
        border: 1px solid var(--cf-log-line);
        border-radius: 14px;
    }

    .cf-transaction-log .cf-transaction-log__table {
        min-width: 720px;
        margin: 0;
        border: 0;
        table-layout: fixed;
    }

    .cf-transaction-log__table thead th {
        height: 58px;
        padding: 16px 20px;
        vertical-align: middle;
        color: #696171;
        background: #f7f5fa;
        border: 0 !important;
        border-bottom: 1px solid var(--cf-log-line) !important;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .cf-transaction-log__table thead th:nth-child(1) { width: 34%; }
    .cf-transaction-log__table thead th:nth-child(2) { width: 22%; }
    .cf-transaction-log__table thead th:nth-child(3) { width: 26%; }
    .cf-transaction-log__table thead th:nth-child(4) { width: 18%; text-align: right; }

    .cf-transaction-log__table tbody td {
        height: 74px;
        padding: 15px 20px;
        vertical-align: middle;
        color: #3e3749;
        background: #fff;
        border: 0 !important;
        border-bottom: 1px solid #eeeaf2 !important;
    }

    .cf-transaction-log__table tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    .cf-transaction-log__table tbody tr:not(.cf-transaction-log__empty-row):hover td {
        background: #fbfaff;
    }

    .cf-transaction-log__guest-name {
        display: block;
        margin-bottom: 3px;
        color: #282134;
        font-weight: 750;
    }

    .cf-transaction-log__guest-email {
        display: block;
        overflow: hidden;
        color: var(--cf-log-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-transaction-log__guest-email a {
        color: inherit;
    }

    .cf-transaction-log__pos {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-height: 32px;
        padding: 5px 10px;
        overflow: hidden;
        color: #51475d;
        background: #f5f2f9;
        border-radius: 8px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-transaction-log__date {
        color: #5f576a;
        white-space: nowrap;
    }

    .cf-transaction-log__amount {
        color: #2f2540;
        font-weight: 800;
        text-align: right;
        white-space: nowrap;
    }

    .cf-transaction-log__empty-row td {
        height: 220px !important;
        padding: 35px 20px !important;
        text-align: center;
    }

    .cf-transaction-log__empty-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-bottom: 13px;
        color: var(--cf-log-accent);
        background: #f0ebff;
        border-radius: 13px;
        font-size: 23px;
    }

    .cf-transaction-log__empty-title {
        margin-bottom: 4px;
        color: #2c2537;
        font-size: 16px;
        font-weight: 800;
    }

    .cf-transaction-log__empty-copy {
        color: var(--cf-log-muted);
        font-size: 13px;
    }

    .cf-transaction-log .pagination {
        justify-content: flex-end;
        gap: 7px;
        margin: 18px 0 0;
    }

    .cf-transaction-log .pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
        color: #625a70;
        background: #fff;
        border: 1px solid #e4dfea;
        border-radius: 9px !important;
        font-weight: 700;
    }

    .cf-transaction-log .pagination .active .page-link {
        color: #fff;
        background: var(--cf-log-accent);
        border-color: var(--cf-log-accent);
    }

    @media (max-width: 767.98px) {
        .cf-transaction-log > .card-body {
            padding: 16px;
        }

        .cf-transaction-log__toolbar {
            grid-template-columns: minmax(0, 1fr) 110px;
        }

        .cf-transaction-log__back {
            grid-column: 1 / -1;
            width: 100%;
        }
    }

    @media (max-width: 479.98px) {
        .cf-transaction-log {
            border-radius: 15px;
        }

        .cf-transaction-log__toolbar {
            grid-template-columns: minmax(0, 1fr) 92px;
            gap: 9px;
        }

        .cf-transaction-log__search .form-control {
            padding-right: 10px;
            font-size: 13px;
        }
    }


/* ============================================================================
   Guest/CheckOut
   Guest check-out screen
   ============================================================================ */
    .cf-success-page {
        --cf-success-ink: #211a35;
        --cf-success-muted: #716b7d;
        --cf-success-line: #e9e5f1;
        --cf-success-soft: #f8f7fb;
        --cf-success-primary: #6338e8;
        --cf-success-primary-dark: #4520b8;
        max-width: 980px;
        margin: 10px auto 30px;
        color: var(--cf-success-ink);
    }

    .cf-success-card {
        overflow: hidden;
        border: 1px solid var(--cf-success-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 44px rgba(38, 25, 70, .08);
    }

    .cf-success-cover {
        position: relative;
        height: 210px;
        overflow: hidden;
        background: linear-gradient(135deg, #4520b8 0%, #6338e8 55%, #536dfe 100%);
    }

    .cf-success-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cf-success-cover::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(33, 26, 53, .04), rgba(33, 26, 53, .35));
        content: "";
        pointer-events: none;
    }

    .cf-success-content {
        padding: 0 28px 28px;
    }

    .cf-success-state {
        max-width: 650px;
        margin: 0 auto;
        padding: 34px 20px 24px;
        text-align: center;
    }

    .cf-success-cover + .cf-success-content .cf-success-state {
        position: relative;
        margin-top: -34px;
        padding-top: 0;
    }

    .cf-success-icon {
        display: inline-flex;
        width: 68px;
        height: 68px;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        border: 7px solid #fff;
        border-radius: 18px;
        background: linear-gradient(135deg, #21a366 0%, #41be7b 100%);
        box-shadow: 0 12px 28px rgba(33, 163, 102, .23);
        color: #fff;
        font-size: 27px;
    }

    .cf-success-state h2 {
        margin: 0 0 7px;
        color: var(--cf-success-ink);
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .cf-success-event {
        margin: 0;
        color: var(--cf-success-muted);
        font-size: 14px;
    }

    .cf-success-reference {
        max-width: 650px;
        margin: 0 auto 14px;
        padding: 18px 20px;
        border: 1px solid #d9cffb;
        border-radius: 14px;
        background: linear-gradient(135deg, #f8f5ff 0%, #eef2ff 100%);
        text-align: center;
    }

    .cf-success-reference span {
        display: block;
        margin-bottom: 5px;
        color: var(--cf-success-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

    .cf-success-reference strong {
        display: block;
        color: var(--cf-success-primary-dark);
        font-size: 24px;
        font-weight: 850;
        letter-spacing: .025em;
        overflow-wrap: anywhere;
    }

    .cf-success-delivery {
        display: flex;
        max-width: 650px;
        align-items: center;
        gap: 12px;
        margin: 0 auto 14px;
        padding: 14px 16px;
        border: 1px solid var(--cf-success-line);
        border-radius: 14px;
        background: var(--cf-success-soft);
    }

    .cf-success-delivery__icon {
        display: inline-flex;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: #eee9ff;
        color: var(--cf-success-primary);
        font-size: 16px;
    }

    .cf-success-delivery strong {
        display: block;
        margin-bottom: 2px;
        color: var(--cf-success-ink);
        font-size: 13px;
    }

    .cf-success-delivery p {
        margin: 0;
        color: var(--cf-success-muted);
        font-size: 13px;
    }

    .cf-success-extra {
        max-width: 650px;
        margin: 0 auto;
        padding: 16px;
        border: 1px solid var(--cf-success-line);
        border-radius: 14px;
        background: #fff;
        color: #514a5d;
        font-size: 13px;
        line-height: 1.55;
    }

    .cf-success-actions {
        display: flex;
        max-width: 650px;
        justify-content: flex-end;
        margin: 22px auto 0;
        padding-top: 18px;
        border-top: 1px solid var(--cf-success-line);
    }

    .cf-success-actions .btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 10px 17px;
        border: 1px solid #d9cffb;
        border-radius: 12px;
        background: #fff;
        color: var(--cf-success-primary-dark);
        font-weight: 750;
    }

    .cf-success-actions .btn + .btn {
        margin-left: 10px;
    }

    .cf-success-actions .btn:hover,
    .cf-success-actions .btn:focus {
        border-color: #b9a7f7;
        background: #f4f0ff;
        color: #35148f;
    }

    .cf-success-actions .btn-primary {
        border-color: var(--cf-success-primary);
        background: var(--cf-success-primary);
        color: #fff;
    }

    .cf-success-actions .btn-primary:hover,
    .cf-success-actions .btn-primary:focus {
        border-color: var(--cf-success-primary-dark);
        background: var(--cf-success-primary-dark);
        color: #fff;
    }

    @media (max-width: 767.98px) {
        .cf-success-page {
            margin-top: 0;
        }

        .cf-success-card {
            border-radius: 14px;
        }

        .cf-success-cover {
            height: 150px;
        }

        .cf-success-content {
            padding: 0 14px 16px;
        }

        .cf-success-state {
            padding: 25px 8px 20px;
        }

        .cf-success-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            font-size: 23px;
        }

        .cf-success-state h2 {
            font-size: 22px;
        }

        .cf-success-reference strong {
            font-size: 20px;
        }

        .cf-success-actions .btn {
            width: 100%;
        }

        .cf-success-actions .btn + .btn {
            margin-top: 10px;
            margin-left: 0;
        }

        .cf-success-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }


/* ============================================================================
   Client/Index
   Client list
   ============================================================================ */
    .clients-page {
        max-width: 1450px;
        margin: 0 auto;
    }

    .clients-card {
        overflow: hidden;
        border: 1px solid #e4e8f0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 16px 42px rgba(26,34,56,.08);
    }

    .clients-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        padding: 27px 30px;
        color: #fff;
        background: linear-gradient(120deg,#3b2e98 0%,#5144eb 55%,#0c98b7 100%);
    }

    .clients-hero__tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: rgba(255,255,255,.78);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .clients-hero h3 {
        margin: 0 0 4px;
        color: #fff;
        font-size: 26px;
        font-weight: 700;
    }

    .clients-hero p {
        margin: 0;
        color: rgba(255,255,255,.8);
    }

    .clients-hero__actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .clients-count {
        min-width: 95px;
        padding: 10px 15px;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 12px;
        background: rgba(255,255,255,.12);
        text-align: center;
    }

        .clients-count strong {
            display: block;
            font-size: 21px;
            line-height: 1;
        }

        .clients-count span {
            display: block;
            margin-top: 5px;
            font-size: 10px;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

    .clients-add {
        padding: 11px 17px;
        border: 0;
        border-radius: 11px;
        color: #5144eb !important;
        background: #fff;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(27,25,84,.18);
    }

        .clients-add:hover {
            background: #f4f3ff;
        }

        .clients-add i {
            display: inline-block;
            margin-right: 8px;
        }

    .clients-body {
        padding: 26px 28px 30px;
    }

    .clients-table {
        margin: 0;
        overflow: hidden;
        border: 1px solid #e5e9f1;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 14px;
    }

        .clients-table thead th {
            padding: 14px 16px;
            border: 0;
            background: #f6f8fb;
            color: #687187;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .clients-table tbody td {
            padding: 15px 16px;
            border-color: #edf0f5;
            vertical-align: middle !important;
        }

        .clients-table tbody tr:hover {
            background: #fafbff;
        }

    .client-avatar {
        width: 48px;
        height: 48px;
        border: 3px solid #fff;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 3px 10px rgba(31,41,64,.16);
    }

    .client-name {
        color: #17213a;
        font-size: 15px;
        font-weight: 700;
    }

    .client-detail {
        margin-top: 4px;
        color: #7d8597;
        font-size: 12px;
    }

        .client-detail i {
            display: inline-block;
            width: 17px;
            margin-right: 6px;
            color: #9aa2b3;
            text-align: center;
        }

    .client-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 11px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

        .client-status:before {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            content: "";
        }

    .client-status--success {
        color: #138a59;
        background: #eafaf2;
    }

        .client-status--success:before {
            background: #16b978;
        }

    .client-status--danger {
        color: #d9363e;
        background: #fff0f1;
    }

        .client-status--danger:before {
            background: #ef4444;
        }

    .client-action {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        border-radius: 8px;
        font-weight: 700;
    }

    .client-action--edit {
        color: #5144eb;
        background: #f3f1ff;
    }

        .client-action--edit:hover {
            color: #fff;
            background: #5144eb;
        }

    .client-action--delete {
        color: #e53935;
        background: #fff1f1;
    }

        .client-action--delete:hover {
            color: #fff;
            background: #e53935;
        }

    .clients-empty {
        padding: 60px 20px;
        border: 1px dashed #d7ddea;
        border-radius: 14px;
        color: #7d8597;
        text-align: center;
    }

        .clients-empty i {
            display: block;
            margin-bottom: 12px;
            color: #b1b8c7;
            font-size: 34px;
        }

    @media (max-width: 767px) {
        .clients-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .clients-hero__actions {
            width: 100%;
            flex-wrap: wrap;
        }

        .clients-add {
            flex: 1;
            text-align: center;
        }

        .clients-body {
            padding: 18px;
        }
    }


/* ============================================================================
   Guest/EditGuestNote
   Guest note modal opened from the guest list
   ============================================================================ */
    .cf-notes-dialog {
        width: calc(100% - 32px);
        max-width: 760px;
        margin: 28px auto;
    }

    .cf-notes-modal {
        overflow: hidden;
        color: #211a35;
        background: #f8f7fb;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(32, 23, 65, .24);
    }

    .cf-notes-modal .modal-header {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 18px 20px;
        background: #fff;
        border-bottom: 1px solid #e9e5f1;
    }

    .cf-notes-header-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        color: #fff;
        background: linear-gradient(145deg, #6338e8, #4d8cff);
        border-radius: 12px;
        font-size: 17px;
    }

    .cf-notes-header-copy {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cf-notes-header-copy h4 {
        margin: 0;
        color: #211a35;
        font-size: 18px;
        font-weight: 800;
    }

    .cf-notes-header-copy p {
        overflow: hidden;
        margin: 3px 0 0;
        color: #716b7d;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cf-notes-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        padding: 0;
        color: #554d63;
        background: #f7f5fa;
        border: 1px solid #e9e5f1;
        border-radius: 11px;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .cf-notes-modal .modal-body {
        padding: 18px;
    }

    .cf-notes-panel {
        padding: 16px;
        background: #fff;
        border: 1px solid #e9e5f1;
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(35, 24, 70, .05);
    }

    .cf-notes-section-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 13px;
    }

    .cf-notes-section-heading h5 {
        margin: 0;
        color: #211a35;
        font-size: 14px;
        font-weight: 800;
    }

    .cf-notes-section-heading p {
        margin: 3px 0 0;
        color: #777080;
        font-size: 11px;
        line-height: 1.4;
    }

    .cf-notes-private-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 28px;
        padding: 5px 9px;
        color: #5832ca;
        background: #f1edff;
        border: 1px solid #dfd6ff;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .cf-notes-modal .form-group {
        margin: 0;
    }

    .cf-notes-modal textarea.form-control {
        width: 100%;
        min-height: 210px;
        padding: 13px 14px;
        color: #2c2540;
        background: #fbfafd;
        border: 1px solid #e2ddea;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.55;
        resize: vertical;
        box-shadow: none;
    }

    .cf-notes-modal textarea.form-control:focus {
        background: #fff;
        border-color: #7b58ed;
        box-shadow: 0 0 0 3px rgba(99, 56, 232, .11);
    }

    .cf-notes-field-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 9px;
        color: #817a8c;
        font-size: 10px;
    }

    .cf-notes-field-footer i {
        margin-right: 5px;
        color: #6338e8;
    }

    .cf-notes-modal .validation-summary-errors {
        margin-top: 12px;
        padding: 11px 13px;
        color: #a72a3d;
        background: #fff5f6;
        border: 1px solid #f2d8dc;
        border-radius: 10px;
        font-size: 12px;
    }

    .cf-notes-modal .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

    .cf-notes-modal .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding: 14px 18px 18px;
        background: #f8f7fb;
        border-top: 0;
    }

    .cf-notes-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 9px 13px;
        border-radius: 11px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
    }

    .cf-notes-action--primary {
        color: #fff;
        background: #6338e8;
        border: 1px solid #6338e8;
    }

    .cf-notes-action--secondary {
        color: #514863;
        background: #fff;
        border: 1px solid #ddd7e7;
    }

    @media (max-width: 640px) {
        .cf-notes-dialog {
            width: calc(100% - 18px);
            margin: 9px auto;
        }

        .cf-notes-modal .modal-body {
            padding: 12px;
        }

        .cf-notes-section-heading {
            flex-direction: column;
        }

        .cf-notes-modal .modal-footer {
            flex-direction: column-reverse;
        }

        .cf-notes-action {
            width: 100%;
        }
    }

/* ============================================================================
   Staff/AddExistingStaff
   Add-existing-staff picker, opened as a modal from Staff/Add
   ============================================================================ */
    .invite-user-modal {
        max-width: 590px;
    }

    .invite-user-modal__content {
        overflow: hidden;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
    }

    .invite-user-modal__header {
        position: relative;
        align-items: flex-start;
        padding: 25px 28px;
        overflow: hidden;
        border: 0;
        background: linear-gradient(125deg, #312e81 0%, #4f46e5 58%, #0891b2 100%);
        color: #fff;
    }

        .invite-user-modal__header::after {
            position: absolute;
            top: -82px;
            right: -55px;
            width: 190px;
            height: 190px;
            border: 30px solid rgba(255, 255, 255, .08);
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

    .invite-user-modal__heading {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        min-width: 0;
        padding-right: 30px;
    }

    .invite-user-modal__heading-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 13px;
        background: rgba(255, 255, 255, .13);
        font-size: 19px;
    }

    .invite-user-modal__title {
        margin: 1px 0 5px;
        color: #fff;
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .invite-user-modal__subtitle {
        margin: 0;
        color: rgba(255, 255, 255, .76);
        font-size: 12px;
        line-height: 1.5;
    }

    .invite-user-modal__close {
        position: relative;
        z-index: 2;
        margin: -5px -7px 0 0 !important;
        padding: 6px 9px !important;
        color: #fff;
        text-shadow: none;
        opacity: .75;
    }

        .invite-user-modal__close:hover,
        .invite-user-modal__close:focus {
            color: #fff;
            opacity: 1;
        }

    .invite-user-modal__body {
        padding: 27px 28px 24px;
    }

    .invite-user-modal__notice {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 23px;
        padding: 12px 14px;
        border: 1px solid #c7d7fe;
        border-radius: 10px;
        background: #f5f8ff;
        color: #344054;
        font-size: 12px;
        line-height: 1.5;
    }

        .invite-user-modal__notice i {
            flex: 0 0 auto;
            margin-top: 2px;
            color: #4f46e5;
        }

    .invite-user-modal__fields {
        display: grid;
        gap: 19px;
    }

    .invite-user-modal .form-group {
        margin: 0;
    }

    .invite-user-modal__label {
        display: block;
        margin-bottom: 8px;
        color: #344054;
        font-size: 12px;
        font-weight: 700;
    }

    .invite-user-modal .form-control {
        width: 100%;
        min-height: 46px;
        padding-right: 14px;
        padding-left: 14px;
        border: 1px solid #d7dce3;
        border-radius: 10px;
        background: #fff;
        color: #172033;
        transition: border-color .18s ease, box-shadow .18s ease;
    }

        .invite-user-modal .form-control:focus {
            border-color: #818cf8;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
        }

    .invite-user-modal__help {
        display: block;
        margin-top: 6px;
        color: #98a2b3;
        font-size: 11px;
    }

    .invite-user-modal__validation .validation-summary-valid {
        display: none;
    }

    .invite-user-modal__validation .validation-summary-errors {
        margin-top: 19px;
        padding: 11px 14px;
        border: 1px solid #fecaca;
        border-radius: 9px;
        background: #fef2f2;
        color: #b91c1c;
        font-size: 12px;
    }

    .invite-user-modal__validation ul {
        margin: 0;
        padding-left: 18px;
    }

    .invite-user-modal__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding: 18px 28px;
        border-top: 1px solid #e4e7ec;
        background: #f8fafc;
    }

        .invite-user-modal__footer .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-width: 125px;
            min-height: 42px;
            border-radius: 9px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
        }

            .invite-user-modal__footer .btn i {
                margin: 0 !important;
            }

    .invite-user-modal__send {
        border-color: #4f46e5;
        background: #4f46e5;
        color: #fff;
        box-shadow: 0 8px 18px rgba(79, 70, 229, .20);
    }

        .invite-user-modal__send:hover,
        .invite-user-modal__send:focus {
            border-color: #3730a3;
            background: #3730a3;
            color: #fff;
        }

    @media (max-width: 575px) {
        .invite-user-modal {
            margin: 10px;
        }

        .invite-user-modal__header,
        .invite-user-modal__body,
        .invite-user-modal__footer {
            padding-right: 20px;
            padding-left: 20px;
        }

        .invite-user-modal__footer {
            align-items: stretch;
            flex-direction: column-reverse;
        }

            .invite-user-modal__footer .btn {
                width: 100%;
            }
    }
        


/* ============================================================================
   Client/Deleted
   Deleted clients list
   ============================================================================ */
    .deleted-clients-page {
        max-width: 1450px;
        margin: 0 auto;
    }

    .deleted-clients-card {
        overflow: hidden;
        border: 1px solid #e4e8f0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 16px 42px rgba(26, 34, 56, .08);
    }

    .deleted-clients-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 27px 30px;
        color: #fff;
        background: linear-gradient(120deg, #3b2e98 0%, #5144eb 55%, #0c98b7 100%);
    }

    .deleted-clients-hero__tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .78);
    }

    .deleted-clients-hero h3 {
        margin: 0 0 4px;
        color: #fff;
        font-size: 26px;
        font-weight: 700;
    }

    .deleted-clients-hero p {
        margin: 0;
        color: rgba(255, 255, 255, .8);
    }

    .deleted-clients-count {
        min-width: 105px;
        padding: 11px 16px;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 12px;
        background: rgba(255, 255, 255, .12);
        text-align: center;
    }

        .deleted-clients-count strong {
            display: block;
            font-size: 22px;
            line-height: 1;
        }

        .deleted-clients-count span {
            display: block;
            margin-top: 5px;
            font-size: 11px;
            text-transform: uppercase;
        }

    .deleted-clients-body {
        padding: 26px 28px 30px;
    }

    .deleted-clients-table {
        margin: 0;
        border: 1px solid #e5e9f1;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 14px;
        overflow: hidden;
    }

        .deleted-clients-table thead th {
            padding: 14px 16px;
            border: 0;
            background: #f6f8fb;
            color: #687187;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .deleted-clients-table tbody td {
            padding: 15px 16px;
            border-color: #edf0f5;
            vertical-align: middle !important;
        }

        .deleted-clients-table tbody tr:hover {
            background: #fafbff;
        }

    .deleted-client-avatar {
        width: 48px;
        height: 48px;
        border: 3px solid #fff;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 3px 10px rgba(31, 41, 64, .16);
    }

    .deleted-client-name {
        color: #17213a;
        font-size: 15px;
        font-weight: 700;
    }

    .deleted-client-detail {
        margin-top: 4px;
        color: #7d8597;
        font-size: 12px;
    }

        .deleted-client-detail i {
            width: 17px;
            color: #9aa2b3;
        }

    .deleted-client-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 11px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }

        .deleted-client-status:before {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            content: "";
        }

    .deleted-client-status--danger {
        color: #d9363e;
        background: #fff0f1;
    }

        .deleted-client-status--danger:before {
            background: #ef4444;
        }

    .deleted-client-status--success {
        color: #138a59;
        background: #eafaf2;
    }

        .deleted-client-status--success:before {
            background: #16b978;
        }

    .deleted-client-restore {
        padding: 8px 14px;
        border: 1px solid #dcd8ff;
        border-radius: 9px;
        color: #5144eb;
        background: #f3f1ff;
        font-weight: 700;
    }

        .deleted-client-restore:hover,
        .deleted-client-restore:focus {
            color: #fff;
            background: #5144eb;
        }

    .deleted-clients-empty {
        padding: 60px 20px;
        border: 1px dashed #d7ddea;
        border-radius: 14px;
        color: #7d8597;
        text-align: center;
    }

        .deleted-clients-empty i {
            display: block;
            margin-bottom: 12px;
            color: #b1b8c7;
            font-size: 34px;
        }

    @media (max-width: 767px) {
        .deleted-clients-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .deleted-clients-count {
            text-align: left;
        }

        .deleted-clients-body {
            padding: 18px;
        }
    }


/* ============================================================================
   Shared/_NotificationBar
   Pending-approvals notification bar, rendered by _Header
   ============================================================================ */
    .notification-bar {
        position: relative;
    }

    .notification-bar > .navbar-nav-link {
        position: relative;
    }

    .notification-bar__badge {
        position: absolute;
        top: 5px;
        right: 3px;
        min-width: 18px;
        height: 18px;
        padding: 2px 5px;
        border: 2px solid #fff;
        font-size: 10px;
        line-height: 10px;
        text-align: center;
    }

    .notification-bar__menu {
        width: 340px;
        max-width: calc(100vw - 24px);
        padding-bottom: 0;
        overflow: hidden;
    }

    .notification-bar__message {
        display: flex;
        align-items: stretch;
        border-top: 1px solid #edf1f5;
    }

    .notification-bar__link {
        display: flex;
        align-items: center;
        flex: 1;
        gap: 12px;
        min-width: 0;
        padding: 14px 12px;
        color: #334155;
        text-decoration: none;
    }

    .notification-bar__link:hover,
    .notification-bar__link:focus {
        background: #f8fafc;
        color: #1e293b;
        text-decoration: none;
    }

    .notification-bar__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff7ed;
        color: #f97316;
    }

    .notification-bar__dismiss {
        flex: 0 0 44px;
        width: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid #edf1f5;
        border-radius: 0;
        color: #94a3b8;
    }

    .notification-bar__dismiss:hover,
    .notification-bar__dismiss:focus {
        background: #fef2f2;
        color: #dc2626;
        text-decoration: none;
    }

    .notification-bar__empty {
        padding: 18px 14px;
        border-top: 1px solid #edf1f5;
        color: #64748b;
        font-size: 13px;
        text-align: center;
    }


/* ============================================================================
   Event/_EmailSettings
   The two declarations this view adds on top of the shared cf-settings-list component
   in crowdflo-components.css. Everything else it needs is in there.
   ============================================================================ */
    #updateEmailSettingContainer .toggle-switch {
        flex: 0 0 44px;
    }

    #updateEmailSettingContainer .cf-settings-list__table .form-check-label {
        min-width: 0;
        line-height: 1.35;
    }