/* ==========================================================================
   My Account (PremiumMyAccount.vue → classic account_content / account_sidebar / account pages).
   The app side bar stays on the left like every other page; the account menu becomes a sticky
   card beside the content, and the pages get the new-look head, card and fields.
   ========================================================================== */

/* ---------- Layout: account menu card | page ---------- */
html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 0 12px 32px;
}

html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left > .left-sidebar-vue {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 88px;
}

html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left > .container-fluid {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
}

/* ---------- Account menu ---------- */
html.pie-premium .pp-shell.pp-myaccount .account-sidebar.left-sidebar {
    position: static;
    width: auto;
    height: auto;
    max-height: calc(100vh - 120px);
    padding: 8px;
    overflow: auto;
    border: 0;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    transform: none;
    transition: none;
    scrollbar-width: thin;
}

/* static/js/app.js writes padding-top inline on the menu (88px, or 127px under a banner);
   PremiumMyAccount.vue strips it, and until then the content is pulled back up */
html.pie-premium .pp-shell.pp-myaccount .account-sidebar[style*="padding-top: 88px"] > .left-sidebar-wrapper {
    margin-top: -80px;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar[style*="padding-top: 127px"] > .left-sidebar-wrapper {
    margin-top: -119px;
}

/* The app side bar already has Create */
html.pie-premium .pp-shell.pp-myaccount .account-sidebar > .create-btn {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar .left-sidebar-wrapper,
html.pie-premium .pp-shell.pp-myaccount .account-sidebar .custom-scroll {
    position: static;
    height: auto;
    padding: 0;
    overflow: visible;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar .section-wrapper {
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar .section-wrapper + .section-wrapper {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar .sidebar-title {
    padding: 10px 12px 6px;
    font-family: var(--pp-bold);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar li {
    margin: 1px 0;
    padding: 0;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar li a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 10px;
    font-family: var(--pp-sans);
    font-size: 13.5px;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--pp-ink-2);
    background: transparent;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar li a.ps-4 {
    padding-left: 24px !important;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar li a:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

/* Group labels inside a section (Subscriptions, Payments…): not links */
html.pie-premium .pp-shell.pp-myaccount .account-sidebar li > a.bold {
    min-height: 30px;
    padding-top: 8px;
    padding-bottom: 2px;
    font-family: var(--pp-bold);
    font-size: 12.5px;
    color: var(--pp-ink);
    background: transparent;
    cursor: default;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar li.router-link-exact-active > a,
html.pie-premium .pp-shell.pp-myaccount .account-sidebar li.router-link-active:not(:has(li)) > a {
    background: var(--pp-ink);
    color: #fff;
    font-family: var(--pp-bold);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

/* Padlock / badges on the right */
html.pie-premium .pp-shell.pp-myaccount .account-sidebar li a > .pull-right,
html.pie-premium .pp-shell.pp-myaccount .account-sidebar li a > .badge {
    margin-left: auto;
    float: none;
}

html.pie-premium .pp-shell.pp-myaccount .account-sidebar li a .badge {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
    font-size: 10px;
    letter-spacing: .04em;
}

/* ---------- Page head (sticky title or plain h3) ---------- */
html.pie-premium .pp-shell.pp-myaccount .account-sticky-title,
html.pie-premium .pp-shell.pp-myaccount .account-page-content > div > h3 {
    position: sticky;
    top: 68px;
    z-index: 7;
    margin: 0;
    padding: 18px 0 16px;
    border: 0;
    border-radius: 0;
    background: var(--pp-bg);
    box-shadow: none;
}

/* The first card's own top margin (mt-2 / mt-3, !important) stacked on the head's padding */
html.pie-premium .pp-shell.pp-myaccount .account-sticky-title + .bg-white-block {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell.pp-myaccount .account-sticky-title::before,
html.pie-premium .pp-shell.pp-myaccount .account-page-content > div > h3::before {
    content: 'My Account';
    display: block;
    margin-bottom: 6px;
    font-family: var(--pp-bold);
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .account-sticky-title .title-form,
html.pie-premium .pp-shell.pp-myaccount .account-page-content > div > h3 {
    font-family: var(--pp-bold);
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .account-sticky-title .title-form {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* ---------- Cards ---------- */
html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left > .container-fluid > .bg-white-block,
html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left > .container-fluid > * > .bg-white-block {
    padding: 22px 24px 10px;
    border: 0;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

/* Section titles inside a card (Change Login Email, Change Password…) */
html.pie-premium .pp-shell.pp-myaccount .bg-white-block > .account-title {
    margin: 4px 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--pp-bold);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

/* List cards (Users, Teams…): "Title [buttons]" head + an <hr>; one row, one rule */
html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 4px 0 6px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--pp-bold);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border + hr {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border > span {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    float: none !important;
}

html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border .btn {
    float: none !important;
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 999px;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

/* Tables (b-table: Teams…): quiet head, no stripes, row hover */
html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table {
    --bs-table-striped-bg: transparent;
    --bs-table-accent-bg: transparent;
    margin: 4px 0 0 !important;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table > thead > tr > th {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    font-family: var(--pp-bold);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table > tbody > tr > td {
    padding: 14px;
    border-top: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    color: var(--pp-ink-2);
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table > tbody > tr:hover > td {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table > :is(thead, tbody) > tr > :first-child {
    width: 56px;
    color: var(--pp-ink-3);
}

/* Row actions: icon buttons */
html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table td :is(.pie-icon-edit, .pie-icon-trash) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--pp-ink-3);
    font-size: 16px;
    transition: background .15s ease, color .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table td .pie-icon-edit:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table td .pie-icon-trash:hover {
    background: #fdecec;
    color: #b42318;
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block .table.b-table td .d-inline.pe-3 {
    padding-right: 4px !important;
}

/* Integrations: Stripe Connect card (Integrations.vue) */
html.pie-premium .pp-shell.pp-myaccount .stripe_block > h5 {
    margin: 4px 0 16px;
    padding: 0 0 14px !important; /* .col-lg-12 gutter */
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--pp-bold);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block > h5 + hr {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block > .col-lg-12 {
    padding: 0;
}

/* Connect with Stripe: the new-look accent instead of Stripe purple; the white Stripe logo stays */
html.pie-premium .pp-shell.pp-myaccount .stripe_block .stripe-connect {
    width: 196px;
    height: 44px;
    margin-bottom: 18px;
    padding: 15px 0 0 26px;
    border-radius: 10px;
    background: var(--pp-acc);
    box-shadow: 0 6px 16px -8px rgba(122, 26, 55, .6);
    transition: background .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block .stripe-connect span::after {
    top: 10px;
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block .stripe-connect:hover {
    background: #5a1128;
    color: #fff;
}

/* Connected account: status pill */
html.pie-premium .pp-shell.pp-myaccount .stripe_block .active-inactive {
    font-family: var(--pp-bold);
    font-size: 14px !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block .active-inactive .status {
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0 6px 1px 8px;
}

/* About text; Fees / Processing time / Important as label + muted note */
html.pie-premium .pp-shell.pp-myaccount .stripe_block > .fs-14 {
    font-size: 14px !important;
    line-height: 1.6;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block > .fs-14 > p:first-child {
    margin: 0 0 16px;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block > .fs-14 .bold {
    font-family: var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block > .fs-14 > :not(p:first-child) {
    font-size: 13.5px !important;
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block > .fs-14 > p:not(:first-child) {
    margin: 2px 0 14px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .stripe_block > .fs-14 a {
    color: var(--pp-acc) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* List-card head with two buttons (Users Marketing Mapping: "+ New Mapping" then "Sync All"):
   both sit together on the right, primary last */
html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border > .btn {
    order: 2;
}

html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border:has(> .sync-all-btn) {
    justify-content: flex-start;
}

html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border > .btn.sync-all-btn {
    order: 1;
    margin-left: auto !important;
}

html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border .btn.btn-outline-primary {
    gap: 6px;
    border: 1px solid var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-myaccount .user-element.bg-white-block > h4.with-border .btn.btn-outline-primary:hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

/* Marketing Program (MarketingIntegrations.vue): the grey bar repeats the card title */
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #integrations > .bg-gray {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials > h5.with-border {
    margin: 4px 0 16px !important;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--pp-bold);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials > h5.with-border + hr {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .fs-12.bold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pp-bold);
    font-size: 13px !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .delete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .delete-icon:not(.disabled):hover {
    background: #fdecec;
    color: #b42318;
}

/* Program Name (v-select) and Agency ID (input): the same label-inside tile */
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating .vs__dropdown-toggle,
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating > .form-control {
    height: 56px !important;
    min-height: 56px !important;
    padding: 24px 12px 6px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
    box-shadow: none !important;
    font-size: 14px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating:not(.disabled) .vs__dropdown-toggle:hover,
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating > .form-control:not(:disabled):hover {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating > .form-control:focus,
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating .v-select.vs--open .vs__dropdown-toggle {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating .vs__selected,
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating .vs__search {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating > .ffl-label {
    height: auto;
    padding: 9px 12px 0 !important;
    border: 0;
    font-family: var(--pp-bold);
    font-size: 11.5px !important;
    line-height: 1.2;
    color: var(--pp-ink-3) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Saved account: read-only. The classic .disabled fades the select to 0.4; keep it readable like
   the Agency ID beside it and drop the dropdown arrow */
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating.disabled {
    opacity: 1;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating.disabled .vs__actions {
    display: none;
}

/* Saved account: read-only, so no hover/focus box and plain text colour */
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating > .form-control:disabled,
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .form-floating.disabled .vs__selected {
    color: var(--pp-ink-2);
    opacity: 1;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #tlg_credentials .add-link {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--pp-bold);
    font-size: 13.5px;
    cursor: pointer;
}

/* Sabre (Sabre.vue, styled in template1.css through --sabre-brand* = the classic purple) */
html.pie-premium .pp-shell.pp-myaccount .sabre-vue {
    --sabre-brand: var(--pp-acc);
    --sabre-brand-soft: var(--pp-acc-soft);
    --sabre-brand-border: var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-page-header {
    border-bottom-color: var(--pp-line);
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-page-title {
    font-family: var(--pp-bold);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-page-subtitle {
    font-size: 13.5px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-section-header h5 {
    font-family: var(--pp-bold);
    font-size: 15px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-account-card {
    padding: 16px 18px 6px;
    border-color: var(--pp-line);
    border-radius: 12px;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-account-card:is(:hover, :focus-within) {
    border-color: var(--pp-line-2);
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-account-card.has-error {
    border-color: #dc3545;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-account-title {
    font-family: var(--pp-bold);
    font-size: 14px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    color: var(--pp-ink-3);
}

/* Credentials: the same label-inside tiles as the other account forms */
html.pie-premium .pp-shell.pp-myaccount .sabre-vue #sabre_credentials .form-floating > .form-control {
    height: 56px !important;
    min-height: 56px !important;
    padding: 24px 12px 6px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
    box-shadow: none !important;
    font-size: 14px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue #sabre_credentials .sabre-password-field > .form-control {
    padding-right: 44px !important;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue #sabre_credentials .form-floating > .form-control:hover {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue #sabre_credentials .form-floating > .form-control:focus {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue #sabre_credentials .form-floating > .form-control.is-invalid {
    border-color: #dc3545 !important;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue #sabre_credentials .form-floating > .ffl-label {
    height: auto;
    padding: 9px 12px 0 !important;
    border: 0;
    font-family: var(--pp-bold);
    font-size: 11.5px !important;
    line-height: 1.2;
    color: var(--pp-ink-3) !important;
    opacity: 1 !important;
    transform: none !important;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-password-toggle {
    color: var(--pp-ink-3);
}

/* "+ Add Account": outlined button, not the faded pink outline */
html.pie-premium .pp-shell.pp-myaccount .sabre-vue .btn.btn-primary-outline:not(:disabled) {
    height: 36px;
    padding: 0 16px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .btn.btn-primary-outline:not(:disabled):hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-myaccount .sabre-vue .sabre-form-footer {
    align-items: center;
    margin-top: 16px;
    border-top-color: var(--pp-line);
}

/* CKEditor toolbars (Content…): the dropdown arrows are flex items with z-index 100, so on
   scroll they painted over the sticky page head and the top bar. Each editor is its own layer. */
html.pie-premium .pp-shell.pp-myaccount .crm-panel .ck.ck-editor {
    z-index: 0;
}

/* Content → Important Notices (ImportantNotice.vue): accordion list of rich-text notices */
html.pie-premium .pp-shell.pp-myaccount .imp_notice_list > h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 4px 0 16px;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--pp-bold);
    font-size: 20px !important;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list > h4 > .fs-12 {
    margin: 0 !important;
    font-family: var(--pp-sans);
    font-size: 13px !important;
    letter-spacing: 0;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list > h4 > .btn {
    float: none !important;
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin-left: auto;
    padding: 0 16px !important;
    border-radius: 999px;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list > h4 + hr {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list > .accordion-item {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px !important;
    background: var(--pp-panel);
}

/* the classic .accordion-header adds 10px padding + 5px margin round the 56px row */
html.pie-premium .pp-shell.pp-myaccount .imp_notice_list > .accordion-item > .accordion-header {
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body .line-item {
    margin: 0;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .notice-lists {
    align-items: center;
    gap: 12px;
    padding-right: 8px;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .notice-lists > .accordion-button {
    min-width: 0;
    padding: 14px 16px;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--pp-bold);
    font-size: 14.5px;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .notice-lists > .text-nowrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12.5px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .notice-lists .pie-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px;
    color: var(--pp-ink-3);
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .notice-lists .pie-icon:first-of-type {
    margin-left: 8px !important;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .notice-lists .pie-icon-edit:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .notice-lists .pie-icon-trash:hover {
    background: #fdecec;
    color: #b42318;
}

/* Opened notice: the saved rich text in an inset panel, headings at card scale */
html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body {
    max-height: 420px;
    overflow: auto;
    padding: 16px 20px;
    border-top: 1px solid var(--pp-line);
    background: var(--pp-panel-2);
    font-size: 14px;
    line-height: 1.6;
    color: var(--pp-ink-2);
    scrollbar-width: thin;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body .form-group {
    margin: 0;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body :is(h1, h2) {
    margin: 16px 0 6px;
    font-family: var(--pp-bold);
    font-size: 18px;
    line-height: 1.3;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body :is(h3, h4, h5, h6) {
    margin: 14px 0 4px;
    font-family: var(--pp-bold);
    font-size: 15px;
    line-height: 1.35;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body p {
    margin: 0 0 10px;
}

html.pie-premium .pp-shell.pp-myaccount .imp_notice_list .accordion-body a {
    color: var(--pp-acc);
}

/* Card titles written as <h4 class="fs-5"> + <hr> (Client Itinerary, Content, Payment
   Collection…): the bold card title with one rule, buttons on the right */
html.pie-premium .pp-shell.pp-myaccount .bg-white-block > h4.fs-5,
html.pie-premium .pp-shell.pp-myaccount .bg-white-block > h4:not([class]):has(+ hr) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 4px 0 0 !important;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--pp-bold);
    font-size: 20px !important;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block > h4.fs-5 > .btn {
    float: none !important;
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin-left: auto;
    padding: 0 16px !important;
    border-radius: 999px;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

/* A "View Sample" link inside the title stays on the right, at link size */
html.pie-premium .pp-shell.pp-myaccount .bg-white-block > h4.fs-5 > a:not(.btn) {
    float: none !important;
    margin-left: auto;
    font-family: var(--pp-sans);
    font-size: 13px !important;
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-myaccount .bg-white-block > h4.fs-5 + hr,
html.pie-premium .pp-shell.pp-myaccount .bg-white-block > h4:not([class]) + hr {
    display: block;
    height: 0;
    margin: 0 0 16px !important;
    border: 0;
    opacity: 0;
}

/* Client Itinerary → Default Itinerary Language: one labelled select tile
   (the "Language" text beside it repeated the tile's own label) */
html.pie-premium .pp-shell.pp-myaccount .d-flex:has(> div > .client-itinerary-language-dropdown) > .me-1 {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount div:has(> .client-itinerary-language-dropdown) {
    width: 280px !important;
    max-width: 100%;
}

html.pie-premium .pp-shell.pp-myaccount .client-itinerary-language-dropdown .form-floating > select.form-control {
    height: 56px !important;
    min-height: 56px !important;
    padding: 24px 36px 6px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel-2) !important;
    background-position: right 14px center !important;
    box-shadow: none !important;
    font-size: 14px;
    color: var(--pp-ink);
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-myaccount .client-itinerary-language-dropdown .form-floating > select.form-control:hover {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell.pp-myaccount .client-itinerary-language-dropdown .form-floating > select.form-control:focus {
    border-color: var(--pp-acc-line) !important;
    background-color: var(--pp-panel) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell.pp-myaccount .client-itinerary-language-dropdown .form-floating > .ffl-label {
    height: auto;
    padding: 9px 12px 0 !important;
    border: 0;
    font-family: var(--pp-bold);
    font-size: 11.5px !important;
    line-height: 1.2;
    color: var(--pp-ink-3) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* DataTables lists (Payment History…): purple sorted column → accent, warm head and stripes */
html.pie-premium .pp-shell.pp-myaccount .crm_table table.dataTable thead th {
    border-bottom: 1px solid var(--pp-line) !important;
    font-family: var(--pp-bold);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table table.dataTable thead th:is(.sorting_asc, .sorting_desc) {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table table.dataTable tbody td {
    border-color: var(--pp-line) !important;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .crm_table table.dataTable tbody tr:nth-child(odd) > td {
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table table.dataTable tbody tr:nth-child(even) > td {
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table table.dataTable tbody tr:hover > td {
    background: var(--pp-hover) !important;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table table.dataTable tbody a {
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-myaccount .crm_table .dataTables_wrapper :is(.dataTables_length select, .dataTables_filter input) {
    height: 38px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background-color: var(--pp-panel);
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table .dataTables_wrapper :is(.dataTables_length select, .dataTables_filter input):focus {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table .dataTables_wrapper :is(.dataTables_length, .dataTables_filter) label {
    font-size: 13.5px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .crm_table .dataTables_wrapper .pagination .page-item.active .page-link {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell.pp-myaccount .crm_table .dataTables_wrapper .pagination .page-link {
    color: var(--pp-ink-2);
}

/* Client Itinerary (ItinerarySettings.vue): the title's p-3 indented it and padded the head */
html.pie-premium .pp-shell.pp-myaccount .account-sticky-title > .title-form.p-3 {
    padding: 0 !important;
}

/* PCC / template / booking-profile mapping pages (pcc-mapping-vue, scoped styles with purple vars) */
html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue {
    --pcc-brand: var(--pp-acc);
    --pcc-brand-soft: var(--pp-acc-soft);
    --pcc-brand-border: var(--pp-acc-line);
    --pcc-border: var(--pp-line);
    --pcc-muted: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-page-head h4 {
    font-family: var(--pp-bold);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-page-subtitle {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-page-head > .btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px !important;
    border-radius: 999px;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue > .user-element > hr {
    margin: 18px 0 !important;
    border-color: var(--pp-line);
    opacity: 1;
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-table-wrap {
    border-radius: 12px;
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-th {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-table td {
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-user-line:hover td {
    background: var(--pp-panel-2);
}

/* Booking profiles: the "Showing x of y" footer sits inside the table box with no padding */
html.pie-premium .pp-shell.pp-myaccount .pcc-mapping-vue .pcc-table-wrap > .pcc-table-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--pp-line);
    background: var(--pp-panel-2);
}

/* ---------- Fields: label-inside tiles (planner popup fields) ---------- */
html.pie-premium .pp-shell.pp-myaccount .account-form {
    margin: 0 -7px;
}

html.pie-premium .pp-shell.pp-myaccount .account-form > .form-group {
    margin: 0 0 14px;
    padding: 0 7px;
}

html.pie-premium .pp-shell.pp-myaccount .account-form .form-group > fieldset {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--pp-panel-2);
    transition: border-color .15s ease, background .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .account-form .form-group > fieldset:hover {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-myaccount .account-form .form-group > fieldset:focus-within {
    border-color: var(--pp-acc-line);
    background: var(--pp-panel);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .form-label {
    display: block;
    margin: 0 0 3px;
    font-family: var(--pp-bold);
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .form-text {
    min-height: 20px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--pp-ink);
    word-break: break-word;
    cursor: text;
}

html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .form-input {
    width: 100%;
    height: 22px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--pp-ink);
    box-shadow: none;
}

/* Change Login Email: the read-only email is a tile too; clicking it opens the change-email
   confirm, so it carries a "Change" pill */
html.pie-premium .pp-shell.pp-myaccount .account-form #account_login_email {
    position: relative;
    display: block;
    min-height: 56px;
    margin: 0 0 14px;
    padding: 8px 96px 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--pp-panel-2);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .account-form #account_login_email:hover {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-myaccount .account-form #account_login_email::after {
    content: "Change";
    position: absolute;
    visibility: visible; /* .form-group's clearfix ::after hides it */
    width: auto;
    height: auto;
    top: 50%;
    right: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: inset 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink);
    font: 13px/1 var(--pp-bold);
    transform: translateY(-50%);
}

html.pie-premium .pp-shell.pp-myaccount .account-form #account_login_email:hover::after {
    color: var(--pp-acc);
    box-shadow: inset 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-myaccount .account-form #account_login_email .form-text {
    cursor: pointer;
}

/* Same 7px gutter as the password tiles below (Bootstrap's column gives 12px) */
html.pie-premium .pp-shell.pp-myaccount .account-form > .col-md-12:has(> #account_login_email) {
    padding: 0 7px;
}

/* Change Password heading: mt-5 (48px) left a gap under the email tile */
html.pie-premium .pp-shell.pp-myaccount .change-login > .account-title.mt-5 {
    margin-top: 28px !important;
}

/* Select (vue-select) inside a tile */
/* !important: common.css boxes every vue-select (.v-select:not(.form-control) .vs__dropdown-toggle) */
html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .v-select .vs__dropdown-toggle {
    min-height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .v-select .vs__selected,
html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .v-select .vs__search {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .v-select .vs__actions {
    padding: 0 0 0 6px;
}

html.pie-premium .pp-shell.pp-myaccount .account-form fieldset .v-select .vs__dropdown-menu {
    border: 0;
    border-radius: 12px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

/* Radio rows (Commissions…) */
html.pie-premium .pp-shell.pp-myaccount .account-form .custome-radiobtn label {
    font-size: 14px;
    color: var(--pp-ink-2);
}

/* ---------- On/off switches (classic .checkbox-toggle; same pill as the dashboard's) ---------- */
html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input + label {
    min-height: 20px;
    line-height: 20px;
    padding-left: 44px;
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle.on-off-switch input + label {
    width: 34px;
    height: 20px;
    padding: 0;
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input + label::before {
    top: 0;
    width: 34px;
    height: 20px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-line-2);
    transition: background .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input + label::after,
html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input + label:hover::after,
html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input:disabled + label::after {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input:checked + label::before {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input:checked + label::after {
    left: 17px;
    background: #fff;
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input:focus-visible + label::before {
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle input:disabled + label {
    opacity: .5;
}

html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle.on-off-switch .left-off,
html.pie-premium .pp-shell.pp-myaccount .checkbox-toggle.on-off-switch .right-on {
    display: none;
}

/* ---------- Setting rows (Auto Logout, Notification Settings): text left, switch right ---------- */
/* !important: the generic card padding (22px 24px 10px) comes from a longer selector */
html.pie-premium .pp-shell.pp-myaccount .task-notification.bg-white-block {
    padding: 6px 24px !important;
}

html.pie-premium .pp-shell.pp-myaccount .task-notification.bg-white-block > h4.fs-5 {
    margin: 14px 0 2px;
    font-family: var(--pp-bold);
    font-size: 16px !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .task-notification.bg-white-block > h6 {
    margin: 0 0 4px;
    font-size: 12.5px !important;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .task-notification.bg-white-block > .row {
    align-items: center;
    margin: 0;
    padding: 14px 0;
}

html.pie-premium .pp-shell.pp-myaccount .task-notification.bg-white-block > .row + .row {
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell.pp-myaccount .task-notification.bg-white-block > .row > [class*="col-"] {
    margin-top: 0 !important;
    padding: 0;
}

html.pie-premium .pp-shell.pp-myaccount .task-notification .mark-done h4 {
    margin: 0 0 3px !important;
    font-family: var(--pp-bold);
    font-size: 14.5px !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .task-notification .mark-done p {
    font-size: 13px !important;
    line-height: 1.45;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .task-notification .checkbox-toggle {
    display: inline-block;
    vertical-align: middle;
}

/* ---------- Accent: the classic purple (#A20090) becomes the new-look accent ---------- */
/* Subscriptions (account_subscription.vue; some colours are inline styles) */
html.pie-premium .pp-shell.pp-myaccount [style*="#A20090"],
html.pie-premium .pp-shell.pp-myaccount .sub-summary-bar .fa-cube,
html.pie-premium .pp-shell.pp-myaccount :is(.sub-plan-currency, .sub-plan-amount, .sub-feature-check, .sub-show-more-link, .sub-plan-note-link) {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-myaccount .sub-summary-bar .badge.rounded-pill {
    background: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-myaccount .sub-plan-btn-secondary {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .sub-plan-btn-secondary:hover {
    background: #5a1128;
}

html.pie-premium .pp-shell.pp-myaccount .sub-plan-btn-outline {
    border-color: var(--pp-acc);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-myaccount .sub-plan-btn-outline:hover {
    background: rgba(122, 26, 55, .06);
}

html.pie-premium .pp-shell.pp-myaccount .sub-tier-qty-active {
    background: rgba(122, 26, 55, .08);
    color: var(--pp-acc);
}

/* Branding Subscriptions (DomainMaskingSubscription.vue). Vue renders its inline
   #A20090 as rgb(162, 0, 144), so the [style*] rule above misses it. */
html.pie-premium .pp-shell.pp-myaccount #myaccount_domain [style*="rgb(162, 0, 144)"],
html.pie-premium .pp-shell.pp-myaccount #myaccount_domain .sub-tier-price {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-myaccount #myaccount_domain .sub-plan-active {
    border-color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount #myaccount_domain .sub-plan-btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff !important;
    letter-spacing: 0;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

html.pie-premium .pp-shell.pp-myaccount #myaccount_domain .sub-plan-btn-primary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), #5a1128;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

html.pie-premium .pp-shell.pp-myaccount #myaccount_domain > p.fs-12 {
    font-size: 12.5px !important;
    color: var(--pp-ink-3) !important;
}

/* Users: seat cards (Users_new.vue, scoped slate/purple palette) */
html.pie-premium .pp-shell.pp-myaccount :is(.sub-grid-header, .sub-card__name) {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .sub-card {
    border-color: var(--pp-line);
    border-radius: 12px;
}

html.pie-premium .pp-shell.pp-myaccount .sub-card:hover {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-myaccount .sub-card__badge {
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .sub-card__row {
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .sub-card__section-label {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-myaccount .sub-card__sep {
    border-top-color: var(--pp-line);
}

html.pie-premium .pp-shell.pp-myaccount .sub-card__btn--brand {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .sub-card__btn--brand:hover {
    background: rgba(122, 26, 55, .14);
    color: #5a1128;
}

/* Users: Branding / Sabre seat boxes (classic .user-box list) styled like the seat cards above */
html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box {
    width: 320px;
    max-width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
    color: var(--pp-ink-2) !important;
    opacity: 1 !important; /* inline 0.85 on unpurchased boxes */
    transition: border-color .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box:hover {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box .bold {
    font-family: var(--pp-bold);
    font-size: 13.5px;
    color: var(--pp-ink);
}

/* Name + tag: the tag wraps under a long name without the ms-2 indent */
html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

html.pie-premium .pp-shell.pp-myaccount .subscription-products-list {
    margin-bottom: 0;
}

/* Branding and Sabre side by side (flex-wrap put each on its own row: the notes are long);
   they stack again when there is no room for two */
html.pie-premium .pp-shell.pp-myaccount .d-flex.flex-wrap:has(> div > .subscription-products-list) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px 24px !important;
    align-items: start;
}

/* Remove Seat / Convert buttons sat flush under the last box */
html.pie-premium .pp-shell.pp-myaccount .d-flex:has(.subscription-products-list) + .row {
    margin-top: 24px;
}

/* "Not Purchased" / "Auto": same small tag as the seat cards (bg-secondary is !important) */
html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box .badge {
    margin: 0 !important;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3);
    font-family: var(--pp-sans);
    font-weight: 500;
    font-size: 10px !important;
}

html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box .fs-12 {
    padding: 3px 0 !important;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box .text-muted {
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box a.color-blue {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
    font-size: 12px !important;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount .subscription-products-list .user-box a.color-blue:hover {
    background: rgba(122, 26, 55, .14);
    color: #5a1128 !important;
}

/* Section titles and their notes above the boxes */
html.pie-premium .pp-shell.pp-myaccount div:has(> .subscription-products-list) > .fw-bold {
    font-family: var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount div:has(> .subscription-products-list) > .fs-11 {
    margin-top: 2px;
    font-size: 12.5px !important;
    color: var(--pp-ink-3);
}

/* Users list: template1.css paints .color-red purple (!important); the Freeze link takes the accent */
html.pie-premium .pp-shell.pp-myaccount .vuegood-table-info a.color-red {
    color: var(--pp-acc) !important;
}

/* Users list: "+ Apply filters" is a .btn-primary styled as a purple text link; same outlined
   button as the Trips toolbar (the new-look .btn-primary fill is !important) */
html.pie-premium .pp-shell.pp-myaccount .vuegood-table-info .dropend .apply-btn {
    height: 36px;
    padding: 0 14px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 13px var(--pp-bold);
    text-transform: none;
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-myaccount .vuegood-table-info .dropend .apply-btn::after {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount .vuegood-table-info .dropend .apply-btn:hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

/* Users list: outlined buttons (Feature…) */
html.pie-premium .pp-shell.pp-myaccount .vuegood-table-info .btn.btn-primary-outline:not(:disabled) {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-myaccount .vuegood-table-info .btn.btn-primary-outline:not(:disabled):hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

/* AI Usage & Analytics (AiUsageAnalytics.vue, scoped slate/purple palette) */
html.pie-premium .pp-shell.pp-myaccount .ai-usage-card {
    border-color: var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-card__icon--total {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-month-nav__btn {
    border-color: var(--pp-line-2);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-progress__bar,
html.pie-premium .pp-shell.pp-myaccount .ai-usage-table__minibar {
    background: var(--pp-line);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-progress__fill:not(.ai-usage-progress__fill--warning):not(.ai-usage-progress__fill--exceeded) {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-table__minibar-fill {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-credits-buy,
html.pie-premium .pp-shell.pp-myaccount .ai-usage-table-wrapper {
    border-color: var(--pp-line);
    border-radius: 12px;
}

html.pie-premium .pp-shell.pp-myaccount :is(.ai-usage-tabs__btn--active, .ai-parse-tabs__btn--active) {
    border-bottom-color: var(--pp-acc);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-table__tokens {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-feedback-chip {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-feedback-chip--on {
    border-color: var(--pp-acc-line);
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-usage-table__user-avatar {
    background: var(--pp-acc);
}

/* AI Document Parsing (AiParsingSettings.vue) */
html.pie-premium .pp-shell.pp-myaccount .ai-parse-banner:not(.ai-parse-banner--soft) {
    border-color: var(--pp-acc-line);
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-banner--soft {
    border-color: var(--pp-line);
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-card {
    border-color: var(--pp-line);
    border-radius: 12px;
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-card__text {
    border-color: transparent;
    border-radius: 10px;
    background: var(--pp-panel-2);
    font-size: 14px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-card__text:hover {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-card__text:focus {
    border-color: var(--pp-acc-line);
    background: var(--pp-panel);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-ref {
    border-color: var(--pp-line-2);
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-ref__upload {
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-switch__track {
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-switch input:checked + .ai-parse-switch__track {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount .ai-parse-switch input:focus-visible + .ai-parse-switch__track {
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* BETA badges in the account menu (AiBetaBadge.vue solid) */
html.pie-premium .pp-shell.pp-myaccount .ai-beta--solid {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 12px;
        padding: 0 12px 24px;
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px 24px;
    }

    html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left > .left-sidebar-vue {
        position: static;
        padding-top: 16px;
    }

    html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left > .container-fluid {
        grid-column: 1;
        grid-row: 2;
    }

    /* The classic mobile script hides .left-sidebar off-canvas; keep the menu in the page */
    /* …and its closed-side-bar rules shrink the menu to 0 wide (the page loses .open here) */
    html.pie-premium .pp-shell.pp-myaccount .account-sidebar.left-sidebar {
        display: block !important;
        left: auto;
        width: 100% !important;
        max-height: 260px;
    }

    html.pie-premium .pp-shell.pp-myaccount .account-sidebar .left-sidebar-wrapper,
    html.pie-premium .pp-shell.pp-myaccount .account-sidebar .myaccount_sidebar {
        width: auto !important;
    }

    html.pie-premium .pp-shell.pp-myaccount .account-sticky-title,
    html.pie-premium .pp-shell.pp-myaccount .account-page-content > div > h3 {
        position: static;
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-myaccount .account-sticky-title .title-form,
    html.pie-premium .pp-shell.pp-myaccount .account-page-content > div > h3 {
        font-size: 24px;
    }

    html.pie-premium .pp-shell.pp-myaccount .account-page-content .bg-white-block {
        padding: 16px 14px 6px;
    }
}

/* Commission Settings: rule-form Close/Cancel and advisor-split Cancel were the classic faded
   pink outline; same outlined pill as the other My Account secondary buttons */
html.pie-premium .pp-shell.pp-myaccount .commission-settings .btn.btn-primary-outline:not(:disabled) {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell.pp-myaccount .commission-settings .btn.btn-primary-outline:not(:disabled):hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

/* Marketing Program → advisor profiles popup (#profileDetailsModal): All / Synced / Not Synced
   filter chips kept the classic purple (--theme-color #a20090) on the active chip and its count.
   Same chip as the rest of the new look: white pill, dark when selected, count in a soft capsule. */
html.pie-premium .pp-shell.pp-myaccount .marketing-vue #profileDetailsModal .details-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin-right: 6px;
    padding: 0 6px 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
    font-size: 12.5px;
    letter-spacing: 0;
    text-decoration: none;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #profileDetailsModal .details-chip strong {
    min-width: 20px;
    margin-left: 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font-family: var(--pp-bold);
    font-weight: normal;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #profileDetailsModal .details-chip:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #profileDetailsModal .details-chip.details-chip-active {
    background: var(--pp-ink);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
    color: #fff;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-myaccount .marketing-vue #profileDetailsModal .details-chip.details-chip-active strong {
    background: rgba(255, 255, 255, .2);
    color: inherit;
}

/* Pop-ups mounted in the account menu (Add form category, GeneralPopUp): sticky makes the menu a
   stacking context, which traps the modal under the body-level backdrop and the page. Unstick it
   while one is open; it is behind the backdrop then anyway. */
html.pie-premium .pp-shell.pp-myaccount .crm-panel > .control-panel-left > .left-sidebar-vue:has(.modal.show) {
    position: static;
}

/* ---------- Trip Status Workflow (TripWorkflow.vue): status colour tiles ---------- */
html.pie-premium .pp-shell.pp-myaccount #trip_workflow {
    padding-bottom: 24px !important;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow::after {
    content: "";
    display: table;
    clear: both;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow > #trip_nestable {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
    margin: 0;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow > #trip_nestable > .color-hex-div {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .color-hex-div > .border {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 14px;
    background: var(--pp-panel-2);
    box-shadow: inset 0 0 0 1px var(--pp-line);
    transition: box-shadow .15s ease, background-color .15s ease;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .color-hex-div:not(.disabled) > .border:hover,
html.pie-premium .pp-shell.pp-myaccount #trip_workflow .color-hex-div:not(.disabled) > .border:focus-within {
    background: var(--pp-panel);
    box-shadow: inset 0 0 0 1px var(--pp-line-2), 0 6px 16px -10px rgba(30, 40, 32, .25);
}

/* Status name: read-only input, shown as a label */
html.pie-premium .pp-shell.pp-myaccount #trip_workflow .color-hex-div input[readonly] {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pp-ink-2);
    font: 11.5px/1.3 var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    outline: none;
    pointer-events: none;
}

/* Colour field: round swatch on the left, the full hex value beside it */
html.pie-premium .pp-shell.pp-myaccount #trip_workflow .minicolors {
    display: block;
    width: 100%;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .minicolors-input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 44px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-panel);
    box-shadow: inset 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink);
    font: 13.5px/40px var(--pp-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    outline: none;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .minicolors-input:focus {
    box-shadow: inset 0 0 0 1.5px var(--pp-acc), 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .minicolors-theme-bootstrap .minicolors-swatch {
    top: 9px;
    left: 10px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .minicolors-theme-bootstrap .minicolors-swatch-color {
    min-width: 0;
    max-width: none;
    min-height: 0;
    max-height: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .minicolors-panel {
    z-index: 20;
    top: 46px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 32px -12px rgba(20, 24, 20, .35), 0 0 0 1px var(--pp-line);
}

/* NEW REQUEST is fixed: keep it readable, clearly locked */
html.pie-premium .pp-shell.pp-myaccount #trip_workflow .color-hex-div.disabled {
    opacity: .6;
}

html.pie-premium .pp-shell.pp-myaccount #trip_workflow .color-hex-div.disabled > .border {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pp-line);
}

/* Save: primary pill on the right */
html.pie-premium .pp-shell.pp-myaccount #trip_workflow > .btn.btn-primary {
    height: 40px;
    margin-top: 20px !important;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    color: #fff;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-myaccount #trip_workflow > #trip_nestable {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    html.pie-premium .pp-shell.pp-myaccount #trip_workflow > .btn.btn-primary {
        width: 100%;
    }
}

/* Travel Companions (Relations.vue, bootstrap-table): same list card as Users — 20px title with
   one rule, a warm-headed table with row lines only, pill search and accent pagination */
html.pie-premium .pp-shell.pp-myaccount #cp_relations > h4.with-border {
    margin: 4px 0 6px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--pp-bold);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations > h4.with-border + hr {
    display: none;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 14px;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-toolbar .search {
    float: none !important;
    width: 280px;
    max-width: 100%;
    margin: 0;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-toolbar .search .form-control {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b6b73'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='m20%2020-4-4'/%3E%3C/svg%3E") 14px center / 16px no-repeat;
    box-shadow: none;
    font: 13.5px var(--pp-sans);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-toolbar .search .form-control::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-toolbar .search .form-control:focus {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

/* Table: one rounded frame, no column rules */
html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-container {
    border: 0;
}

/* The classic markup nests a second bootstrap-table inside .crm_table; only the inner body is framed */
html.pie-premium .pp-shell.pp-myaccount #cp_relations .crm_table .fixed-table-body {
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    overflow: auto;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable {
    margin: 0;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > :is(thead, tbody) > tr > :is(th, td) {
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > thead > tr > th {
    padding: 0;
    background: var(--pp-panel-2);
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > thead > tr > th .th-inner {
    padding: 13px 30px 13px 16px;
    font-family: var(--pp-bold);
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pp-ink-3);
}

/* Sort arrows only on header hover, as in the other new-look lists */
html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > thead > tr > th .th-inner.sortable.both {
    background-image: none;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > thead > tr > th:hover .th-inner.sortable.both {
    background-image: url("../../img/bst-sort.png");
    opacity: .6;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > thead > tr > th .th-inner.sortable:is(.asc, .desc) {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > tbody > tr > td {
    height: 52px;
    padding: 0 16px;
    background: var(--pp-panel);
    font: 13.5px var(--pp-sans);
    color: var(--pp-ink-2);
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > tbody > tr > td:first-child {
    font-family: var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > tbody > tr:hover > td {
    background: var(--pp-hover);
}

/* Footer: muted count, pill page-size button, round page numbers with the accent on the open one */
html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 14px 0 8px;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination > :is(.pull-left, .pull-right) {
    float: none !important;
    margin: 0;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination .pagination-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12.5px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination :is(.pagination-info, .page-list) {
    margin: 0;
    font-size: 12.5px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination .page-list .btn.dropdown-toggle {
    height: 32px;
    margin-right: 6px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: none;
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination .page-list .dropdown-menu {
    min-width: 72px;
    padding: 6px;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination .page-list .dropdown-menu > li > a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination .page-list .dropdown-menu > li:is(.active, :hover) > a {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination ul.pagination {
    display: flex;
    gap: 6px;
    margin: 0;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination ul.pagination > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: 13px var(--pp-bold);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination ul.pagination > li:not(.active) > a:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination ul.pagination > li.active > a {
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-pagination ul.pagination > li:is(.page-pre, .page-next) > a {
    width: 32px;
    min-width: 32px;
    padding: 0;
    color: var(--pp-ink-3);
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-myaccount #cp_relations .fixed-table-toolbar .search {
        width: 100%;
    }

    html.pie-premium .pp-shell.pp-myaccount #cp_relations table#relationtable > :is(thead, tbody) > tr > :is(th, td) {
        white-space: nowrap;
    }
}