/* ==========================================================================
   PIE · Standard Premium — option A "Studio" (opt-in)
   Design: ti/public/proposal-designs/pie-standard-premium/app.html?opt=a#dashboard
   Styles the premium copies in src/components/premium/ (PremiumHeader, PremiumSidebar,
   PremiumDashboard, PremiumSales), which Dashboard.vue renders inside .pp-shell only when
   the user picks "Try the new look" (src/utils/premiumUi.js). Every rule is scoped to
   html.pie-premium .pp-shell, so the classic screens are never affected.
   Nothing here puts transform/filter/backdrop-filter on containers: those would break
   position:fixed children (modals, drawers, full-screen tables).
   ========================================================================== */

html.pie-premium {
    --pp-bg: #e9e7e2;
    --pp-panel: #fff;
    --pp-panel-2: #f6f4ef;
    --pp-hover: #f3f1ec;
    --pp-line: #e8e5de;
    --pp-line-2: #d9d5cc;
    --pp-ink: #17171a;
    --pp-ink-2: #3a3a40;
    --pp-ink-3: #6b6b73;
    --pp-muted: #9a9aa2;
    --pp-acc: #7a1a37;
    --pp-acc-soft: #f6eaee;
    --pp-acc-line: #e8cbd4;
    /* Classic parts inside the new look read the brand colour from here (template1.css :root) */
    --pie-primary-color: var(--pp-acc);
    --pp-ok: #16794c;
    --pp-r-card: 20px;
    --pp-shadow: 0 1px 2px rgba(17, 17, 26, .04), 0 10px 30px -14px rgba(17, 17, 26, .12);
    --pp-shadow-2: 0 30px 70px -24px rgba(17, 17, 26, .35);
    --pp-sans: "pp-interstate", "interstate-light", "Helvetica Neue", Arial, sans-serif;
    --pp-bold: "interstate-bold", "Helvetica Neue", Arial, sans-serif;
    --pp-side: 248px;
    --pp-side-mini: 76px;
}

/* Interstate as one family: light for regular text, the real bold face for bold text (instead of
   the browser thickening the light one). A new name, so the classic look is unchanged. */
@font-face {
    font-family: "pp-interstate";
    font-display: swap;
    src: url("../fonts/Interstate-Light.woff2") format("woff2"), url("../fonts/Interstate-Light.woff") format("woff");
    font-weight: 100 500;
    font-style: normal;
}

@font-face {
    font-family: "pp-interstate";
    font-display: swap;
    src: url("../fonts/Interstate-Bold.woff2") format("woff2"), url("../fonts/Interstate-Bold.woff") format("woff");
    font-weight: 600 900;
    font-style: normal;
}

html.pie-premium body:has(.pp-shell) {
    background: var(--pp-bg);
    font-family: var(--pp-sans) !important; /* template1.css: body Geologica !important */
}

/* One font in the new look: classic rules that set other fonts (Geologica, Proxima Nova, Gotham,
   Roboto, Arial…) give way to the inherited Interstate. Zero-specificity :where, so every
   new-look rule below still sets its own font (e.g. --pp-bold). Left alone: icon fonts, the
   traveller-facing Premium Showcase / booking designs, and text inside rich-text editors. */
html.pie-premium body:has(.pp-shell) :where(:not(i, svg, svg *, [class*="icon"], [class*="fa-"], .fa, .ti-premium-showcase, .ti-premium-showcase *, .bp-root, .bp-root *, [contenteditable] *, .note-editable *, .ck-content *, .ql-editor *)) {
    font-family: inherit;
}

/* common.css sets Geologica on every v-select box with a 3-class selector */
html.pie-premium body:has(.pp-shell) :where(.v-select:not(.ti-premium-showcase *, .bp-root *)) .vs__dropdown-toggle {
    font-family: inherit;
}

/* Bootstrap-select boxes (template1.css: 4-class Geologica rules in the trip banner and forms) */
html.pie-premium body:has(.pp-shell) .bootstrap-select :is(.dropdown-toggle, .filter-option, .filter-option-inner-inner):not(.ti-premium-showcase *, .bp-root *) {
    font-family: var(--pp-sans);
}

/* Planner "Mark as Booked" (template1.css: Geologica !important) */
html.pie-premium body:has(.pp-shell) .planner-booking-status-btn {
    font-family: var(--pp-sans) !important;
}

/* Classic text that was bold through a bold font name (not font-weight) keeps its weight */
html.pie-premium body:has(.pp-shell) :where([class*="bold"]:not([class*="icon"], .ti-premium-showcase *, .bp-root *)) {
    font-weight: 700;
}

html.pie-premium .pp-shell .pp-side,
html.pie-premium .pp-shell .pp-top,
html.pie-premium .pp-shell .pp-dash {
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
    -webkit-font-smoothing: antialiased;
}

html.pie-premium .pp-shell .pp-ic {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--pp-i) center / contain no-repeat;
    mask: var(--pp-i) center / contain no-repeat;
}

/* ---------- Geometry: full-height side bar, header beside it (desktop only) ----------
   Below 916px the side bar's own script closes it and the classic mobile layout applies. */
@media (min-width: 916px) {
    html.pie-premium .pp-shell .left-sidebar.pp-side {
        left: 0;
        top: 0;
        height: 100vh;
        width: var(--pp-side-mini);
        padding: 14px 10px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--pp-bg);
        transition: width .2s ease;
    }

    html.pie-premium .pp-shell .control-panel-left.open .left-sidebar.pp-side {
        width: var(--pp-side);
        padding: 14px 12px 12px;
        align-items: stretch;
    }

    html.pie-premium .pp-shell .header-wrapper {
        left: var(--pp-side-mini);
        right: 0;
        width: auto;
    }

    html.pie-premium .pp-shell:has(.control-panel-left.open) .header-wrapper {
        left: var(--pp-side);
    }

    html.pie-premium .pp-shell .control-panel-left .page-content {
        padding-left: var(--pp-side-mini);
    }

    html.pie-premium .pp-shell .control-panel-left.open .page-content {
        padding-left: var(--pp-side);
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell .pp-brand,
    html.pie-premium .pp-shell .pp-me {
        display: none !important;
    }
}

/* ---------- Side bar (PremiumSidebar.vue) ---------- */
html.pie-premium .pp-shell .pp-side > * {
    flex-shrink: 0;
}

html.pie-premium .pp-shell .pp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 10px;
    text-decoration: none;
}

html.pie-premium .pp-shell .pp-brand .pp-mk {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--pp-acc);
    color: #fff;
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-brand .pp-w {
    font: 18px var(--pp-bold);
    color: var(--pp-ink);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell .pp-brand .pp-p {
    font: 10px var(--pp-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pp-acc);
    margin-left: -4px;
}

/* Open/close button: top-right when open, under the logo when closed */
html.pie-premium .pp-shell .pp-side .toggle-sidebar {
    position: absolute;
    top: 26px;
    right: 10px;
    bottom: auto;
    left: auto;
    width: auto;
    z-index: 2;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .toggle-sidebar {
    top: 74px;
    right: auto;
    left: 24px;
}

html.pie-premium .pp-shell .pp-side .toggle-sidebar a {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--pp-ink-3);
    cursor: pointer;
}

html.pie-premium .pp-shell .pp-side .toggle-sidebar a:hover {
    background: var(--pp-hover);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-side .toggle-sidebar a i {
    padding: 0;
    font-size: 0;
    color: inherit;
}

html.pie-premium .pp-shell .pp-side .toggle-sidebar a i::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--pp-i-left) center / contain no-repeat;
    mask: var(--pp-i-left) center / contain no-repeat;
}

html.pie-premium .pp-shell .pp-side .toggle-sidebar a i.fa-angle-double-right::before {
    -webkit-mask-image: var(--pp-i-right);
    mask-image: var(--pp-i-right);
}

/* Create + Submit sale */
html.pie-premium .pp-shell .pp-side .create-btn,
html.pie-premium .pp-shell .control-panel-left.open .pp-side .create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    margin: 12px 0 4px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--pp-ink);
    color: var(--pp-bg);
    font: 14px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell .pp-side .create-btn:hover {
    opacity: .9;
    background: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-side .create-btn::after {
    content: none;
}

html.pie-premium .pp-shell .pp-side .create-btn .pp-ic {
    width: 18px;
    height: 18px;
}

html.pie-premium .pp-shell .control-panel-left.open .pp-side .create-btn span {
    margin: 0;
    font: inherit;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .create-btn {
    width: 46px;
    margin: 44px 0 8px;
}

html.pie-premium .pp-shell .pp-side .submit-sale-btn {
    margin: 6px 4px 10px;
    text-align: center;
}

html.pie-premium .pp-shell .pp-side .submit-sale-btn a,
html.pie-premium .pp-shell .pp-side .submit-sale-btn a:hover {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pp-ink-3);
    font-size: 12.5px;
}

html.pie-premium .pp-shell .pp-side .submit-sale-btn a:hover {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .submit-sale-btn {
    display: none;
}

/* Menu */
html.pie-premium .pp-shell .pp-side .left-sidebar-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: 100%;
    padding-bottom: 0;
}

html.pie-premium .pp-shell .pp-side .left-sidebar-wrapper .custom-scroll {
    height: 100%;
    padding: 0;
    scrollbar-width: thin;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul {
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li:not(.sub-menu) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1px 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pp-ink-2);
    font: 14px/1.3 var(--pp-sans);
    white-space: nowrap;
}

/* Top-level rows: a clear 4px between them so the dark active row and hover fill never touch */
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard > ul > li:not(.sub-menu) {
    margin: 4px 0;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li:not(.sub-menu) > .pp-ic {
    margin: 0;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li:not(.sub-menu):hover,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard > ul > li:first-child:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li .pp-lbl {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active page: lifts as a white card, icon in the accent */
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.active:not(.sub-menu),
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.active:not(.sub-menu):hover,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.bg-black {
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.active > .pp-ic:not(.sub-angle),
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.bg-black > .pp-ic:not(.sub-angle) {
    color: var(--pp-acc);
}

/* Chevrons: point right when closed, down when the jQuery toggle adds rotate-270 */
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard .sub-angle {
    width: 14px;
    height: 14px;
    margin: 0 0 0 auto;
    padding: 0;
    float: none;
    opacity: .5;
    line-height: normal;
    transform: rotate(-90deg);
    transition: transform .15s;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.rotate-270 .sub-angle,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard .rotate-270 > .sub-angle {
    transform: none;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.toggle_left_dropdown.rotate-270 i:not(.sub-angle) {
    transform: none;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li .info-icon,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li .lock-icon {
    float: none;
    margin-left: auto;
    padding: 0;
    line-height: 1;
    font-size: 13px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li .lock-icon + .info-icon {
    margin-left: 4px;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li .booking-notification-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-acc);
    color: #fff;
    font: 11px/20px var(--pp-bold);
    text-align: center;
}

/* Sub-menus: indented list with a hairline, the open page in the accent */
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu {
    margin: 2px 0 8px 22px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid var(--pp-line-2);
    background: transparent;
    list-style: none;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu li:not(.sub-menu),
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu .submenu-title,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu .submenu-title-sales {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px !important;
    border-radius: 8px;
    background: none !important;
    box-shadow: none !important;
    color: var(--pp-ink-3) !important;
    font: 13px/1.35 var(--pp-sans);
    white-space: normal;
    cursor: pointer;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu .submenu-title,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu .submenu-title-sales {
    margin-top: 6px;
    font: 10.5px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu li:not(.sub-menu):hover {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu li.bg-dark-gray,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu li.active {
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu ul.sub-menu-block li,
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu ul.sub-menu-block-sales li {
    padding-left: 18px !important;
}

/* Help center group */
html.pie-premium .pp-shell .pp-side .help-centre-sidebar {
    margin-top: 6px;
}

html.pie-premium .pp-shell .pp-side .help-centre-sidebar .pp-grp {
    margin: 16px 12px 6px;
    padding: 0;
    background: transparent;
    color: var(--pp-muted);
    font: 11px var(--pp-bold) !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .pp-side .help-centre-sidebar li.ps-3 {
    padding: 0 !important;
}

html.pie-premium .pp-shell .pp-side .help-centre-sidebar .tutorial_link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    color: var(--pp-ink-2);
    font-size: 14px;
    line-height: 1.3;
}

html.pie-premium .pp-shell .pp-side .help-centre-sidebar .tutorial_link .pp-ic {
    color: var(--pp-ink-3);
}

/* Signed-in agency at the foot of the side bar */
html.pie-premium .pp-shell .pp-me {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 4px;
}

html.pie-premium .pp-shell .pp-me b {
    display: block;
    font: 13px var(--pp-bold);
    color: var(--pp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .pp-me small {
    display: block;
    font-size: 12px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-me > div {
    min-width: 0;
}

html.pie-premium .pp-shell .pp-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--pp-acc);
    color: #fff;
    font: 12px var(--pp-bold);
}

/* Closed side bar: an icon rail */
html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-brand {
    padding: 0;
    justify-content: center;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-brand .pp-w,
html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-brand .pp-p,
html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .create-btn span,
html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .pp-lbl,
html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .sub-angle,
html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .help-centre-sidebar,
html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-me > div {
    display: none;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .dropdown_pie_dashboard ul li:not(.sub-menu) {
    justify-content: center;
    width: 46px;
    padding: 10px 0;
    margin-left: auto;
    margin-right: auto;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-side .dropdown_pie_dashboard ul li .booking-notification-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-me {
    padding: 12px 0 4px;
}

/* ---------- Header (PremiumHeader.vue) ---------- */
html.pie-premium .pp-shell .header.pp-top {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 68px;
    padding: 0 32px;
    background: var(--pp-bg);
    box-shadow: none;
}

html.pie-premium .pp-shell .pp-kbd {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 520px;
    min-width: 150px;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--pp-panel);
    color: var(--pp-muted);
    font: 14px var(--pp-sans);
    text-align: left;
    box-shadow: var(--pp-shadow);
    cursor: pointer;
}

html.pie-premium .pp-shell .pp-kbd::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(120deg, var(--pp-acc), #ff5e9c 45%, #7b61ff);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}

html.pie-premium .pp-shell .pp-kbd .pp-ic {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-kbd > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .pp-kbd kbd {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11px var(--pp-sans);
    box-shadow: none;
}

html.pie-premium .pp-shell .pp-ask {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-ibtn {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-ibtn:hover {
    background: var(--pp-panel);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-ibtn.pp-linked {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-ibtn em {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--pp-acc);
    color: #fff;
    font: 10px/16px var(--pp-bold);
    font-style: normal;
    text-align: center;
}

html.pie-premium .pp-shell .pp-top .pp-sp {
    flex: 1;
}

html.pie-premium .pp-shell .pp-top .pp-vr {
    width: 1px;
    height: 28px;
    margin: 0 6px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .head.pp-ibtn {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-org {
    display: flex;
    align-items: center;
    gap: 10px;
}

html.pie-premium .pp-shell .pp-org-name {
    text-align: right;
}

html.pie-premium .pp-shell .pp-org-name b {
    display: block;
    font: 13px var(--pp-bold);
    color: var(--pp-ink);
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-org-name small {
    display: block;
    font-size: 12px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-org .user-menu .dropdown-toggle {
    padding: 0;
    border: 0;
    background: none;
}

html.pie-premium .pp-shell .pp-org .user-menu .dropdown-toggle img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

html.pie-premium .pp-shell .pp-org .user-dropdown {
    padding: 6px;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item {
    border-radius: 8px;
}

@media (max-width: 1100px) {
    html.pie-premium .pp-shell .pp-org-name {
        display: none;
    }
}

@media (max-width: 760px) {
    html.pie-premium .pp-shell .header.pp-top {
        padding: 0 12px;
    }

    html.pie-premium .pp-shell .pp-kbd > span,
    html.pie-premium .pp-shell .pp-kbd kbd,
    html.pie-premium .pp-shell .pp-ask span {
        display: none;
    }

    html.pie-premium .pp-shell .pp-kbd {
        flex: none;
        min-width: 0;
        width: 42px;
        justify-content: center;
    }
}

/* ---------- Dashboard (PremiumDashboard.vue): a 12-column bento ---------- */
html.pie-premium .pp-shell .pp-dash .pp-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 0 32px 32px;
}

html.pie-premium .pp-shell .pp-dash .pp-bento > * {
    min-width: 0;
    margin: 0;
}

html.pie-premium .pp-shell .pp-dash .pp-c12 { grid-column: span 12; }
html.pie-premium .pp-shell .pp-dash .pp-c8 { grid-column: span 8; }
html.pie-premium .pp-shell .pp-dash .pp-c7 { grid-column: span 7; }
html.pie-premium .pp-shell .pp-dash .pp-c5 { grid-column: span 5; }
html.pie-premium .pp-shell .pp-dash .pp-c4 { grid-column: span 4; }

@media (max-width: 1199px) {
    html.pie-premium .pp-shell .pp-dash .pp-c8,
    html.pie-premium .pp-shell .pp-dash .pp-c7,
    html.pie-premium .pp-shell .pp-dash .pp-c5,
    html.pie-premium .pp-shell .pp-dash .pp-c4 {
        grid-column: span 12;
    }
}

@media (max-width: 760px) {
    html.pie-premium .pp-shell .pp-dash .pp-bento {
        padding: 0 16px 24px;
        gap: 14px;
    }
}

/* Page head */
html.pie-premium .pp-shell .pp-dash .pp-ph {
    display: flex;
    align-items: center;
    gap: 16px 24px;
    /* The shell already leaves 20px under the top bar: 14px more makes the design's 34px */
    padding: 14px 0 4px;
}

html.pie-premium .pp-shell .pp-dash .pp-av-lg {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

html.pie-premium .pp-shell .pp-dash .pp-eyebrow {
    font: 11.5px var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-dash .pp-ph h1 {
    margin: 6px 0 4px;
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-ph p {
    margin: 0;
    font-size: 14px;
    color: var(--pp-ink-3);
}

/* KPI cards */
html.pie-premium .pp-shell .pp-dash .pp-kcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

html.pie-premium .pp-shell .pp-dash .pp-kcard {
    position: relative;
    padding: 20px 22px 18px;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
}

html.pie-premium .pp-shell .pp-dash .pp-kcard small {
    display: block;
    font-size: 13px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .pp-kcard b {
    display: block;
    margin: 8px 0 4px;
    font: 30px/1.05 var(--pp-bold);
    letter-spacing: -.025em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-kcard > span {
    font-size: 12.5px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .pp-kcard .pp-kx {
    position: absolute;
    top: 12px;
    right: 12px;
}

html.pie-premium .pp-shell .pp-dash .pp-ibtn.pp-sm {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

html.pie-premium .pp-shell .pp-dash .pp-ibtn.pp-sm .pp-ic {
    width: 16px;
    height: 16px;
}

html.pie-premium .pp-shell .pp-dash .pp-ibtn.pp-sm:hover {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .pp-dash .pp-prog {
    height: 8px;
    margin-top: 26px;
    border-radius: 4px;
    background: var(--pp-panel-2);
    overflow: hidden;
}

html.pie-premium .pp-shell .pp-dash .pp-prog i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-dash .pp-pl {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .pp-lnk {
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
}

/* Panels */
html.pie-premium .pp-shell .pp-dash .pp-panel {
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell .pp-dash .pp-panel > header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 18px 22px 0;
}

html.pie-premium .pp-shell .pp-dash .pp-panel > header h2 {
    margin: 0;
    font: 17px var(--pp-bold);
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-panel > header .pp-go {
    margin-left: auto;
    font-size: 13px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .pp-panel > header .pp-go:hover {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-dash .pp-pb {
    padding: 16px 22px 20px;
}

/* Trips / Profiles count bars */
html.pie-premium .pp-shell .pp-dash .pp-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}

html.pie-premium .pp-shell .pp-dash .pp-status > b {
    font: 14px var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-seg,
html.pie-premium .pp-shell .pp-dash .pills,
html.pie-premium .pp-shell .pp-dash .tasks-block .tasks-filter {
    float: none;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border-radius: 10px;
    background: var(--pp-panel-2);
    list-style: none;
}

html.pie-premium .pp-shell .pp-dash .pp-seg li,
html.pie-premium .pp-shell .pp-dash .pills li,
html.pie-premium .pp-shell .pp-dash .pills.small-pills li,
html.pie-premium .pp-shell .pp-dash .tasks-block .tasks-filter li {
    margin: 0;
    padding: 6px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 13px/18px var(--pp-sans);
    opacity: 1;
}

html.pie-premium .pp-shell .pp-dash .pp-seg li.disabled {
    cursor: default;
}

html.pie-premium .pp-shell .pp-dash .tasks-block .tasks-filter li:hover {
    background: transparent;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-seg li.active_black,
html.pie-premium .pp-shell .pp-dash .pills li.active_black,
html.pie-premium .pp-shell .pp-dash .tasks-block .tasks-filter li.active_black,
html.pie-premium .pp-shell .pp-dash .tasks-block .tasks-filter li.active_black:hover {
    background: var(--pp-panel);
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

html.pie-premium .pp-shell .pp-dash .pp-statbars {
    display: grid;
    gap: 2px;
}

html.pie-premium .pp-shell .pp-dash .pp-statbars a {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 6px 8px;
    border-radius: 10px;
    text-decoration: none;
}

html.pie-premium .pp-shell .pp-dash .pp-statbars a:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .pp-dash .pp-statbars .pp-ic {
    width: 16px;
    height: 16px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .pp-statbars span {
    font-size: 13.5px;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell .pp-dash .pp-statbars b {
    font: 14px var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-statbars em {
    grid-column: 2 / 4;
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--pp-panel-2);
    overflow: hidden;
}

html.pie-premium .pp-shell .pp-dash .pp-statbars em i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--pp-acc);
}

/* Tasks + reminder sections: same panel, toolbar and table look as the design */
html.pie-premium .pp-shell .pp-dash .checklist-listing-by-task .tasks-block,
html.pie-premium .pp-shell .pp-dash .reminders-section.pp-panel {
    margin: 0;
    padding: 18px 22px 20px;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell .pp-dash .toggle-full-screen {
    border-radius: 0 !important;
}

html.pie-premium .pp-shell .pp-dash .reminders-section .section-title,
html.pie-premium .pp-shell .pp-dash .tasks-block .section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 16px;
}

html.pie-premium .pp-shell .pp-dash .reminders-section .section-title .heading,
html.pie-premium .pp-shell .pp-dash .tasks-block .section-title {
    margin: 0;
    font: 17px var(--pp-bold);
    letter-spacing: -.01em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .reminder-link,
html.pie-premium .pp-shell .pp-dash .reminders-section .reminders-links a {
    margin: 0;
    color: var(--pp-acc);
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-dash .reminders-section .reminders-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 14px;
}

html.pie-premium .pp-shell .pp-dash .full-screen,
html.pie-premium .pp-shell .pp-dash .full-screen-icon {
    float: none;
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--pp-muted);
    font-size: 16px;
}

html.pie-premium .pp-shell .pp-dash .full-screen:hover,
html.pie-premium .pp-shell .pp-dash .full-screen-icon:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-dash .tasks-block .section-head .tasks-filter {
    margin-left: auto;
}

html.pie-premium .pp-shell .pp-dash .view-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

html.pie-premium .pp-shell .pp-dash .view-search .view-data {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}

html.pie-premium .pp-shell .pp-dash .view-search .search-box {
    flex: 1;
    min-width: 220px;
    margin: 0;
}


html.pie-premium .pp-shell .pp-dash .form-floating > .form-control,
html.pie-premium .pp-shell .pp-dash .form-floating .vdp-datepicker input {
    border-color: transparent;
    border-radius: 10px;
    background-color: var(--pp-panel-2);
}

html.pie-premium .pp-shell .pp-dash .reminders-section .reminder-category {
    display: flex;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 4px;
    border-radius: 12px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .pp-dash .reminders-section .reminder-category li {
    margin: 0 !important;
    padding: 7px 13px;
    border-radius: 9px;
    background: transparent;
    color: var(--pp-ink-3);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .pp-dash .reminders-section .reminder-category li.active {
    background: var(--pp-ink);
    color: var(--pp-bg);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .pp-dash .reminders-section .table-subtitle {
    margin: 0;
    font: 14px var(--pp-bold);
    color: var(--pp-ink);
}

/* Tables (DataTables markup) */
html.pie-premium .pp-shell .pp-dash .crm_table {
    margin-bottom: 14px;
    padding: 0;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .pp-dash .crm_table table thead th {
    padding: 13px 10px;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font: 12px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-dash .crm_table table tbody td {
    height: 56px;
    padding: 0 10px;
    border-top: 0;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-2);
    font-size: 13.5px;
    vertical-align: middle;
}

html.pie-premium .pp-shell .pp-dash .crm_table table tbody tr:last-child td {
    border-bottom: 0;
}

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

html.pie-premium .pp-shell .pp-dash .dataTables_info {
    padding: 12px 16px;
    color: var(--pp-muted);
    font-size: 12.5px;
}

html.pie-premium .pp-shell .pp-dash .dataTables_paginate .paginate_button {
    min-width: 30px;
    height: 30px;
    border: 0 !important;
    border-radius: 8px;
    background: none !important;
    color: var(--pp-ink-3) !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .pp-dash .dataTables_paginate .paginate_button.current {
    background: var(--pp-ink) !important;
    color: var(--pp-bg) !important;
}

/* Sales panel (PremiumSales.vue) */
html.pie-premium .pp-shell .pp-dash .pp-sales {
    height: 100%;
    margin: 0;
    padding-bottom: 6px;
}

html.pie-premium .pp-shell .pp-dash .pp-sales > .pp-fields {
    margin: 16px 22px 0;
}

html.pie-premium .pp-shell .pp-dash .pp-sales > .pp-fields > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
}

html.pie-premium .pp-shell .pp-dash .pp-sales .sales-report {
    margin: 0;
    padding: 0 22px;
}

html.pie-premium .pp-shell .pp-dash .pp-sales .sales-section {
    margin: 0;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell .pp-dash .pp-sales .sales-section .section-title {
    min-height: 0;
    margin: 0 0 6px;
    font: 12.5px var(--pp-bold);
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .pp-sales .sales-section .sales-container {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .pp-dash .pp-sales .expected-profit-amt {
    font: 26px/1.1 var(--pp-bold);
    letter-spacing: -.02em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-sales .partner-commission,
html.pie-premium .pp-shell .pp-dash .pp-sales .profit-advisor {
    font-size: 12px;
    color: var(--pp-muted);
}

/* Icons: the design's own SVG symbols (app.html), drawn as masks so they take the text colour */
html.pie-premium .pp-shell {
    --pp-i-grid: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='7'%20rx='1.5'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='7'%20rx='1.5'/%3E%3Crect%20x='3'%20y='14'%20width='7'%20height='7'%20rx='1.5'/%3E%3Crect%20x='14'%20y='14'%20width='7'%20height='7'%20rx='1.5'/%3E%3C/svg%3E");
    --pp-i-user: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4%2021c1-4%204.5-6%208-6s7%202%208%206'/%3E%3C/svg%3E");
    --pp-i-globe: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18M12%203a14%2014%200%200%201%200%2018M12%203a14%2014%200%200%200%200%2018'/%3E%3C/svg%3E");
    --pp-i-cal: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%2010h18M8%203v4M16%203v4'/%3E%3C/svg%3E");
    --pp-i-tag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012V4h8l10%2010-8%208zM7.5%207.5h.01'/%3E%3C/svg%3E");
    --pp-i-cart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%204h2l2.4%2011h10.2L20%207H6.2M9%2020h.01M17%2020h.01'/%3E%3C/svg%3E");
    --pp-i-plane: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.5%2013.5%203%2011l1.5-1.5%207%201%204-4.5c1-1%202.5-1.5%203.5-.5s.5%202.5-.5%203.5l-4.5%204%201%207L13.5%2021%2011%2013.5'/%3E%3C/svg%3E");
    --pp-i-card: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='M3%2010h18M7%2015h4'/%3E%3C/svg%3E");
    --pp-i-book: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%205c3-1.5%206-1.5%209%200v15c-3-1.5-6-1.5-9%200zM21%205c-3-1.5-6-1.5-9%200v15c3-1.5%206-1.5%209%200z'/%3E%3C/svg%3E");
    --pp-i-bar: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'/%3E%3C/svg%3E");
    --pp-i-percent: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9%2015l6-6M9%209h.01M15%2015h.01'/%3E%3C/svg%3E");
    --pp-i-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='16'%20rx='3'/%3E%3Cpath%20d='m8%2012%203%203%205-6'/%3E%3C/svg%3E");
    --pp-i-doc: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h8l4%204v14H6zM14%203v4h4M9%2012h6M9%2016h6'/%3E%3C/svg%3E");
    --pp-i-bolt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%203%205%2014h6l-1%207%208-11h-6z'/%3E%3C/svg%3E");
    --pp-i-plus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14M5%2012h14'/%3E%3C/svg%3E");
    --pp-i-spark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8zM19%2016l.8%202.2L22%2019l-2.2.8L19%2022l-.8-2.2L16%2019l2.2-.8z'/%3E%3C/svg%3E");
    --pp-i-info: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2011v5M12%208h.01'/%3E%3C/svg%3E");
    --pp-i-inbox: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2013l3-8h12l3%208v6H3zM3%2013h5l1%203h6l1-3h5'/%3E%3C/svg%3E");
    --pp-i-bell: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2016V11a6%206%200%200%201%2012%200v5l2%202H4zM10%2021h4'/%3E%3C/svg%3E");
    --pp-i-chev: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
    --pp-i-box: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%207l9-4%209%204v10l-9%204-9-4zM3%207l9%204%209-4M12%2011v10'/%3E%3C/svg%3E");
    --pp-i-clock: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E");
    --pp-i-x: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%206l12%2012M18%206%206%2018'/%3E%3C/svg%3E");
    --pp-i-expand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%209V4h5M20%209V4h-5M4%2015v5h5M20%2015v5h-5'/%3E%3C/svg%3E");
    --pp-i-left: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m15%206-6%206%206%206'/%3E%3C/svg%3E");
    --pp-i-right: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E");
    --pp-i-map: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206l6-2%206%202%206-2v14l-6%202-6-2-6%202zM9%204v14M15%206v14'/%3E%3C/svg%3E");
    --pp-i-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Ccircle%20cx='9'%20cy='10'%20r='2'/%3E%3Cpath%20d='m21%2016-5-5-9%209'/%3E%3C/svg%3E");
    --pp-i-mail: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E");
    --pp-i-edit: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020h4L19%209l-4-4L4%2016zM13%207l4%204'/%3E%3C/svg%3E");
    --pp-i-more: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h.01M12%2012h.01M19%2012h.01'%20stroke-width='3'/%3E%3C/svg%3E");
    --pp-i-copy: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='8'%20y='8'%20width='12'%20height='12'%20rx='2'/%3E%3Cpath%20d='M16%208V5a1%201%200%200%200-1-1H5a1%201%200%200%200-1%201v10a1%201%200%200%200%201%201h3'/%3E%3C/svg%3E");
    --pp-i-flight: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.8%2019.2%2016%2011l3.5-3.5C21%206%2021.5%204%2021%203c-1-.5-3%200-4.5%201.5L13%208%204.8%206.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1%201%20.3%201.3L9%2012l-2%203H4l-1%201%203%202%202%203%201-1v-3l3-2%203.5%205.3c.3.4.8.5%201.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
    --pp-i-archive: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='5'%20rx='1'/%3E%3Cpath%20d='M5%209v11h14V9M10%2013h4'/%3E%3C/svg%3E");
    --pp-i-phone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z'/%3E%3C/svg%3E");
    --pp-i-back: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2012H5M11%206l-6%206%206%206'/%3E%3C/svg%3E");
}
html.pie-premium .pp-shell .pp-ic-grid { --pp-i: var(--pp-i-grid); }
html.pie-premium .pp-shell .pp-ic-user { --pp-i: var(--pp-i-user); }
html.pie-premium .pp-shell .pp-ic-globe { --pp-i: var(--pp-i-globe); }
html.pie-premium .pp-shell .pp-ic-cal { --pp-i: var(--pp-i-cal); }
html.pie-premium .pp-shell .pp-ic-tag { --pp-i: var(--pp-i-tag); }
html.pie-premium .pp-shell .pp-ic-cart { --pp-i: var(--pp-i-cart); }
html.pie-premium .pp-shell .pp-ic-plane { --pp-i: var(--pp-i-plane); }
html.pie-premium .pp-shell .pp-ic-card { --pp-i: var(--pp-i-card); }
html.pie-premium .pp-shell .pp-ic-book { --pp-i: var(--pp-i-book); }
html.pie-premium .pp-shell .pp-ic-bar { --pp-i: var(--pp-i-bar); }
html.pie-premium .pp-shell .pp-ic-percent { --pp-i: var(--pp-i-percent); }
html.pie-premium .pp-shell .pp-ic-check { --pp-i: var(--pp-i-check); }
html.pie-premium .pp-shell .pp-ic-doc { --pp-i: var(--pp-i-doc); }
html.pie-premium .pp-shell .pp-ic-bolt { --pp-i: var(--pp-i-bolt); }
html.pie-premium .pp-shell .pp-ic-plus { --pp-i: var(--pp-i-plus); }
html.pie-premium .pp-shell .pp-ic-spark { --pp-i: var(--pp-i-spark); }
html.pie-premium .pp-shell .pp-ic-info { --pp-i: var(--pp-i-info); }
html.pie-premium .pp-shell .pp-ic-inbox { --pp-i: var(--pp-i-inbox); }
html.pie-premium .pp-shell .pp-ic-bell { --pp-i: var(--pp-i-bell); }
html.pie-premium .pp-shell .pp-ic-chev { --pp-i: var(--pp-i-chev); }
html.pie-premium .pp-shell .pp-ic-box { --pp-i: var(--pp-i-box); }
html.pie-premium .pp-shell .pp-ic-clock { --pp-i: var(--pp-i-clock); }
html.pie-premium .pp-shell .pp-ic-x { --pp-i: var(--pp-i-x); }
html.pie-premium .pp-shell .pp-ic-expand { --pp-i: var(--pp-i-expand); }
html.pie-premium .pp-shell .pp-ic-left { --pp-i: var(--pp-i-left); }
html.pie-premium .pp-shell .pp-ic-right { --pp-i: var(--pp-i-right); }
html.pie-premium .pp-shell .pp-ic-map { --pp-i: var(--pp-i-map); }
html.pie-premium .pp-shell .pp-ic-image { --pp-i: var(--pp-i-image); }
html.pie-premium .pp-shell .pp-ic-mail { --pp-i: var(--pp-i-mail); }
html.pie-premium .pp-shell .pp-ic-edit { --pp-i: var(--pp-i-edit); }
html.pie-premium .pp-shell .pp-ic-more { --pp-i: var(--pp-i-more); }
html.pie-premium .pp-shell .pp-ic-copy { --pp-i: var(--pp-i-copy); }
html.pie-premium .pp-shell .pp-ic-flight { --pp-i: var(--pp-i-flight); }
html.pie-premium .pp-shell .pp-ic-phone { --pp-i: var(--pp-i-phone); }
html.pie-premium .pp-shell .pp-ic-back { --pp-i: var(--pp-i-back); }

/* KPI sparklines: one series in the accent, no axes (monthly figures from accounting_details) */
html.pie-premium .pp-shell .pp-dash .pp-kcard svg.pp-spark {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 12px;
    overflow: visible;
}

html.pie-premium .pp-shell .pp-dash .pp-kcard svg.pp-spark .pp-l {
    fill: none;
    stroke: var(--pp-acc);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

html.pie-premium .pp-shell .pp-dash .pp-kcard svg.pp-spark .pp-a {
    fill: rgba(122, 26, 55, .12);
    stroke: none;
}

/* ---------- Table cells and controls, as in the design's Tasks / Reminders / Sales panels ---------- */
/* Code chip, status pill, row action link (rendered by PremiumDashboard's ppCode / ppPill) */
html.pie-premium .pp-shell .pp-dash .pp-code,
html.pie-premium .pp-shell .pp-dash .trip-title-text-wrap .bold {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 12px var(--pp-bold);
    letter-spacing: .03em;
}

html.pie-premium .pp-shell .pp-dash .pp-pill,
html.pie-premium .pp-shell .pp-dash .reminder-on {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-dash .pp-pill::before,
html.pie-premium .pp-shell .pp-dash .reminder-on::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

html.pie-premium .pp-shell .pp-dash .reminder-on .fa {
    display: none;
}

html.pie-premium .pp-shell .pp-dash .pp-pill.pp-ok,
html.pie-premium .pp-shell .pp-dash .reminder-on.reminder-on-sent {
    background: #e7f5ee;
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell .pp-dash .pp-pill.pp-w,
html.pie-premium .pp-shell .pp-dash .reminder-on.reminder-on-date {
    background: #fdf3e1;
    color: #9a5b00 !important;
}

html.pie-premium .pp-shell .pp-dash .pp-pill.pp-d,
html.pie-premium .pp-shell .pp-dash .reminder-on.reminder-on-failed {
    background: #fdecec;
    color: #c0262d !important;
}

html.pie-premium .pp-shell .pp-dash .booking-table-action ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

html.pie-premium .pp-shell .pp-dash .pp-act {
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-dash .trips_setting {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .trips_setting:hover {
    background: var(--pp-panel-2);
}

/* On/off switches */
html.pie-premium .pp-shell .pp-dash .checkbox-toggle input + label {
    min-height: 20px;
    line-height: 20px;
    padding-left: 44px;
}

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

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

html.pie-premium .pp-shell .pp-dash .checkbox-toggle input + label::after,
html.pie-premium .pp-shell .pp-dash .checkbox-toggle input + label:hover::after,
html.pie-premium .pp-shell .pp-dash .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);
}

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

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

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

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


/* Heading on the left, its question + Yes/No on the right */
html.pie-premium .pp-shell .pp-dash .reminders-section .d-flex.justify-content-between {
    margin: 4px 0 14px !important;
}

html.pie-premium .pp-shell .pp-dash .reminders-section .d-flex.justify-content-between > .d-flex {
    flex: 1;
    flex-wrap: wrap;
    gap: 8px 14px;
}

html.pie-premium .pp-shell .pp-dash .reminders-section .d-flex.justify-content-between > .d-flex > h2 {
    margin-right: auto !important;
}

html.pie-premium .pp-shell .pp-dash .reminders-section .pie-icon-share {
    margin-left: 14px;
    color: var(--pp-muted);
    font-size: 16px !important;
}

html.pie-premium .pp-shell .pp-dash .pp-subrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 4px 0 12px;
}

html.pie-premium .pp-shell .pp-dash .pp-subrow > h2 {
    margin-right: auto !important;
}

html.pie-premium .pp-shell .pp-dash .pp-subrow .invoice-payment-reminder {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

html.pie-premium .pp-shell .pp-dash .pp-q {
    margin: 0;
    font: 13.5px var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .custome-radiobtn .form-check {
    margin: 0 0 0 4px;
    font-size: 13.5px;
    color: var(--pp-ink-2);
}

/* Filter boxes (assigned user, dates, show) */
html.pie-premium .pp-shell .pp-dash .filters-search {
    margin: 0 0 14px;
}

html.pie-premium .pp-shell .pp-dash .filters-search .bootstrap-select .dropdown-toggle,
html.pie-premium .pp-shell .pp-dash .filters-search .vs__dropdown-toggle {
    border-color: transparent !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell .pp-dash .filters-search .ffl-label {
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
}

/* Sales: two profit cards with the advisor / agency split */
html.pie-premium .pp-shell .pp-dash .pp-sales .pp-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 4px 0 16px;
}

html.pie-premium .pp-shell .pp-dash .pp-sales .pp-split .pp-split-card {
    position: relative;
    padding: 20px 22px 18px;
    border-radius: 16px;
}

html.pie-premium .pp-shell .pp-dash .pp-split-card > small {
    display: block;
    font-size: 13px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-dash .pp-split-card > b {
    display: block;
    margin: 6px 0 2px;
    font: 30px/1.1 var(--pp-bold);
    letter-spacing: -.025em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .pp-prog {
    margin-top: 16px;
    background: var(--pp-line);
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .pp-pl {
    margin-top: 12px;
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .pp-pl span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--pp-muted);
    font-size: 13px;
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .pp-pl span:last-child {
    text-align: right;
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .pp-pl strong {
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
    font-weight: normal;
}

html.pie-premium .pp-shell .pp-dash .pp-split-card > p {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .pp-split-info {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--pp-muted);
    cursor: help;
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .pp-split-info .pp-ic {
    width: 16px;
    height: 16px;
}

html.pie-premium .pp-shell .pp-dash .pp-split-card .hover-piechart {
    width: 300px;
}

/* Search: one grey field, magnifier first (common.css draws the button as a grey block on the right) */
html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container {
    align-items: center;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container:focus-within {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container .typeahead-button,
html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container .typeahead-button:hover {
    order: -1;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: var(--pp-muted);
    border-radius: 10px 0 0 10px;
}

html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container .typeahead-button button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 15px;
    line-height: 1;
}

html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container .typeahead-query {
    align-items: center;
    background: transparent;
}

html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container .typeahead-query input {
    height: 38px;
    padding: 0 8px 0 0 !important;
    background: transparent !important;
    box-shadow: none;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-dash .search-box .pie_search_box.typeahead-container .typeahead-query i {
    padding: 0 12px;
    line-height: 38px;
}

/* Avatar keeps its own slot in the header row (the flex row squeezed the button to 0px) */
html.pie-premium .pp-shell .pp-org .user-menu,
html.pie-premium .pp-shell .pp-org .user-menu .dropdown-toggle {
    flex: none;
    width: 34px;
    height: 34px;
}

html.pie-premium .pp-shell .pp-org .user-menu .dropdown-toggle img {
    max-width: none;
}

/* Trial notice: a quiet pill in the header instead of a floating card */
html.pie-premium .pp-shell .pp-top .trial-upgrade {
    flex: none;
}

html.pie-premium .pp-shell .pp-top .trial-upgrade .trial-upgrade-wrapper {
    width: auto;
    margin: 0;
    padding: 6px 6px 6px 12px;
    border-radius: 10px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    color: var(--pp-ink-3);
    font-size: 12.5px;
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-top .trial-upgrade .upgrade-btn {
    margin-left: 8px !important;
    padding: 4px 9px;
    border: 0;
    border-radius: 8px;
    background: var(--pp-acc);
    color: #fff;
    font: 11px var(--pp-bold);
    letter-spacing: .06em;
    line-height: 1.4;
}

/* Rows: no zebra striping, one line per cell (the panel scrolls sideways, as in the design) */
html.pie-premium .pp-shell .pp-dash .crm_table table tbody tr:not(.overdue) {
    background-color: transparent;
}

html.pie-premium .pp-shell .pp-dash .crm_table table tbody td {
    box-shadow: none;
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-dash .crm_table table thead th {
    vertical-align: middle;
}

/* DataTables scroll tables carry default margins, which left a blank strip under the Tasks header */
html.pie-premium .pp-shell .pp-dash .dataTables_scroll table,
html.pie-premium .pp-shell .pp-dash .crm_table table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Pagination (Bootstrap markup: li.paginate_button > a) */
html.pie-premium .pp-shell .pp-dash .dataTables_paginate .pagination {
    gap: 4px;
    margin: 0;
    padding: 10px 14px;
}

html.pie-premium .pp-shell .pp-dash .dataTables_paginate .pagination li > a {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--pp-ink-3);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-dash .dataTables_paginate .pagination li.active > a,
html.pie-premium .pp-shell .pp-dash .dataTables_paginate .pagination li.active > a:hover {
    background: var(--pp-ink) !important; /* template1.css forces the accent with !important */
    color: var(--pp-bg);
}

/* Yes / No radios: grey ring, accent ring when chosen */
html.pie-premium .pp-shell .pp-dash .custome-radiobtn {
    gap: 14px;
    margin: 0;
}

html.pie-premium .pp-shell .pp-dash .custome-radiobtn .form-check {
    margin: 0;
    padding-left: 0;
}

html.pie-premium .pp-shell .pp-dash .custome-radiobtn .radio-custom {
    padding-left: 26px;
    line-height: 20px;
}

html.pie-premium .pp-shell .pp-dash .custome-radiobtn .checkmark {
    top: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--pp-line-2);
}

html.pie-premium .pp-shell .pp-dash .custome-radiobtn input[type="radio"]:checked ~ .checkmark {
    border: 5px solid var(--pp-acc) !important;
}

html.pie-premium .pp-shell .pp-dash .custome-radiobtn .checkmark::after {
    display: none;
}

/* Tasks header: links, then the filter pills, then the full-screen button at the far right */
html.pie-premium .pp-shell .pp-dash .tasks-block .section-head .full-screen-icon {
    order: 10;
    margin-left: 4px;
}

html.pie-premium .pp-shell .pp-dash .crm_table table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Avatars: one initials circle everywhere (greeting, header, side bar) when there is no real photo */
html.pie-premium .pp-shell .pp-av.pp-av-lg {
    width: 52px;
    height: 52px;
    font-size: 16px;
}

html.pie-premium .pp-shell .pp-org .user-menu .dropdown-toggle .pp-av {
    width: 34px;
    height: 34px;
}

/* Question + Yes/No: even 16px spacing (classic CSS adds 32px left padding to the radio group) */
html.pie-premium .pp-shell .pp-dash .custome-radiobtn {
    gap: 16px;
    padding-left: 0;
}

html.pie-premium .pp-shell .pp-dash .pp-subrow .invoice-payment-reminder,
html.pie-premium .pp-shell .pp-dash .reminders-section .d-flex.justify-content-between > .d-flex {
    column-gap: 16px;
}

/* ---------- Bell / cart drawer (NotificationDrawer.vue): the design's floating card ----------
   The drawer slides by animating its inline `right` between -400px and 0, so the card is
   380px wide plus a 10px margin: fully hidden when closed, 10px off the edges when open. */
html.pie-premium .pp-shell .notification-activity-drawer .notify_bg_layer {
    background: rgba(17, 17, 26, .28);
}

html.pie-premium .pp-shell .notification-activity-drawer .drawer-wrapper {
    top: 0;
    bottom: 0;
    width: 380px;
    max-width: calc(100vw - 20px);
    height: auto;
    margin: 10px 10px 10px 0;
    padding: 0;
    border-radius: 20px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell .notification-activity-drawer .notify-drawer-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
}

html.pie-premium .pp-shell .notification-activity-drawer .notify-title {
    margin: 0;
    font: 18px/1.3 var(--pp-bold);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .notification-activity-drawer .close-notify {
    position: static;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--pp-ink-3);
    font-size: 15px;
    cursor: pointer;
}

html.pie-premium .pp-shell .notification-activity-drawer .close-notify:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

/* Notifications / Activities tabs (bell drawer): underline tabs sitting on the header's divider,
   the same style as the messages drawer's Inbox / Sent tabs */
html.pie-premium .pp-shell .notification-activity-drawer .noti-tabs {
    grid-column: 1 / -1;
    justify-self: start;
    gap: 22px;
    margin: 0 0 -15px;
    padding: 0;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell .notification-activity-drawer .noti-tabs:not([style*="none"]) {
    display: flex;
}

html.pie-premium .pp-shell .notification-activity-drawer .noti_tab {
    margin: 0;
    padding: 8px 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--pp-ink-3);
    font: 14px var(--pp-sans);
    cursor: pointer;
}

html.pie-premium .pp-shell .notification-activity-drawer .noti_tab:hover {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .notification-activity-drawer .noti_tab.active {
    border-bottom-color: var(--pp-acc);
    background: transparent;
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    box-shadow: none;
}

html.pie-premium .pp-shell .notification-activity-drawer .notify-scroll-body {
    padding: 4px 20px 20px;
}

html.pie-premium .pp-shell .notification-activity-drawer .no-data {
    margin: 40px 0;
    text-align: center;
    color: var(--pp-muted);
    font-size: 13.5px !important;
}

html.pie-premium .pp-shell .notification-activity-drawer .inner-title {
    margin: 16px 0 4px !important;
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .notification-activity-drawer .pie_notifier_user .item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .notification-activity-drawer .pie_notifier_user .item .photo {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

html.pie-premium .pp-shell .notification-activity-drawer .pie_notifier_user .item .desc {
    margin: 0;
    color: var(--pp-ink-2);
    font-size: 13.5px;
    line-height: 1.45;
}

html.pie-premium .pp-shell .notification-activity-drawer .noti-tabs::after {
    display: none;
}

/* ---------- Messages drawer (MessagesDrawer.vue): same floating card, wider ----------
   It slides by animating its inline `right` between -1150px and 0, so the card is 1130px
   wide plus a 10px margin: fully hidden when closed. */
html.pie-premium .pp-shell .message_bg_layer {
    background: rgba(17, 17, 26, .28);
}

html.pie-premium .pp-shell .drawer-wrapper.main_message_wrapper {
    top: 0;
    bottom: 0;
    width: 1130px;
    max-width: calc(100vw - 20px);
    height: auto;
    margin: 10px 10px 10px 0;
    padding: 0;
    border-radius: 20px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell .main_message_wrapper > .container-fluid {
    padding: 0;
}

/* Email / SMS: segmented control, close button on the right */
html.pie-premium .pp-shell .main_message_wrapper .crm_tag {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 18px 22px 14px;
}

html.pie-premium .pp-shell .main_message_wrapper .crm_tag .crm_pills {
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 13.5px var(--pp-bold);
    cursor: pointer;
}

html.pie-premium .pp-shell .main_message_wrapper .crm_tag .crm_pills.active {
    background: var(--pp-ink);
    color: var(--pp-bg);
}

html.pie-premium .pp-shell .main_message_wrapper .crm_tag .close-notify {
    position: static;
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--pp-ink-3);
    font-size: 15px;
    cursor: pointer;
}

html.pie-premium .pp-shell .main_message_wrapper .crm_tag .close-notify:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .main_message_wrapper .email-messages-section,
html.pie-premium .pp-shell .main_message_wrapper .sms-messages-section {
    padding: 0 22px 22px;
}

/* Inbox / Sent / Drafts…: quiet tabs with an accent underline */
html.pie-premium .pp-shell .main_message_wrapper .noti-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .main_message_wrapper .noti-tabs::after {
    display: none;
}

html.pie-premium .pp-shell .main_message_wrapper .noti-tabs .noti_tab {
    margin: 0 0 -1px;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    color: var(--pp-ink-3);
    font: 14px var(--pp-sans);
}

html.pie-premium .pp-shell .main_message_wrapper .noti-tabs .noti_tab:hover {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .main_message_wrapper .noti-tabs .noti_tab.active {
    border-bottom-color: var(--pp-acc);
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

/* Filters: grey field boxes */
html.pie-premium .pp-shell .main_message_wrapper .filter-message .form-floating > .form-control,
html.pie-premium .pp-shell .main_message_wrapper .filter-message .vs__dropdown-toggle,
html.pie-premium .pp-shell .main_message_wrapper .filter-message .vdp-datepicker input,
html.pie-premium .pp-shell .main_message_wrapper .filter-message .bootstrap-select .dropdown-toggle {
    border-color: transparent !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel-2) !important;
    font-size: 14px;
}

html.pie-premium .pp-shell .main_message_wrapper .filter-message .vs__selected,
html.pie-premium .pp-shell .main_message_wrapper .filter-message .vs__search::placeholder {
    font-size: 14px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .main_message_wrapper .filter-message .ffl-label {
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
}

/* Compose (the design's primary button) + last sync */
html.pie-premium .pp-shell .main_message_wrapper .btn-groups {
    display: flex;
    align-items: center;
    gap: 12px;
}

html.pie-premium .pp-shell .main_message_wrapper .btn-groups .btn-primary {
    height: 40px;
    min-width: 0;
    padding: 0 16px;
    border: 1px solid var(--pp-acc);
    border-radius: 10px;
    background: var(--pp-acc);
    color: #fff;
    font: 13.5px var(--pp-bold);
    text-transform: none;
}

html.pie-premium .pp-shell .main_message_wrapper .btn-groups .btn-primary::after {
    content: none;
}

html.pie-premium .pp-shell .main_message_wrapper .last_sync_div {
    margin: 0 0 0 auto !important;
    display: flex;
    align-items: center;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .main_message_wrapper .last_sync_div span {
    font-size: 13px !important;
}

html.pie-premium .pp-shell .main_message_wrapper .last_sync_div i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .main_message_wrapper .last_sync_div i:hover {
    background: var(--pp-hover);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .main_message_wrapper .no-message {
    margin: 60px 0;
    text-align: center;
    color: var(--pp-muted);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .main_message_wrapper .filter-message input,
html.pie-premium .pp-shell .main_message_wrapper .filter-message .vs__selected,
html.pie-premium .pp-shell .main_message_wrapper .filter-message .vs__search {
    font-size: 14px !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .main_message_wrapper .filter-message input::placeholder,
html.pie-premium .pp-shell .main_message_wrapper .filter-message .vs__search::placeholder {
    font-size: 14px !important;
    color: var(--pp-ink);
}

/* Service notice in the header (SMS tab): a calm amber callout instead of large red text */
html.pie-premium .pp-shell .main_message_wrapper .crm_tag .text-danger {
    flex: 1;
    margin: 0 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fdf3e1;
    color: #9a5b00 !important;
    font: 12.5px/1.4 var(--pp-bold) !important;
}

/* Message rows (Email + SMS threads) */
html.pie-premium .pp-shell .main_message_wrapper .threads {
    margin: 0;
    padding: 0;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    overflow: hidden;
    list-style: none;
}

html.pie-premium .pp-shell .main_message_wrapper .threads li.thread {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .main_message_wrapper .threads li.thread:last-child {
    border-bottom: 0;
}

html.pie-premium .pp-shell .main_message_wrapper .threads li.thread > a {
    display: block;
    padding: 14px 16px;
    color: var(--pp-ink-2);
    font-size: 13.5px;
    line-height: 1.5;
}

html.pie-premium .pp-shell .main_message_wrapper .threads li.thread:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .main_message_wrapper .threads .people,
html.pie-premium .pp-shell .main_message_wrapper .threads .name {
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell .main_message_wrapper .threads .subject {
    color: var(--pp-ink-2);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .main_message_wrapper .threads .time-with-tag {
    display: flex;
    align-items: center;
    gap: 10px;
}

html.pie-premium .pp-shell .main_message_wrapper .threads time {
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell .main_message_wrapper .threads .token-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 7px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-bold);
}

html.pie-premium .pp-shell .main_message_wrapper .threads .token-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

html.pie-premium .pp-shell .main_message_wrapper .threads .delivered .token-label {
    background: #e7f5ee;
    color: var(--pp-ok);
}

/* Pagination (bootstrap-vue): same black chip as the dashboard tables */
html.pie-premium .pp-shell .main_message_wrapper .b-pagination {
    gap: 4px;
    margin: 12px 0;
}

html.pie-premium .pp-shell .main_message_wrapper .b-pagination .page-link {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px !important;
    background: none;
    color: var(--pp-ink-3);
    font: 13px var(--pp-bold);
    box-shadow: none;
}

html.pie-premium .pp-shell .main_message_wrapper .b-pagination .page-item.active .page-link {
    background: var(--pp-ink);
    color: var(--pp-bg);
}

html.pie-premium .pp-shell .main_message_wrapper .b-pagination .page-item.disabled .page-link {
    color: var(--pp-line-2);
}

/* Underline tabs: the bold (active) font sits higher than the light one; pin both to one baseline */
html.pie-premium .pp-shell .notification-activity-drawer .noti-tabs,
html.pie-premium .pp-shell .main_message_wrapper .noti-tabs {
    align-items: flex-end;
}

html.pie-premium .pp-shell .notification-activity-drawer .noti_tab,
html.pie-premium .pp-shell .main_message_wrapper .noti-tabs .noti_tab {
    line-height: 20px;
}

/* Interstate Bold draws ~2px higher than Interstate Light: move the active label down, not its underline */
html.pie-premium .pp-shell .notification-activity-drawer .noti_tab.active {
    padding-top: 10px;
    padding-bottom: 10px;
}

html.pie-premium .pp-shell .main_message_wrapper .noti-tabs .noti_tab.active {
    padding-top: 12px;
    padding-bottom: 8px;
}

/* Side bar foot: name and subtitle on one line each */
html.pie-premium .pp-shell .pp-me small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: none;
}

/* ---------- Help videos menu (header (i) button): the design's popover menu ---------- */
html.pie-premium .pp-shell .pp-top .modal-help-videos .popover-box {
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 8px !important;
    padding: 6px;
    border: 0;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .popover-arrow {
    display: none;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .trip_tutorial_li {
    margin: 0;
    padding: 0;
    list-style: none;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-wrapper {
    margin: 0;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink);
    cursor: pointer;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head .bold {
    font: 13.5px var(--pp-bold);
    color: var(--pp-ink);
}

/* Chevron: points right when closed, down when the section is open */
html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head i {
    width: 12px;
    font-size: 9px;
    color: var(--pp-muted);
    transform: rotate(-90deg);
    transition: transform .15s;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-wrapper:has(> .panel-body.show) .panel-head i,
html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-wrapper:has(> .panel-body.collapsing) .panel-head i {
    transform: none;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-body ul {
    margin: 2px 0 6px 21px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--pp-line-2);
    list-style: none;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-body li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
    font-size: 13px;
    line-height: 1.35;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-body li:hover {
    background: var(--pp-hover);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-body .video-icon {
    float: none;
    font-size: 11px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-body li:hover .video-icon {
    color: var(--pp-acc);
}

/* The classic menu list draws its own white card and the open section a top border: drop both */
html.pie-premium .pp-shell .pp-top .modal-help-videos .trip_tutorial_li {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-body {
    border: 0;
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head i {
    display: inline-grid;
    place-items: center;
    height: 16px;
    line-height: 1;
}

/* Section chevron: the design's chevron icon (centred on the text) instead of the icon-font glyph */
html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head i {
    width: 14px;
    height: 14px;
    font-size: 0;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head i::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--pp-i-chev) center / contain no-repeat;
    mask: var(--pp-i-chev) center / contain no-repeat;
}

/* dashboard.css pads this icon (5px 10px) and template1.css tints it magenta */
html.pie-premium .pp-shell .pp-top .modal-help-videos .panel-head i {
    padding: 0;
    color: var(--pp-muted) !important;
}

/* More design icons (Trips page) */
html.pie-premium .pp-shell {
    --pp-i-down: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204v11M7%2010l5%205%205-5M5%2020h14'/%3E%3C/svg%3E");
    --pp-i-up: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012a8%208%200%201%201-2.3-5.7M20%204v4h-4'/%3E%3C/svg%3E");
    --pp-i-refresh: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012a8%208%200%201%201-2.3-5.7M20%204v4h-4'/%3E%3C/svg%3E");
    --pp-i-cols: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M9%204v16M15%204v16'/%3E%3C/svg%3E");
    --pp-i-filter: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205h16l-6%208v6l-4-2v-4z'/%3E%3C/svg%3E");
    --pp-i-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%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");
}
html.pie-premium .pp-shell .pp-ic-down { --pp-i: var(--pp-i-down); }
html.pie-premium .pp-shell .pp-ic-up { --pp-i: var(--pp-i-up); }
html.pie-premium .pp-shell .pp-ic-refresh { --pp-i: var(--pp-i-refresh); }
html.pie-premium .pp-shell .pp-ic-cols { --pp-i: var(--pp-i-cols); }
html.pie-premium .pp-shell .pp-ic-panel { --pp-i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M15%204v16M8%2010l2%202-2%202'/%3E%3C/svg%3E"); }
html.pie-premium .pp-shell .pp-ic-filter { --pp-i: var(--pp-i-filter); }
html.pie-premium .pp-shell .pp-ic-search { --pp-i: var(--pp-i-search); }

/* ==========================================================================
   Trips page (PremiumTripList.vue, .pp-trips)
   ========================================================================== */
html.pie-premium .pp-shell .pp-trips {
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell .pp-trips > #full-screen-trips > .container-fluid {
    padding: 0 32px 32px;
}

html.pie-premium .pp-shell .pp-trips .section-bg {
    margin: 0 !important;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Page head */
html.pie-premium .pp-shell .pp-trips .pp-ph {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 18px 0 22px;
}

html.pie-premium .pp-shell .pp-trips .pp-eyebrow {
    font: 11.5px var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-trips .pp-ph h1 {
    margin: 6px 0 4px;
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-trips .pp-ph p {
    margin: 0;
    font-size: 14px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-trips .pp-acts {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Buttons (design .btn / .btn.pri) */
html.pie-premium .pp-shell .pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell .pp-btn:hover {
    border-color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-btn .pp-ic {
    width: 16px;
    height: 16px;
}

html.pie-premium .pp-shell .pp-btn.pp-pri {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell .pp-btn.pp-pri:hover {
    border-color: #870078;
    background: #870078;
}

html.pie-premium .pp-shell .pp-btn.pp-sq {
    width: 40px;
    padding: 0;
}

/* Trip status tabs: white segmented bar, the open tab dark, counts as small badges */
html.pie-premium .pp-shell .pp-trips .booking-list-block {
    margin: 0;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips ul.trip-types {
    display: flex;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 13px;
    border: 0;
    border-radius: 9px;
    color: var(--pp-ink-3);
    font: 13.5px var(--pp-sans);
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li::after {
    display: none;
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li:hover {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li.active {
    background: var(--pp-ink);
    color: var(--pp-bg);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li .count {
    position: static;
    min-width: 20px;
    height: 18px;
    margin: 0;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11px/18px var(--pp-bold);
    text-align: center;
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li.active .count {
    background: var(--pp-acc);
    color: #fff;
}

/* My trips / All trips…: light segmented pills */
html.pie-premium .pp-shell .pp-trips .tasks-block {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell .pp-trips .tasks-filter {
    float: none;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 14px;
    padding: 3px;
    border-radius: 10px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .pp-trips .tasks-filter li {
    margin: 0 !important;
    padding: 6px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 13px/18px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips .tasks-filter li:hover {
    background: transparent;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-trips .tasks-filter li.active_black,
html.pie-premium .pp-shell .pp-trips .tasks-filter li.active_black:hover {
    background: var(--pp-panel);
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Lead advisor / Collaborator… checkboxes */
html.pie-premium .pp-shell .pp-trips .invoice-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 16px;
}

html.pie-premium .pp-shell .pp-trips .invoice-checkbox .custom-checkbox {
    margin: 0 !important;
}

html.pie-premium .pp-shell .pp-trips .invoice-checkbox label {
    color: var(--pp-ink-2);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .pp-trips .custom-checkbox .checkmark {
    border: 1.5px solid var(--pp-line-2);
    border-radius: 5px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .pp-trips .custom-checkbox input:checked ~ .checkmark {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
}

/* Apply filters / Remove filters, filter fields and applied-filter chips */
html.pie-premium .pp-shell .pp-trips .apply-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
    text-transform: none;
}

html.pie-premium .pp-shell .pp-trips .apply-btn::after {
    display: none;
}

html.pie-premium .pp-shell .pp-trips .reset-filter-button {
    border: 0;
    background: none;
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-trips .filter-dropdown {
    padding: 6px !important;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell .pp-trips .filter-dropdown .dropdown-item {
    border-radius: 8px;
    font-size: 13.5px !important;
}


html.pie-premium .pp-shell .pp-trips .applied-filter-notify {
    margin: 0 0 6px;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-trips .custom-filter-pill {
    align-items: center !important;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--pp-acc-line);
    border-radius: 8px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-size: 12.5px;
}

html.pie-premium .pp-shell .pp-trips .custom-filter-pill strong {
    font-family: var(--pp-bold);
    font-weight: normal;
}

/* Table card (vue-good-table) */
html.pie-premium .pp-shell .pp-trips .trip-list-section {
    margin-top: 12px !important;
}

html.pie-premium .pp-shell .pp-trips .vgt-wrap {
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
}

html.pie-premium .pp-shell .pp-trips .vgt-inner-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Global search: the design's search field */
html.pie-premium .pp-shell .pp-trips .vgt-global-search {
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .pp-trips .vgt-global-search .vgt-input {
    width: min(420px, 100%);
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    background: var(--pp-panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa2' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 14px center / 16px no-repeat;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips .vgt-global-search .vgt-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-trips .custom_top_scrollbar {
    height: 6px;
}

/* Header + rows */
html.pie-premium .pp-shell .pp-trips table.vgt-table {
    border: 0;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips table.vgt-table thead th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font: 12px var(--pp-bold);
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.sorting-asc,
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.sorting-desc {
    color: var(--pp-acc);
}

/* Column filter row: small grey inputs */
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.filter-th {
    padding: 8px 14px;
}

html.pie-premium .pp-shell .pp-trips table.vgt-table thead .vgt-input,
html.pie-premium .pp-shell .pp-trips table.vgt-table thead .vgt-select {
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--pp-panel-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips table.vgt-table tbody td {
    height: 56px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-ink-2);
    font-size: 13.5px;
    vertical-align: middle;
}

html.pie-premium .pp-shell .pp-trips table.vgt-table.striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips table.vgt-table tbody tr:hover td {
    background: var(--pp-hover);
}

/* Status badge: agency colours kept, design pill shape */
html.pie-premium .pp-shell .pp-trips .trip-status-badge-lable,
html.pie-premium .pp-shell .pp-trips .trip-status-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font: 12px var(--pp-bold);
    white-space: nowrap;
}

/* Row actions: plain grey gear and arrow, as in the design */
html.pie-premium .pp-shell .pp-trips .round-btn-trip-list {
    background: transparent !important;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell .pp-trips .round-btn-trip-list:hover {
    color: var(--pp-acc) !important;
}

/* Footer */
html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer .footer__navigation__page-btn {
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-bold);
}

/* Trips fixes: classic rules here are more specific (and !important), so match their selectors */
html.pie-premium .pp-shell .pp-trips .custom-table table.vgt-table td .round-btn-trip-list {
    background-color: transparent !important;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell .pp-trips .custom-table table.vgt-table td .round-btn-trip-list:hover {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell .pp-trips .trip-status-badge-lable {
    min-width: 0;
    line-height: 1;
}

html.pie-premium .pp-shell .pp-trips .vgt-global-search .input__icon {
    display: none;
}

/* Display Columns: the design's outlined button */
html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > .dropdown-toggle::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--pp-i-cols) center / contain no-repeat;
    mask: var(--pp-i-cols) center / contain no-repeat;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > .dropdown-menu {
    border: 0;
    border-radius: 12px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

/* Thin, light horizontal scrollbar above the table */
html.pie-premium .pp-shell .pp-trips .custom_top_scrollbar::-webkit-scrollbar {
    height: 6px;
}

html.pie-premium .pp-shell .pp-trips .custom_top_scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips .custom_top_scrollbar::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--pp-line-2);
}

/* Filter field label (Advisor, Trip start date…) */
html.pie-premium .pp-shell .pp-trips .trip-list-filter .ffl-label,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-label {
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-trips .vuegood-table-info #pie-custom-dropdown-tr > button.dropdown-toggle,
html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > button.dropdown-toggle {
    width: auto;
    min-width: 0;
}

/* Trips toolbar: search across the row, then Apply filters, Columns, full screen */
html.pie-premium .pp-shell .pp-trips .pp-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

html.pie-premium .pp-shell .pp-trips .pp-search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-trips .pp-search:focus-within {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell .pp-trips .pp-search .pp-ic {
    width: 16px;
    height: 16px;
}

html.pie-premium .pp-shell .pp-trips .pp-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips .pp-toolbar .btn-group {
    margin: 0;
}

html.pie-premium .pp-shell .pp-trips .pp-toolbar .apply-btn {
    padding: 0 16px !important;
}

html.pie-premium .pp-shell .pp-trips .pp-toolbar .apply-btn .pp-ic {
    width: 16px;
    height: 16px;
}

html.pie-premium .pp-shell .pp-trips .pp-toolbar #pie-custom-dropdown-tr {
    float: none !important;
    margin: 0;
}

/* "Display Columns" reads "Columns", as in the design */
html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > button.dropdown-toggle {
    font-size: 0;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > button.dropdown-toggle::after {
    content: 'Columns';
    margin: 0;
    border: 0;
    font: 13.5px var(--pp-bold);
    vertical-align: baseline;
}

/* The table's own search is replaced by the toolbar search */
html.pie-premium .pp-shell .pp-trips .vgt-global-search {
    display: none;
}

/* Applied filters: chips + Remove filters on one line */
html.pie-premium .pp-shell .pp-trips .applied-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 12px;
}

html.pie-premium .pp-shell .pp-trips .applied-filters-wrapper:empty {
    display: none;
}

/* Trip code chip and trip name with its tile */
html.pie-premium .pp-shell .pp-trips .pp-code {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 12px var(--pp-bold);
    letter-spacing: .03em;
}

html.pie-premium .pp-shell .pp-trips .pp-tripname {
    display: flex;
    align-items: center;
    gap: 12px;
}

html.pie-premium .pp-shell .pp-trips .pp-thumb {
    flex: none;
    width: 44px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--pp-acc-soft), #ece6f7);
    color: var(--pp-acc);
    font: 12px var(--pp-bold);
}

html.pie-premium .pp-shell .pp-trips .pp-tripname b {
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
    font-weight: normal;
}

html.pie-premium .pp-shell .pp-trips .pp-toolbar #pie-custom-dropdown-tr {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
}

/* Trip filters (Advisor / Trip start date / Trip status): one field box each, as the design's
   .fld: small label on top, value under it, remove (bin) icon on the right */
html.pie-premium .pp-shell .pp-trips .trip-list-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter > .form-group {
    margin: 0 !important;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 260px;
    min-height: 54px;
    margin: 0 !important;
    padding: 7px 40px 8px 12px;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating:focus-within {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating > .ffl-label,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating > .form-label {
    position: static;
    order: -1;
    height: auto;
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    transform: none;
    opacity: 1;
    color: var(--pp-muted);
    font: 11.5px/1.3 var(--pp-bold);
}

/* Inner controls drop their own boxes: the field above is the box */
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .bootstrap-select,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .v-select,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .vue-daterange-picker {
    width: 100% !important;
    padding: 0;
    border: 0;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .dropdown-toggle,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .vs__dropdown-toggle,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .reportrange-text {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font: 13.5px/1.4 var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .filter-option-inner-inner {
    color: var(--pp-ink);
    font: 13.5px/1.4 var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .bs-placeholder .filter-option-inner-inner {
    color: var(--pp-ink-3);
}

/* Remove-filter bin, inside the field on the right */
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating > a {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating > a:hover {
    background: var(--pp-hover);
    color: #c0262d;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating > a i {
    padding: 0 !important;
    font-size: 15px;
}

/* template1.css forces a grey border on this select with !important */
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .bootstrap-select {
    min-height: 0;
    border: 0 !important;
}

/* Date range: small grey calendar icon before the dates, no caret */
html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .fa-calendar {
    color: var(--pp-muted);
    font-size: 13px;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .caret {
    display: none;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating {
    height: 54px;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .filter-option,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .filter-option-inner {
    padding: 0 !important;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .dropdown-toggle::after {
    display: none;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .fa-calendar {
    float: none;
    position: static;
    margin: 0;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text span {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .bootstrap-select {
    padding: 0 !important;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating > .ffl-label,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating > .form-label {
    flex: none;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .reportrange-text {
    height: 20px !important;
    line-height: 20px;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .vs__selected-options,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .vs__selected,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .vs__search {
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell .pp-trips img.pp-thumb {
    object-fit: cover;
    background: var(--pp-panel-2);
}

/* Trip start date: "mm/dd/yyyy" placeholder (or the chosen range) with the calendar icon on the right */
html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .pp-date-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .pp-date-text.pp-placeholder {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .pp-ic-cal {
    width: 16px;
    height: 16px;
    color: var(--pp-ink-2);
}

/* A classic rule shifts this span (margin: 8px 0 0 -9px) */
html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .pp-date-text {
    margin: 0 !important;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .reportrange-text .pp-ic-cal {
    position: static !important;
    flex: none;
    margin: 0 0 0 auto !important;
    transform: none;
}

html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .vue-daterange-picker,
html.pie-premium .pp-shell .pp-trips .trip-list-filter .form-floating .reportrange-text {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

/* Sortable headers: keep room on the right for the sort arrow (vue-good-table draws it there) */
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.sortable {
    min-width: 96px;
    padding-right: 30px;
}

/* Column filters: wide enough to read "Search" / a date */
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.filter-th .vgt-input,
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.filter-th .vgt-select {
    min-width: 72px;
    padding: 6px 10px;
}

/* Buttons: regular Interstate with a hairline stroke (medium weight) - Interstate Bold reads too heavy here */
html.pie-premium .pp-shell .pp-btn,
html.pie-premium .pp-shell .pp-trips .pp-toolbar .apply-btn,
html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > button.dropdown-toggle::after {
    font-family: var(--pp-sans);
    -webkit-text-stroke: .35px currentColor;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > button.dropdown-toggle {
    font-family: var(--pp-sans);
}

/* Columns menu: the design's popover list */
html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr > .dropdown-menu {
    width: 280px;
    margin-top: 6px !important;
    padding: 6px;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .dropdown-menu .head {
    display: flex;
    margin: 0;
    padding: 10px 10px 4px;
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .checklist {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .checklist > a.color-pink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px 6px;
    color: var(--pp-acc) !important;
    font-size: 12.5px;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .display-dropdown {
    margin: 0;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-lists {
    align-items: center;
    margin: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-lists:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-lists .custom-checkbox {
    margin: 0;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-lists label {
    color: var(--pp-ink-2);
    font-size: 13.5px;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-lists .pie-icon-move {
    padding: 0 !important;
    color: var(--pp-line-2);
    font-size: 13px;
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-lists:hover .pie-icon-move {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-checkbox .checkmark {
    border: 1.5px solid var(--pp-line-2);
    border-radius: 5px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .pp-trips #pie-custom-dropdown-tr .custom-checkbox input:checked ~ .checkmark {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
}

/* Applied filter chip: no outer frame, just the pink chip */
html.pie-premium .pp-shell .pp-trips .custom-filter-close-btn-wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips .custom-filter-close-btn {
    display: inline-flex;
    margin-left: 4px;
    color: var(--pp-acc);
    cursor: pointer;
}

/* Empty table: keep the message in view (it is centred across the full scroll width otherwise) */
html.pie-premium .pp-shell .pp-trips .vgt-text-disabled {
    position: sticky;
    left: 0;
    width: calc(100vw - var(--pp-side) - 64px);
    max-width: 100%;
    padding: 40px 0;
    color: var(--pp-muted);
    font-size: 13.5px;
    text-align: center;
}

/* Thin, light scrollbar under the table */
html.pie-premium .pp-shell .pp-trips .vgt-responsive::-webkit-scrollbar {
    height: 6px;
}

html.pie-premium .pp-shell .pp-trips .vgt-responsive::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell .pp-trips .vgt-responsive::-webkit-scrollbar-track {
    background: transparent;
}

/* Every table footer: rows per page as a small field with a chevron, not template1's grey pill
   and the stock vgt triangle. Page blocks below and in premium-pages/ refine it. */
html.pie-premium .pp-shell .vgt-wrap__footer .footer__row-count {
    position: relative;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

html.pie-premium .pp-shell .vgt-wrap__footer .footer__row-count__label {
    margin: 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .vgt-wrap__footer .footer__row-count__select {
    height: 30px;
    margin: 0 0 0 8px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--pp-line);
    border-radius: 8px;
    background-color: var(--pp-panel);
    box-shadow: none;
    color: var(--pp-ink);
    font: 12.5px var(--pp-sans);
    cursor: pointer;
}

html.pie-premium .pp-shell .vgt-wrap__footer .footer__row-count__select:focus {
    outline: 0;
    border-color: var(--pp-acc);
}

html.pie-premium .pp-shell .vgt-wrap__footer .footer__row-count::after {
    right: 11px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border: 0;
    border-right: 1.5px solid var(--pp-muted);
    border-bottom: 1.5px solid var(--pp-muted);
    transform: rotate(45deg);
}

/* Footer: rows per page as a small field, pager as quiet buttons */
html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer::before,
html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer::after {
    display: none;
}

html.pie-premium .pp-shell .pp-trips .footer__row-count__label {
    margin: 0 8px 0 0;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips .footer__row-count__select {
    height: 30px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--pp-line);
    border-radius: 8px;
    background-color: var(--pp-panel);
    color: var(--pp-ink);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips .footer__navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

html.pie-premium .pp-shell .pp-trips .footer__navigation__page-info {
    margin-right: 8px;
    color: var(--pp-muted);
    font-size: 12.5px;
}

html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer .footer__navigation__page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer .footer__navigation__page-btn:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer .footer__navigation__page-btn.disabled {
    color: var(--pp-line-2);
}

html.pie-premium .pp-shell .pp-trips .vgt-wrap__footer .chevron {
    transform: scale(.7);
}

/* template1.css fills checked boxes black with !important */
html.pie-premium .pp-shell .pp-trips .custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    border-color: var(--pp-acc) !important;
    background-color: var(--pp-acc) !important;
}

/* Tab counts: the pill grows with the number (4-digit counts spilled out of a fixed width) */
html.pie-premium .pp-shell .pp-trips ul.trip-types li .count {
    width: auto !important;
    max-width: none !important;
    letter-spacing: 0;
}

/* Checkboxes (Columns menu, Lead advisor…): 18px box, tick centred inside the 1.5px border */
html.pie-premium .pp-shell .pp-trips .custom-checkbox .checkmark {
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

html.pie-premium .pp-shell .pp-trips .custom-checkbox .checkmark::after {
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border-width: 0 2px 2px 0;
}

html.pie-premium .pp-shell .pp-trips .custom-checkbox {
    padding-left: 28px;
}

html.pie-premium .pp-shell .pp-trips .custom-checkbox label {
    padding-left: 0;
    line-height: 20px;
}

/* ==========================================================================
   Planner (PremiumPlannerIndex.vue, .pp-planner) — Phase 1: shell, banner, tabs
   ========================================================================== */
html.pie-premium body:has(.pp-planner) {
    background: var(--pp-bg);
}

html.pie-premium .pp-shell.pp-planner {
    font-family: var(--pp-sans);
}

@media (min-width: 916px) {
    /* Brand above the trip side bar; header to its right */
    html.pie-premium .pp-shell.pp-planner .pp-planner-brand {
        position: fixed;
        z-index: 12;
        top: 14px;
        left: 12px;
        width: 264px;
    }

    html.pie-premium .pp-shell.pp-planner:has(.trip-planner-compact) .header-wrapper {
        left: 266px;
        right: 0;
        width: auto;
    }

    html.pie-premium .pp-shell.pp-planner .trip-planner-compact .page-content {
        padding-left: 282px;
        padding-right: 20px;
    }

    html.pie-premium .pp-shell.pp-planner .planner-left-sidebar {
        top: 0;
        left: 0;
        width: 288px;
        height: 100vh;
        padding: 76px 12px 16px;
        background: var(--pp-bg);
        overflow-y: auto;
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .pp-planner-brand {
        display: none;
    }
}

/* ---------- Trip banner: the design's hero card ---------- */
html.pie-premium .pp-shell.pp-planner .trip-header .trip-banner {
    position: relative;
    height: 260px;
    border-radius: var(--pp-r-card);
    overflow: hidden;
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner .trip-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.pie-premium .pp-shell.pp-planner .trip-banner > .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 14, .10) 0%, rgba(10, 10, 14, .20) 40%, rgba(10, 10, 14, .62) 100%);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .banner-wrapper {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto 1fr auto auto auto;
    align-items: center;
    gap: 6px 10px;
    padding: 20px 24px 20px;
    text-align: left;
}

/* Flatten the wrappers so their children can be placed on the grid */
html.pie-premium .pp-shell.pp-planner .trip-banner .banner-wrapper-info,
html.pie-premium .pp-shell.pp-planner .trip-banner .planner-detail-container,
html.pie-premium .pp-shell.pp-planner .trip-banner .planner_detail {
    display: contents;
}

/* Row 1: code chip, status, change cover */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-code {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    margin: 0;
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    font: 12px var(--pp-bold);
    letter-spacing: .06em;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    position: static;
    margin: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover-wrapper {
    grid-row: 1;
    grid-column: 4;
    position: static;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(20, 20, 24, .38);
    color: #fff;
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover .cover-text {
    display: inline;
}

/* Rows 3–4: title and the dates / destination line */
html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name,
html.pie-premium .pp-shell.pp-planner .trip-banner h1.mb-1 {
    grid-row: 3;
    grid-column: 1 / -1;
    margin: 0;
    color: #fff;
    font: 34px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
    text-align: left !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .planner_detail > .d-flex {
    grid-row: 4;
    grid-column: 1 / -1;
    justify-content: flex-start !important;
    gap: 16px;
    color: rgba(255, 255, 255, .92);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date,
html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font: 14px var(--pp-sans);
}

/* Row 5: price + sales / profit / invoiced as glass chips */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip_price {
    grid-row: 5;
    grid-column: 1 / 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(20, 20, 24, .38);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_price::before {
    content: 'PRICE';
    color: rgba(255, 255, 255, .65);
    font: 10.5px var(--pp-bold);
    letter-spacing: .08em;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_price h6 {
    margin: 0;
    color: #fff;
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .itinerary-count {
    grid-row: 5;
    grid-column: 3 / -1;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 0;
    position: static;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .itinerary-count .gray_light_pills {
    margin: 0;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(20, 20, 24, .38);
    color: #fff;
    font: 13px var(--pp-sans);
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .itinerary-count .gray_light_pills span {
    color: #fff;
    font-family: var(--pp-bold);
}

/* ---------- Section tabs (PlannerDetails): white segmented bar ---------- */
html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 4px !important;
    border: 0;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 13.5px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-tabs .nav-link::after {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-tabs .nav-link:hover {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-tabs .nav-link.active {
    background: var(--pp-ink);
    color: var(--pp-bg);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .tabs-section-nav .count-pills {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11px/18px var(--pp-bold);
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-link.active .count-pills {
    background: var(--pp-acc);
    color: #fff;
}

/* Banner fixes: title left-aligned, tab panel no longer overlapping the banner, cover button sized to its label */
html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name {
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name .trip_name_id {
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .trip-banner h1 .planner-edit-icon i {
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view.new-planner {
    margin-top: 16px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
    width: auto !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover .cover-text {
    position: static;
    display: inline;
    opacity: 1;
    visibility: visible;
    transform: none;
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover i {
    color: #fff;
    font-size: 15px;
}

/* planner.css paints the camera a solid white circle on hover, which hides the white glyph */
html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover i,
html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover i:hover {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    line-height: 1;
}

/* Status: a compact pill (agency colours kept) */
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select,
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle {
    width: auto !important;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle {
    height: 30px;
    padding: 0 30px 0 12px;
    border: 0;
    border-radius: 8px;
    font: 12.5px/30px var(--pp-bold);
    letter-spacing: .03em;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .trip_info_btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(20, 20, 24, .38);
    color: #fff;
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name {
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover-wrapper {
    width: auto !important;
    justify-self: end;
}

html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-tabs .nav-link,
html.pie-premium .pp-shell.pp-planner .tabs-section-nav .nav-tabs .nav-link.active {
    border-bottom: 0 !important;
}

/* Trip content: the design's outlined button */
html.pie-premium .pp-shell.pp-planner .tabs-section .drag-component {
    margin-left: 12px;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .tabs-section .drag-component .drag-toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
    -webkit-text-stroke: .35px currentColor;
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .tabs-section .drag-component .drag-toggle-text:hover {
    border-color: var(--pp-ink-3);
}

/* ---------- Trip side bar (TripSidebar.vue): the design's side bar skin ---------- */
html.pie-premium .pp-shell.pp-planner .planner-left-sidebar,
html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .left-sidebar-wrapper,
html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .custom-scroll {
    background: var(--pp-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line-2) transparent;
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .custom-scroll::-webkit-scrollbar {
    width: 6px;
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .custom-scroll::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--pp-ink) !important;
    color: var(--pp-bg);
    font: 14px var(--pp-bold);
    text-transform: none;
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .create-btn i {
    font-size: 15px;
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .trips-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    margin: 0 0 12px !important;
    padding: 0;
    border: 1px solid var(--pp-line-2);
    border-radius: 12px;
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .trips-btn:hover {
    border-color: var(--pp-acc-line);
    color: var(--pp-acc);
}

/* Sections (Client itineraries, Checklist, Reports, Collaborators…): white rounded cards */
html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .dropdown_pie_dashboard {
    margin: 0 0 10px !important;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .dropdown_pie_dashboard > ul > li {
    border: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .toggle-sidebar {
    background: var(--pp-bg);
}

html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .toggle-sidebar a i {
    color: var(--pp-ink-3);
    font-size: 18px;
}

/* ==========================================================================
   Planner — Itinerary tab and Trip content panel
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .planner-details-view {
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-planner .reservation-header {
    color: var(--pp-ink);
    font: 22px var(--pp-bold);
    letter-spacing: -.01em;
}

/* Master itinerary description */
html.pie-premium .pp-shell.pp-planner .trip_desc_sec,
html.pie-premium .pp-shell.pp-planner .planner-booking-list.accordion-item {
    margin-bottom: 12px !important;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: visible;
}

html.pie-premium .pp-shell.pp-planner .trip_desc_sec .daily-calendar-block-wrapper {
    padding: 16px 20px;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .trip_desc_sec h5 {
    padding: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .add-link,
html.pie-premium .pp-shell.pp-planner .planner-details-view .add-link span {
    color: var(--pp-acc);
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .add-link i {
    color: var(--pp-acc);
}

/* Day by day / Reservations */
html.pie-premium .pp-shell.pp-planner .view_day_date ul {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border-radius: 10px;
    background: var(--pp-panel-2);
    list-style: none;
}

html.pie-premium .pp-shell.pp-planner .view_day_date ul li {
    margin: 0;
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 13px/18px var(--pp-sans);
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .view_day_date ul li.active {
    background: var(--pp-ink);
    color: var(--pp-bg);
    font-family: var(--pp-bold);
}

/* Email / Sabre import: accent links + compact status chips */
html.pie-premium .pp-shell.pp-planner .itinerary-booking-code .import.gray_light_pills {
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: var(--pp-acc);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .itinerary-booking-code .booking-import-status.gray_light_pills {
    padding: 6px 10px !important;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

/* Toolbar: Add reservation categories / Move content, Reservations / Informations, Expand switches */
html.pie-premium .pp-shell.pp-planner .trip-action-pills .white_light_pills {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pp-acc);
    font: 13px var(--pp-sans);
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-information-filter-label,
html.pie-premium .pp-shell.pp-planner .view_day_date p {
    color: var(--pp-ink-3);
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .custom-checkbox .checkmark,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .custom-checkbox .checkmark {
    border: 1.5px solid var(--pp-line-2);
    border-radius: 5px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .custom-checkbox input[type="checkbox"]:checked ~ .checkmark,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    border-color: var(--pp-acc) !important;
    background-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle input + label::before,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle input + label::before {
    top: 0;
    width: 34px;
    height: 20px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle input + label::after,
html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle input + label:hover::after,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle input + label::after,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle input + label:hover::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);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle input:checked + label::before,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle input:checked + label::before {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle input:checked + label::after,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle input:checked + label::after {
    left: 17px;
    background: #fff;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle.on-off-switch input + label,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle.on-off-switch input + label {
    width: 34px;
    height: 20px;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle.on-off-switch .left-off,
html.pie-premium .pp-shell.pp-planner .planner-details-view .checkbox-toggle.on-off-switch .right-on,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle.on-off-switch .left-off,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .checkbox-toggle.on-off-switch .right-on {
    display: none;
}

/* Day rows: Information / Pre / Day N */
html.pie-premium .pp-shell.pp-planner .planner-booking-list .summary-day-section {
    padding: 14px 18px;
    border: 0;
    border-radius: 16px;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .trip-date.information-title,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .week-days .trip-date {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .day-count {
    min-width: 0;
    height: auto;
    padding: 0 4px 0 0;
    border-radius: 0;
    background: transparent;
    color: var(--pp-acc);
    font: 17px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .booking_title {
    color: var(--pp-ink-2);
    font: 14px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list input.day_title {
    border: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .pre-date-count,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .day-date-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11px/18px var(--pp-bold);
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .tp-shop-day-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .tp-shop-day-btn i,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .tp-shop-day-btn__label {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .add-btn i,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .add_hotel,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .main_event_day_meals_options i {
    color: var(--pp-ink-3);
}

/* Reservation cards inside a day */
html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail.booked_detail_planner {
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail.booked_detail_planner:hover {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .hotel-title,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .planner-title {
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .booking-status {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font: 12px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .price-action {
    color: var(--pp-ink-2);
    font-size: 13px;
}

/* ---------- Trip content panel (right) ---------- */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside {
    padding: 14px;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) {
    display: flex;
    gap: 2px;
    margin: 0 0 10px;
    padding: 3px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.active {
    background: var(--pp-panel);
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.active i {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .right-sidebar-title {
    padding: 8px 0 12px !important;
    color: var(--pp-muted) !important;
    font-size: 12.5px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header {
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header:hover {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head {
    align-items: center;
    padding: 10px 12px;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head h4 {
    align-items: center;
    gap: 6px;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head [class*="pie-icon"] {
    color: var(--pp-ink-3);
    font-size: 16px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head .count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--pp-ink);
    color: #fff;
    font: 11px/18px var(--pp-bold);
    text-align: center;
}

/* template1.css paints these black with longer selectors */
html.pie-premium .pp-shell.pp-planner .planner-booking-list .day-count {
    background: transparent !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .pre-date-count,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .day-date-count {
    background-color: var(--pp-panel-2) !important;
    color: var(--pp-ink-3) !important;
}

/* Cancel Trip / Archive Trip: the design's secondary and primary pill buttons */
html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray-outline.btn-small,
html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray.btn-small {
    height: 40px;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font: 13.5px var(--pp-sans);
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0;
    /* common.css capitalizes every .btn with !important; the design writes "Cancel trip" */
    text-transform: none !important;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray-outline.btn-small {
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray-outline.btn-small:hover {
    border: 0;
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray.btn-small {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray.btn-small:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)), color-mix(in srgb, var(--pp-acc) 88%, #000);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray-outline.btn-small::after,
html.pie-premium .pp-shell.pp-planner .planner-details-view .btn-gray.btn-small::after {
    content: none;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .planner-reservation {
    padding: 0;
}

/* Day labels line up on the left (Information / Pre used a fixed, centred box) */
html.pie-premium .pp-shell.pp-planner .planner-booking-list .week-days,
html.pie-premium .pp-shell.pp-planner .planner-booking-list .trip-date {
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Empty day: no tall blank area under the header */
html.pie-premium .pp-shell.pp-planner .planner-booking-list .accordion-collapse > .mt-3 {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .planner-cards-empty {
    min-height: 0;
    padding: 0 18px 12px;
}

/* Reservation cards: white card, light chips (type, dates, price), quiet "Mark as Booked" */
html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail.booked_detail_planner {
    background-color: var(--pp-panel) !important;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail .planner-booking-info {
    border-radius: 8px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail .planner-booking-status-btn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink);
    font: 12.5px/30px var(--pp-sans);
    -webkit-text-stroke: .3px currentColor;
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail .planner-booking-status-btn:hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail .price-action {
    border: 0 !important;
    border-radius: 8px;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .planner-booking-list .travel_detail.overnight_trip {
    border: 1px dashed var(--pp-line-2) !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3);
}

/* ==========================================================================
   Planner — the other section tabs (Trip information, Travelers, Booking flow
   confirmations, Accounting, Received forms, Trip photos, Documents, Automated
   messages, Activity Log): the design's quiet panels, fields, buttons and tables.
   Each tab root is listed in :is(), so the Itinerary tab keeps its own rules.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .booking-confirmation-tab, .trip-accounting-tab, .received-forms-tab, .trip-photos-tab, .trip-documents-tab, .automated-messages-tab, .trip-activity-log-tab) {
    padding-top: 8px;
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

/* Titles */
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .received-forms-tab) :is(.head-title.trip-tittle, .section-title, .received-section),
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .activity-log-title,
html.pie-premium .pp-shell.pp-planner .trip-documents-tab > span:first-child {
    margin-bottom: 4px;
    color: var(--pp-ink);
    font: 17px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details :is(.head-title, .planer-main-info, .pop-head, h2.pop-head),
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab :is(.fw-bold, .fs-6.mb-2) {
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip_profile_page .head-title.trip-tittle {
    font-size: 17px;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab, .trip-photos-tab) .small-text,
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .logo-text {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details hr,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab hr {
    border-color: var(--pp-line);
    opacity: 1;
}

/* Trip code: the design's quiet code chip instead of the yellow block */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-info-code {
    height: 28px;
    padding: 0 10px !important;
    border-radius: 7px;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3);
    font: 13px var(--pp-bold);
    letter-spacing: .03em;
}

/* Fields: the design's .fld (10px radius, light line, small muted label) */
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab, .trip-activity-log-tab) .form-control:not(.trip-info-code):not(.tokenfield textarea),
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .vs__dropdown-toggle,
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_wrapper .form-control {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    color: var(--pp-ink);
    font-family: var(--pp-sans);
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab, .trip-activity-log-tab) .form-control:focus,
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_wrapper .form-control:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) :is(.form-control.disabled, .form-control:disabled, .form-control[readonly]:not(.vdp-datepicker input)) {
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3);
}

/* bootstrap-select draws its own box inside the bordered .form-control: keep one border */
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .bootstrap-select.form-control {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .bootstrap-select > .dropdown-toggle {
    border: 0 !important;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab, .trip-activity-log-tab) .ffl-label {
    color: var(--pp-muted);
    font-family: var(--pp-bold);
    font-size: 11.5px;
}

/* Radios and checkboxes in the accent colour */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .custome-radiobtn .checkmark {
    border: 1.5px solid var(--pp-line-2) !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .custome-radiobtn input:checked ~ .checkmark {
    border-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .custome-radiobtn .checkmark::after {
    background: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    border-color: var(--pp-acc);
    background: var(--pp-acc);
}

/* Accordions (Client Request Information, Add deposits or installments) */
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .accordion-item {
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .accordion-button {
    background: transparent;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    box-shadow: none;
}

/* Rich-text editors (Trip summary, Invoice notes) */
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .ck.ck-editor__top .ck-toolbar {
    border: 1px solid var(--pp-line-2) !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .ck.ck-editor__main > .ck-editor__editable {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab) .ck.ck-editor__main > .ck-editor__editable.ck-focused {
    border-color: var(--pp-acc) !important;
}

/* Buttons: the design's .btn (40px, 10px radius) — primary filled, the rest outlined */
html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab, .automated-messages-tab) .btn.btn-primary:not(.planner-travelers-info .btn),
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .modal-footer .btn,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .btn-gray.bg-dark-gray,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .custom-dropdown > .dropdown-toggle,
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .sync-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-width: 0;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font: 13.5px var(--pp-sans) !important;
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .trip-accounting-tab, .automated-messages-tab) .btn.btn-primary:not(.planner-travelers-info .btn),
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .modal-footer .btn.btn-primary {
    border: 1px solid var(--pp-acc) !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .modal-footer .btn.btn-primary-outline,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .btn-gray.bg-dark-gray,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .custom-dropdown > .dropdown-toggle,
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .sync-refresh-btn {
    border: 1px solid var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .modal-footer .btn.btn-primary-outline:hover,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .btn-gray.bg-dark-gray:hover,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .custom-dropdown > .dropdown-toggle:hover,
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .sync-refresh-btn:hover {
    border-color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .modal-footer {
    gap: 8px;
    border-top: 1px solid var(--pp-line);
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .sync-refresh-btn i,
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .sync-refresh-btn svg {
    color: var(--pp-acc);
}

/* Small links (+ Add Traveler, + Add airport, Refresh) */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details :is(.add-traveler, .add-link, .reload-trip-traveler),
html.pie-premium .pp-shell.pp-planner .received-forms-tab .received-forms > :not(.full-screen) {
    color: var(--pp-acc);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner :is(.traveler-tab-details, .received-forms-tab, .automated-messages-tab, .trip-accounting-tab) :is(.full-screen, .pie-icon-thin-0142_rotate_sync, .pie-icon-share) {
    color: var(--pp-ink-3);
}

/* Travelers: counts as pills, actions as small outlined buttons */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .noof-traveler {
    height: 32px;
    min-width: 36px;
    padding: 0 10px !important;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 13px/32px var(--pp-bold);
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .noof-traveler.traveler-number {
    background: var(--pp-ink);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-export-filter-select > .dropdown-toggle {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .planner-travelers-info :is(.import-travelers, .btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-right: 6px;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 12.5px var(--pp-sans) !important;
    -webkit-text-stroke: .3px currentColor;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .planner-travelers-info :is(.import-travelers, .btn):hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .planner-travelers-info :is(.import-travelers, .btn) span {
    color: inherit;
    font: inherit;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .planner-travelers-info :is(.import-travelers, .btn) i {
    color: var(--pp-acc);
}

/* Tables: the design's .gtable (bold muted headers, airy 13.5px rows, light lines) */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table > thead > tr > th,
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) table.table > thead > tr > th,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-table thead th {
    padding: 12px 10px !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold) !important;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: bottom;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table > tbody > tr > td,
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) table.table > tbody > tr > td,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-table tbody td {
    padding: 10px !important;
    border-bottom: 1px solid var(--pp-line) !important;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table > tbody > tr:hover > td,
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) table.table > tbody > tr:not(:has(.dataTables_empty)):hover > td,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-table tbody tr:hover td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) td.dataTables_empty,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-text-disabled {
    padding: 28px 10px !important;
    border-bottom: 0 !important;
    color: var(--pp-muted) !important;
    font: 13.5px var(--pp-sans) !important;
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table .vs__dropdown-toggle {
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--pp-panel-2) !important;
}

/* DataTables tabs: table, search and paging in one bordered card */
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_wrapper {
    clear: both;
    margin-top: 6px;
    padding: 14px 16px 10px;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) :is(.dataTables_length, .dataTables_filter) label {
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) :is(.dataTables_length select, .dataTables_filter input) {
    height: 36px !important;
    background-color: var(--pp-panel) !important;
    font-size: 13.5px !important;
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_info {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_paginate .pagination li > a {
    min-width: 30px;
    height: 30px;
    margin: 0 2px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 13px/30px var(--pp-sans);
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_paginate .pagination li.active > a {
    background: var(--pp-ink) !important;
    color: #fff !important;
}

/* Accounting: each block is a bordered card */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > .border.rounded {
    padding: 18px 20px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 16px !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > ul {
    color: var(--pp-ink-2);
    font-size: 13.5px;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-wrap .vgt-global-search {
    padding: 8px 10px;
    border: 1px solid var(--pp-line) !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0;
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-wrap .vgt-input,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-wrap .vgt-select {
    height: 34px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-wrap .vgt-table {
    border: 1px solid var(--pp-line) !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-wrap .vgt-table.striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-wrap__footer {
    padding: 10px 14px !important;
    border: 1px solid var(--pp-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .vgt-wrap__footer :is(.footer__row-count__label, .footer__row-count__select, .footer__navigation__page-info, .footer__navigation__page-btn) {
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .invoice-totals .form-control {
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold) !important;
}

/* Trip photos and Documents: the design's dashed drop zone */
html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .documents_upload {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .vue-dropzone.dropzone {
    border: 1.5px dashed var(--pp-line-2) !important;
    border-radius: 16px !important;
    background: var(--pp-panel-2) !important;
    transition: border-color .15s, background .15s;
}

html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .vue-dropzone.dropzone:hover {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .dz-message,
html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .dz-message :not(i) {
    color: var(--pp-ink-3) !important;
    font-family: var(--pp-sans) !important;
    font-size: 13.5px !important;
}

html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .dz-message i {
    color: var(--pp-acc) !important;
    font-size: 26px !important;
}

html.pie-premium .pp-shell.pp-planner .trip-documents-tab .crm_photos > [class*="col-"] {
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .trip-documents-tab .upload-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--pp-line);
    background: var(--pp-panel) !important;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .trip-documents-tab .upload-text.visible-text {
    border-color: var(--pp-acc-line);
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-documents-tab .upload-text i {
    color: inherit !important;
}

/* Activity Log: same card and field language */
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .activity-filter-bar {
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab :is(.filter-search-input, .filter-multiselect-trigger) {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel) !important;
    color: var(--pp-ink);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .activity-empty-state {
    border: 1.5px dashed var(--pp-line-2);
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .empty-title {
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .empty-description,
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .sync-label {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

/* Travelers table has 16 columns: keep the classic cell widths so it fits the panel */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table > thead > tr > th,
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-table > tbody > tr > td {
    padding: 10px 5px !important;
    font-size: 12.5px;
}

/* Export: bootstrap-select wrapper draws the box, its toggle stays flat */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-export-filter-select > .dropdown-toggle {
    border: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-export-filter-select .filter-option {
    display: flex;
    align-items: center;
    height: 100%;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip-traveler-export-filter-select .filter-option-inner-inner {
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
    text-transform: none;
}

/* ==========================================================================
   Planner — reservation popup (#bookingPopupModal): the design's quick popup (.qpop)
   ========================================================================== */
html.pie-premium body:has(.pp-planner) .modal-backdrop {
    background-color: rgb(10, 10, 14);
}

html.pie-premium body:has(.pp-planner) .modal-backdrop.show {
    opacity: .36;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-header {
    align-items: center;
    gap: 12px;
    padding: 20px 22px 6px;
    border: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-title {
    color: var(--pp-ink);
    font: 20px var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-help-videos {
    margin-left: auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-help-videos .head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-help-videos .head i {
    padding: 0 !important;
    font-size: 15px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-header .btn-close {
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-header .btn-close:hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

/* Category + status row, then a line, as in the design */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body {
    padding: 0;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-header {
    margin: 0 !important;
    padding: 4px 22px 12px !important;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-sub-category-dropdown > .btn.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 4px;
    border: 0;
    border-bottom: 2px solid var(--pp-ink) !important;
    border-radius: 0;
    background: transparent;
    color: var(--pp-ink) !important;
    font: 14px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-sub-category-dropdown > .btn.dropdown-toggle:hover {
    border-color: var(--pp-acc) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .seach-location-wrapper {
    padding: 16px 22px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .seach-location-wrapper > .search-location {
    margin: 0 !important;
}

/* Fields: the design's .qf */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .form-control,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .vs__dropdown-toggle,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .vue__time-picker input.display-time,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .bootstrap-select.form-control {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    color: var(--pp-ink);
    font-family: var(--pp-sans);
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .form-control:focus,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .vs--open .vs__dropdown-toggle,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .vue__time-picker input.display-time:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body :is(.form-control:disabled, .form-control.disabled) {
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .bootstrap-select > .dropdown-toggle {
    border: 0 !important;
    font-family: var(--pp-sans);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .ffl-label,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .planit-select-label > label {
    color: var(--pp-muted);
    font-family: var(--pp-bold);
    font-size: 11.5px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .quick-travelers > label,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .booking-inline-view-header > label {
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .quick-travelers > label i {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .add-link {
    color: var(--pp-acc);
    font: 12.5px var(--pp-bold);
}

/* Footer: library radios and Reset on the left, Close / Save on the right */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--pp-line) !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer .pie_radio_btn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-right: auto;
    float: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer .popup-footer {
    display: flex;
    gap: 10px;
    float: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .custome-radiobtn {
    margin: 0 !important;
    padding-left: 26px;
    color: var(--pp-ink-2);
    font: 13.5px/20px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .custome-radiobtn .checkmark {
    top: 1px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--pp-line-2) !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .custome-radiobtn input[type="radio"]:checked ~ .checkmark {
    border: 5px solid var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .custome-radiobtn .checkmark::after {
    display: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .selection-reset {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    color: var(--pp-acc);
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer :is(.btn-blue, .btn-blue-outline) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font: 13.5px var(--pp-sans) !important;
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer .btn-blue-outline {
    border: 1px solid var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer .btn-blue-outline:hover {
    border-color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer .btn-blue {
    border: 1px solid var(--pp-acc) !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
}

/* Full popup ("View More"): the design's big popup — numbered section nav, section title, grouped cards */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-customisation-button {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pp-acc-line) !important;
    border-radius: 10px;
    background: var(--pp-panel) !important;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .bookingform-popup-right-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab {
    padding: 16px 22px 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .nav-pills {
    counter-reset: pp-sec;
    gap: 2px;
    padding: 0 10px 0 0;
    border-right: 1px solid var(--pp-line);
    background: transparent !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .nav-pills .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent !important;
    color: var(--pp-ink-2) !important;
    font: 13.5px/1.3 var(--pp-sans);
    counter-increment: pp-sec;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .nav-pills .nav-link::before {
    content: counter(pp-sec);
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .nav-pills .nav-link:hover {
    background: var(--pp-hover) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .nav-pills .nav-link.active {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .nav-pills .nav-link.active::before {
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .tab-title {
    color: var(--pp-ink);
    font: 18px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .price-section-vue .tab-title,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .multiple-price-section-vue > .bold {
    font-size: 15px;
}

/* One Way / Round Trip / Multi Destination: loose pills, the chosen one dark (as the design) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type li {
    margin: 0;
    padding: 8px 16px;
    border: 0 !important;
    border-radius: 999px;
    background: transparent;
    list-style: none;
    cursor: pointer;
    transition: background .15s;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type li:not(.active):hover {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type li .booking-sub-category {
    padding: 0;
    border: 0 !important;
    color: var(--pp-ink-3) !important;
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type li::after,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type li .booking-sub-category::after {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type li.active {
    background: var(--pp-ink);
    box-shadow: 0 6px 14px -8px rgba(20, 24, 20, .55);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal ul.route_type li.active .booking-sub-category {
    color: #fff !important;
    font-family: var(--pp-bold);
}

/* Section heads and grouped blocks (Booking, Transportation 1, Rooms, …) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-header .di-flight-heading-text {
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-header i {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .card.accordion-item {
    overflow: hidden;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .card.accordion-item > .card-header {
    padding: 14px 16px;
    border: 0;
    background: transparent !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .card.accordion-item > .card-header .accordion-button {
    padding: 0;
    background: transparent !important;
    color: var(--pp-ink);
    font: 14.5px var(--pp-bold);
    box-shadow: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .card.accordion-item > .card-header .bold {
    font-family: var(--pp-bold);
    font-weight: 400;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .btn-outline-primary.btn-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 12.5px var(--pp-sans);
    -webkit-text-stroke: .3px currentColor;
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .btn-outline-primary.btn-small i {
    color: var(--pp-acc);
}

/* Editors, tags and drop zones inside the popup */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ck.ck-editor__top .ck-toolbar,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .ck.ck-editor__top .ck-toolbar {
    border: 1px solid var(--pp-line-2) !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ck.ck-editor__main > .ck-editor__editable,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .ck.ck-editor__main > .ck-editor__editable {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .multiselect__tags {
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vue-dropzone.dropzone {
    border: 1.5px dashed var(--pp-line-2) !important;
    border-radius: 12px !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vue-dropzone.dropzone:hover {
    border-color: var(--pp-acc-line) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .dz-message i {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .bookingform-popup-title {
    color: var(--pp-ink);
    font: 18px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-customisation-button {
    white-space: nowrap;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .form-group > label:not(.ffl-label),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .client_iframe_doc,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .itinerary-price-box label.bold {
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-body .upload-text {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

/* Price calculator: the design's grey group card instead of the blue box */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .itinerary-price-box {
    border-radius: 16px;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .itinerary-price-box .vertical-divider {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .itinerary-price-box :is(.small-text, .base_fare_currency) {
    color: var(--pp-muted);
    font-size: 12px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .itinerary-price-box .color-blue {
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .itinerary-price-box .custome-radiobtn {
    font-size: 13px;
}

/* Customize Reservation drawer (opened from "Custom Settings") */
html.pie-premium .pp-shell.pp-planner .main_input_select .main_input_select_wrapper {
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2);
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .input_select_bg_layer {
    background: rgba(10, 10, 14, .36);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .input-select-title {
    color: var(--pp-ink);
    font: 17px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell.pp-planner .main_input_select .close-input-select {
    color: var(--pp-ink-3);
    font-size: 16px;
}

html.pie-premium .pp-shell.pp-planner .main_input_select .section-title {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pp-line) !important;
    color: var(--pp-muted);
    font: 11px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner .main_input_select input[type="checkbox"] {
    accent-color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .main_input_select :is(.label-text, .input-option-label) {
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .accordion-section {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .accordion-section .accordion-header {
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .main_input_select .accordion-section:hover {
    border-color: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .accordion-title {
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .accordion-icon {
    color: var(--pp-ink-3);
    font-size: 11px;
}

html.pie-premium .pp-shell.pp-planner .main_input_select .required-indicator {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .proposal-subsection-heading {
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .action-buttons {
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .main_input_select .action-buttons .btn-primary {
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--pp-acc) !important;
    border-radius: 10px !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
    font: 13.5px var(--pp-sans) !important;
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell.pp-planner .main_input_select .action-buttons .color-blue {
    border: 0;
    background: transparent;
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold);
}

/* Hotel: the picked hotel card, Rooms block and room rows */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .hotel_location_detail {
    overflow: hidden;
    border: 1px solid var(--pp-line) !important;
    border-radius: 16px !important;
}

/* Picked place (PlaceBoxNew.vue): photo on the left, details stacked beside it with
   "+ Add to supplier" as a one-line link under them, the preferred radio and the bin as one
   group top-right (they were 15px apart and the link wrapped in a 90px column) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel-image {
    flex: none;
    align-self: stretch;
    width: 140px !important;
    height: auto !important;
    min-height: 120px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel-image :is(.hotel-image-carousel, .carousel-inner, .carousel-item) {
    height: 100%;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel-image .hotel-carousel-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel-info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel-info > .row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    height: 100%;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel-info > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel_block {
    display: grid;
    gap: 3px;
    padding-right: 64px;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel_block > li {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel_block > li.hotel-name {
    margin-bottom: 2px;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .hotel_block a {
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .suppliers {
    align-self: flex-start !important;
    margin-top: auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .suppliers .btnaddtosuppliers {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold);
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .suppliers .btnaddtosuppliers:hover {
    background: color-mix(in srgb, var(--pp-acc) 14%, #fff);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .suppliers p {
    justify-content: flex-start;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .custome-radiobtn {
    top: 18px !important;
    right: 48px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .remove_hotel {
    top: 12px !important;
    right: 12px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .remove_hotel > li:first-child {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .new-place-box .remove_hotel > li:first-child:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-rooms {
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-rooms .ic-receipt-item {
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-rooms-foot {
    border-color: var(--pp-line-2) !important;
}

/* ==========================================================================
   Planner — every other popup (Add Traveler, Create Client Invoice, convenience fee, …):
   one shared skin on the Bootstrap modal parts. #bookingPopupModal keeps its own rules above.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .modal .modal-content {
    border: 0;
    border-radius: 22px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-planner .modal .modal-header {
    align-items: center;
    gap: 12px;
    padding: 20px 22px 10px;
    border: 0;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-title {
    color: var(--pp-ink);
    font: 20px var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-header .btn-close,
html.pie-premium .pp-shell.pp-planner .modal .modal-header .close {
    width: 38px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-header :is(.btn-close, .close):hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body {
    padding: 12px 22px 18px;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .form-control,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .vs__dropdown-toggle {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    color: var(--pp-ink);
    font-family: var(--pp-sans);
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .form-control:focus,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .vs--open .vs__dropdown-toggle {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .ffl-label {
    color: var(--pp-muted);
    font-family: var(--pp-bold);
    font-size: 11.5px;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-footer {
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--pp-line) !important;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-footer > * {
    margin: 0;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-width: 0;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font: 13.5px var(--pp-sans) !important;
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-footer :is(.btn-primary, .btn-blue, .individual-save) {
    border: 1px solid var(--pp-acc) !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-footer :is(.btn-primary-outline, .btn-blue-outline, .btn-outline-primary, .btn-secondary, .btn-gray-outline, .btn-light) {
    border: 1px solid var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-footer :is(.btn-primary-outline, .btn-blue-outline, .btn-outline-primary, .btn-secondary, .btn-gray-outline, .btn-light):hover {
    border-color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body :is(.head-title, h2.pop-head, h5.pop-head) {
    color: var(--pp-ink);
    font: 16px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .head-title i {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .bootstrap-select > .dropdown-toggle,
html.pie-premium .pp-shell.pp-planner .modal .modal-body .bootstrap-select .filter-option-inner-inner {
    color: var(--pp-ink);
    font-family: var(--pp-sans);
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .bootstrap-select > .dropdown-toggle {
    border: 0 !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .multiselect__tags {
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .add-link {
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .small-text {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body hr {
    border-color: var(--pp-line);
    opacity: 1;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .accordion-item {
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .accordion-button {
    background: transparent;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .custome-radiobtn .checkmark {
    border: 1.5px solid var(--pp-line-2) !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .custome-radiobtn input[type="radio"]:checked ~ .checkmark {
    border: 5px solid var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-body .custome-radiobtn .checkmark::after {
    display: none !important;
}

/* Headers that use a bare h5 instead of .modal-title, and header links */
html.pie-premium .pp-shell.pp-planner .modal .modal-header > h5 {
    margin: 0;
    color: var(--pp-ink);
    font: 20px var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell.pp-planner .modal .modal-header a {
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .modal .modal-header > div:last-child {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* ==========================================================================
   Planner — summary tiles under the banner (PremiumPlannerTiles.vue): the design's .pl-tiles.
   A tile opens the matching planner tab or trip side bar section; "More" folds the rest.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-tilesw {
    margin: 14px 0 0;
    container-type: inline-size;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-tiles-more {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

@container (max-width: 900px) {
    html.pie-premium .pp-shell.pp-planner .pp-tiles-more {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (max-width: 560px) {
    html.pie-premium .pp-shell.pp-planner .pp-tiles,
    html.pie-premium .pp-shell.pp-planner .pp-tiles-more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

html.pie-premium .pp-shell.pp-planner .pp-tl {
    display: grid;
    align-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 92px;
    padding: 12px 14px;
    border: 0;
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    color: var(--pp-ink-2);
    text-align: left;
    transition: box-shadow .15s, transform .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-tl:hover {
    transform: translateY(-1px);
    box-shadow: var(--pp-shadow), 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .pp-tl.on {
    box-shadow: var(--pp-shadow), 0 0 0 2px var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-tl:focus-visible {
    outline: 2px solid var(--pp-acc);
    outline-offset: 2px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl > small {
    display: block;
    overflow: hidden;
    color: var(--pp-ink-3);
    font: 12px var(--pp-sans);
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell.pp-planner .pp-tl > small .pp-ic {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -3px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-tl > div b {
    color: var(--pp-ink);
    font: 20px/1.15 var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell.pp-planner .pp-tl > div .pp-ok {
    color: var(--pp-ok);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-more > div .pp-ic {
    width: 15px;
    height: 15px;
    margin-left: auto;
    color: var(--pp-muted);
    transition: transform .2s;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-more.on > div .pp-ic {
    transform: rotate(180deg);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-more.on {
    box-shadow: var(--pp-shadow), 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .pp-tl.sm {
    gap: 4px;
    min-height: 0;
    padding: 10px 12px;
    border-radius: 14px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.sm > div b {
    font-size: 15px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.sm > div > span:only-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Traveler initials, overlapping */
html.pie-premium .pp-shell.pp-planner .pp-tl-avs {
    display: flex;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-avs .pp-av {
    width: 28px;
    height: 28px;
    margin-left: -6px;
    font-size: 10px;
    font-style: normal;
    box-shadow: 0 0 0 2px var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-avs .pp-av:first-child {
    margin-left: 0;
}

/* ==========================================================================
   Planner — money strip (PremiumFinanceStrip.vue): the design's closed line on the banner
   (Price · Sales · Profit) that drops the full strip (.pl-stats) under the banner.
   The classic price and Sales / Profit / Invoiced pills keep their space but are hidden.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip_price,
html.pie-premium .pp-shell.pp-planner .trip-banner .itinerary-count {
    visibility: hidden;
    pointer-events: none;
}

html.pie-premium .pp-shell.pp-planner .pp-fin {
    position: relative;
    z-index: 3;
    font-family: var(--pp-sans);
}

/* From 641px the money line is lifted onto the banner with a negative top margin and a matching
   bottom margin. Without its own formatting context those margins escaped the (zero-height) host and
   the bottom one pushed the tiles down (a 76px gap under the banner at 641–1100px). */
@media (min-width: 641px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin {
        display: flow-root;
    }
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line {
    display: flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    min-height: 38px;
    margin: 12px 0 0;
    padding: 6px 8px 6px 2px;
    border: 0;
    border-radius: 12px;
    background: var(--pp-panel-2);
    box-shadow: 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
    font-variant-numeric: tabular-nums;
    transition: background .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line:disabled {
    cursor: default;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 12px;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line > span + span {
    border-left: 1px solid var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line small {
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line b {
    color: var(--pp-ink);
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line b.pos {
    color: var(--pp-ok);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line b.neg {
    color: #c0262d;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line em {
    padding: 1px 7px;
    border-radius: 999px;
    background: #e7f5ee;
    color: var(--pp-ok);
    font-size: 11px;
    font-style: normal;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line > .pp-ic {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    transition: transform .2s;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-line.on > .pp-ic {
    transform: rotate(180deg);
}

/* Desktop: the closed line sits on the banner, where the classic pills were */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-line {
        margin: -58px 0 34px 24px;
        background: rgba(255, 255, 255, .14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
        color: #fff;
        backdrop-filter: blur(10px);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line:not(:disabled):hover,
    html.pie-premium .pp-shell.pp-planner .pp-fin-line.on {
        background: rgba(255, 255, 255, .24);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line > span + span {
        border-left-color: rgba(255, 255, 255, .25);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line b {
        color: inherit;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line b.pos {
        color: #8ee6b8;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line b.neg {
        color: #ffb4b7;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line em {
        background: rgba(255, 255, 255, .18);
        color: inherit;
    }
}

/* Open: the full money strip */
html.pie-premium .pp-shell.pp-planner .pp-fin-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 14px 0 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--pp-line);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-stat {
    display: grid;
    flex: 1 1 170px;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-stat.lead {
    flex: 1.5 1 250px;
    background: linear-gradient(135deg, var(--pp-acc-soft), var(--pp-panel));
}

html.pie-premium .pp-shell.pp-planner .pp-fin-stat small {
    color: var(--pp-muted);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-stat b {
    color: var(--pp-ink);
    font: 18px var(--pp-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-stat b.pos {
    color: var(--pp-ok);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-stat b.neg {
    color: #c0262d;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--pp-muted);
    font-size: 12px;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-basis {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--pp-acc);
    font-size: 11.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-basis select {
    height: 24px;
    padding: 0 22px 0 9px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-acc);
    font: 11.5px var(--pp-sans);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-basis .pp-ic {
    position: absolute;
    right: 6px;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-val {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 22px var(--pp-bold);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-val .pp-ic {
    width: 15px;
    height: 15px;
    color: var(--pp-acc);
    opacity: 0;
    transition: opacity .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-val:hover .pp-ic,
html.pie-premium .pp-shell.pp-planner .pp-fin-val:focus-visible .pp-ic {
    opacity: 1;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-edit {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    height: 36px;
    padding: 0 4px 0 10px;
    border-radius: 11px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 2px var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-edit > span {
    color: var(--pp-muted);
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-edit input {
    width: 110px;
    border: 0;
    outline: 0;
    background: none;
    color: var(--pp-ink);
    font: 18px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-edit button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-edit button .pp-ic {
    width: 14px;
    height: 14px;
}

html.pie-premium .pp-shell.pp-planner .pp-fin-bar {
    display: inline-block;
    width: 44px;
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .pp-fin-bar em {
    display: block;
    height: 100%;
    background: var(--pp-acc);
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-strip {
        margin-top: 0;
    }
}

/* template1.css underlines the hovered tab (.new-planner .tabs-section-nav ul li:hover) and the
   reservation popup's type list: the premium tabs show hover with colour only */
html.pie-premium .pp-shell.pp-planner .tabs-section-nav ul li,
html.pie-premium .pp-shell.pp-planner .tabs-section-nav ul li:hover,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-type-block li:hover,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-sub-category-block li:hover {
    border-bottom: 0 !important;
}

/* ==========================================================================
   Planner — day timeline (PremiumDayTimeline.vue): the design's "Index" rail beside the
   day-by-day list. Fixed and positioned by the component so it behaves like a sticky column.
   ========================================================================== */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .day_booking_section > .planner-booking-list {
        margin-left: 74px;
    }
}

/* Desktop: an invisible column the height of the day list (placed by the component), with the rail
   sticky inside it. The phone strip skips the column. */
html.pie-premium .pp-shell.pp-planner .pp-dtl-col {
    position: absolute;
    z-index: 5;
    width: 56px;
    pointer-events: none;
}

html.pie-premium .pp-shell.pp-planner .pp-dtl-col.strip {
    display: contents;
}

html.pie-premium .pp-shell.pp-planner .pp-dtl {
    position: sticky;
    pointer-events: auto;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 56px;
    padding: 4px 0;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 0;
    padding: 6px 0 6px 12px;
    border: 0;
    background: none;
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: var(--pp-line);
    transition: background .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb b {
    color: var(--pp-ink-3);
    font: 22px/1 var(--pp-sans) !important;
    letter-spacing: -.02em;
    transition: color .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb small {
    color: var(--pp-muted);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb .pp-dtl-sp {
    padding: 4px 0;
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb.has b {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb:hover b,
html.pie-premium .pp-shell.pp-planner .pp-dtlb:hover .pp-dtl-sp {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb.on::before {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb.on b,
html.pie-premium .pp-shell.pp-planner .pp-dtlb.on .pp-dtl-sp {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-dtlb:focus-visible {
    outline: 2px solid var(--pp-acc);
    outline-offset: 2px;
}

/* ==========================================================================
   Planner — itinerary toolbar (PremiumItineraryToolbar.vue): the design's one-row bar
   (view switch, import buttons, confirmation chips, View, More, New reservation).
   It drives the classic controls, which are hidden once the toolbar is in place.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-itb-host,
html.pie-premium .pp-shell.pp-planner .pp-itb:not(.attached) {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex #planner_booking .trip-action-pills.row,
html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex #planner_booking .trip-services > .trip-action-pills,
html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex #planner_booking .top-reservation-actions > span.gray_light_pills {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb {
    position: relative;
    /* Above the day list and its rail (5) so the menus open over them, below the fixed top bar (8) */
    z-index: 7;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0 14px;
    padding: 8px;
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    font-family: var(--pp-sans);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-planner .pp-itb button {
    border: 0;
    background: none;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-itb .pp-ic {
    width: 15px;
    height: 15px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-seg button {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--pp-ink-3);
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-seg button.on {
    background: var(--pp-ink);
    color: var(--pp-bg);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sep {
    width: 1px;
    height: 24px;
    background: var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sp {
    flex: 1;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-mw {
    position: relative;
    display: inline-flex;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc);
    transition: box-shadow .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp .pp-ic {
    width: 17px;
    height: 17px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp:hover,
html.pie-premium .pp-shell.pp-planner .pp-itb-imp.on {
    box-shadow: 0 0 0 2px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp em {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--pp-panel-2);
    box-shadow: 0 0 0 2px var(--pp-panel);
    color: var(--pp-muted);
    font: 10px/17px var(--pp-bold);
    font-style: normal;
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp em.ok {
    background: var(--pp-ok);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 4px 0 9px;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: inset 0 0 0 .5px var(--pp-line-2);
    color: var(--pp-ink);
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf small {
    color: var(--pp-muted);
    font: 10.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf .pp-itb-conf-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: var(--pp-ink);
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf button:not(.pp-itb-conf-val) {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf button:not(.pp-itb-conf-val):hover {
    background: var(--pp-panel);
    color: #c0262d;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf .pp-ic {
    width: 12px;
    height: 12px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    color: var(--pp-acc);
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-tool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font-size: 13px;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-tool.sq {
    justify-content: center;
    width: 38px;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-tool:hover,
html.pie-premium .pp-shell.pp-planner .pp-itb-tool.on {
    box-shadow: 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-new {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--pp-acc) !important;
    color: #fff;
    font-size: 13.5px;
    -webkit-text-stroke: .35px currentColor;
    white-space: nowrap;
}

/* Popovers */
html.pie-premium .pp-shell.pp-planner .pp-itb-pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: 340px;
    padding: 6px;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-pop.pp-itb-right {
    right: 0;
    left: auto;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-pop small {
    display: block;
    padding: 6px 10px 4px;
    color: var(--pp-muted);
    font: 11px var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px !important;
    border-radius: 9px;
    color: var(--pp-ink-2);
    font-size: 13px;
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-item:hover {
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-item.on {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-item span {
    color: var(--pp-muted);
    font-size: 11.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imppop {
    width: 350px;
    max-width: calc(100vw - 32px);
    padding: 14px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imph {
    margin-bottom: 12px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imph b {
    display: block;
    color: var(--pp-ink);
    font: 15.5px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imph small {
    padding: 2px 0 0;
    color: var(--pp-muted);
    font: 12.5px/1.4 var(--pp-sans);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-copy {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-copy input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink);
    font: 12.5px var(--pp-sans);
    outline: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink);
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sts span {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-muted);
    font-size: 11.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sts b {
    color: var(--pp-ink);
    font: 16px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sts .ok b {
    color: var(--pp-ok);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sts .w b {
    color: #9a5b00;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sts .d b {
    color: #c0262d;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-viewpop {
    padding: 8px 10px 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-chk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 4px;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-chk input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 4px !important;
    color: var(--pp-ink-2);
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sw i {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: var(--pp-line-2);
    transition: background .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sw i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sw.on i {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-sw.on i::after {
    left: 17px;
}

/* New reservation: categories on the left, their types on the right */
html.pie-premium .pp-shell.pp-planner .pp-itb-newpop {
    display: grid;
    grid-template-columns: 200px 220px;
    max-width: none;
    padding: 0;
    overflow: hidden;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-cats {
    max-height: 360px;
    padding: 6px;
    overflow: auto;
    border-right: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-subs {
    max-height: 360px;
    padding: 6px;
    overflow: auto;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-subs p {
    margin: 0;
    padding: 10px;
    color: var(--pp-muted);
    font-size: 13px;
}

/* ==========================================================================
   Planner — no section tab bar in the new look: the tiles open each section (the hidden
   tab links still do the switching), and "Back to itinerary" returns from one.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_details_tabs .tabs-section-nav,
html.pie-premium .pp-shell.pp-planner #planner_details_tabs .trip-toggle-icon,
html.pie-premium .pp-shell.pp-planner #planner_booking .top-reservation-actions > .d-flex:has(> .reservation-header) {
    display: none !important;
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner #planner_details_tabs .drag-component {
        display: none !important;
    }
}

/* A tile's section opens as a box under the tiles (the design's .pl-sheet): this header from
   PremiumPlannerTiles.vue, then the section's own tab pane, which scrolls inside the box.
   The itinerary pane stays on screen below it. */
html.pie-premium .pp-shell.pp-planner .pp-tl-tabhead {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pp-line);
    border-radius: 20px 20px 0 0;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    clip-path: inset(-40px -40px 0 -40px);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-tabhead > div {
    flex: 1;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-tabhead b {
    display: block;
    color: var(--pp-ink);
    font: 15.5px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-tabhead small {
    color: var(--pp-muted);
    font-size: 12.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-tabhead .pp-tl-sheet-ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) .planner-details-view.new-planner,
html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) .planner-details-view.new-planner:has(.pp-itb.attached) {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs,
html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs .tab-content:has(> #tabs-2-tab-3) {
    padding-top: 0 !important;
}

html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs .tab-content:has(> #tabs-2-tab-3) {
    display: flex;
    flex-direction: column;
}

html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs .tab-content:has(> #tabs-2-tab-3) > #tabs-2-tab-3 {
    display: block !important;
    opacity: 1 !important;
}

html.pie-premium .pp-shell.pp-planner:has(.pp-tl-tabhead) #planner_details_tabs .tab-content:has(> #tabs-2-tab-3) > .tab-pane.active:not(#tabs-2-tab-3) {
    order: -1;
    max-height: min(440px, 60vh);
    margin: 0 0 12px;
    padding: 16px;
    overflow: auto;
    border-radius: 0 0 20px 20px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-addcf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Planner — day rows: the design's compact day cards. CSS only, on the classic header
   (TripBookingNew.vue), so the title input, Add city, meals, Book, + and collapse all keep working.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_booking .top-reservation-actions {
    counter-reset: pp-day;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--pp-panel) !important;
    box-shadow: var(--pp-shadow) !important;
    transition: box-shadow .15s;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list[data-pp-current] {
    box-shadow: var(--pp-shadow), 0 0 0 2px var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .summary-day-section,
html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .planner-reservation > .summary-day-section {
    align-items: center !important;
    gap: 16px;
    min-height: 66px;
    margin: 0 !important;
    padding: 12px 18px 12px 22px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* "Day 1" becomes the design's light "01" */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-count {
    counter-increment: pp-day;
    flex: none;
    width: auto !important;
    min-width: 34px;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-count > div {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-count::before {
    content: counter(pp-day, decimal-leading-zero);
    color: var(--pp-ink-3);
    font: 22px/1 var(--pp-sans);
    letter-spacing: -.02em;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list[data-pp-current] .day-count::before {
    color: var(--pp-acc);
}

/* Title on the first line, date and place on the second */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-main {
    flex-wrap: wrap;
    align-items: center !important;
    gap: 2px 8px;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-main > .trip-daily-itinerary {
    order: -1;
    flex-basis: 100%;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .daily-calendar-block {
    font-size: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .booking_title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .booking_title input.day_title {
    width: 260px;
    max-width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pp-ink) !important;
    font: 16px var(--pp-sans) !important;
    outline: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .booking_title input.day_title::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .booking_title i {
    margin: 0 !important;
    color: var(--pp-muted);
    font-size: 12px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main > .week-days {
    padding: 0 !important;
    color: var(--pp-muted) !important;
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place {
    margin: 0 !important;
    color: var(--pp-muted);
    font-size: 12.5px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place a,
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place .add-link,
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place [id^="origin-place-label"] {
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-sans) !important;
}

/* Item count: a quiet pill */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section :is(.day-date-count, .pre-date-count) {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3) !important;
    font: 11.5px/20px var(--pp-bold) !important;
}

/* Actions: small square icon buttons, then the chevron */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-actions {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .main_event_day_meals_options > i,
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .add-btn {
    display: inline-grid !important;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border-radius: 9px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3) !important;
    font-size: 15px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .main_event_day_meals_options > i:hover,
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .add-btn:hover {
    background: var(--pp-acc-soft);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .days-btn {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .tp-shop-dropdown {
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .tp-shop-day-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 9px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-2) !important;
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .tp-shop-day-btn:hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .tp-shop-day-btn i {
    font-size: 14px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions > i.add_hotel {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 0 0 4px !important;
    border-radius: 9px;
    color: var(--pp-muted) !important;
    font-size: 16px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions > i.add_hotel:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink) !important;
}

/* Information, Before trip, After trip, Closing information: a title and a short line under it */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-main > .week-days:has(.trip-date) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date {
    display: grid !important;
    gap: 2px;
    padding: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date > span {
    color: var(--pp-ink) !important;
    font: 16px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date::after {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Pre) .trip-date > span,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Post) .trip-date > span {
    font-size: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Pre) .trip-date > span::before,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Post) .trip-date > span::before {
    font-size: 16px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Pre) .trip-date > span::before {
    content: "Before trip";
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Pre) .trip-date::after {
    content: "Drop anything for before the trip starts";
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Post) .trip-date > span::before {
    content: "After trip";
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_Post) .trip-date::after {
    content: "Welcome-home note, feedback and follow-ups";
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_General) .trip-date::after {
    content: "Notes for the whole trip";
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(#dd_day_GeneralPost) .trip-date::after {
    content: "Information shown after the trip";
}

/* Day header on one row: the left block shrinks, the buttons stay on the right */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-row {
    flex-wrap: nowrap !important;
    gap: 12px;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-main {
    flex: 1 1 auto;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-actions {
    flex: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date > span {
    margin: 0 !important;
    padding: 0 !important;
}

/* Toolbar: labels fold into icons when the itinerary column is narrow */
html.pie-premium .pp-shell.pp-planner #planner_booking > .top-reservation-actions {
    container-type: inline-size;
}

@container (max-width: 1040px) {
    html.pie-premium .pp-shell.pp-planner .pp-itb .pp-itb-lbl {
        display: none;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb :is(.pp-itb-tool, .pp-itb-new) {
        justify-content: center;
        width: 38px;
        padding: 0;
    }
}

/* ==========================================================================
   Planner — reservation cards inside a day: the design's card (icon tile, title, detail
   line, status chips, price on the right, action icons out of the ⋯ menu). CSS only.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail:not(.overnight_trip) {
    position: relative;
    margin: 0 0 10px !important;
    padding: 16px 18px 14px 74px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 16px !important;
    background: var(--pp-panel) !important;
    box-shadow: none !important;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail:not(.overnight_trip):hover {
    border-color: var(--pp-line-2) !important;
}

/* Top line: title, then the category and date under it; actions on the right */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 4px 6px;
    min-width: 0;
    padding: 0 !important;
    color: var(--pp-muted);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title > div:not(.planner-booking-info) {
    order: -1;
    flex-basis: 100%;
    padding: 0 !important;
    color: var(--pp-ink);
    font: 16px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title > .planner-booking-info:first-child {
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

/* The category icon becomes the card's icon tile */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title > .planner-booking-info:first-child > i {
    position: absolute;
    top: 16px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 12px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font-size: 18px;
}

/* Action icons in a row instead of the ⋯ menu */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title > div:last-child {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title .dropdown-toggle {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu {
    position: static !important;
    display: flex !important;
    gap: 2px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    inset: auto !important;
    /* Bootstrap's dropdown z-index 1000 still applies to a flex item and lifts the icons over the fixed header */
    z-index: auto !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu > i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px;
    color: var(--pp-muted);
    font-size: 15px;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu > i:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-actions.dropdown-menu > i.pie-icon-trash:hover {
    color: #c0262d;
}

/* Second line: date chip, status chips, price on the right */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row > .col-md-8 {
    flex: 1 1 auto;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-date-time {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px !important;
    border-radius: 8px !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3) !important;
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-date-time p {
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
}

/* Closer to the design's card: a plain category icon (no tile) and the times / airline as one
   quiet detail line instead of grey pills */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail:not(.overnight_trip) {
    padding: 16px 20px 14px 58px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title > .planner-booking-info:first-child > i {
    top: 18px;
    left: 22px;
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: transparent;
    color: var(--pp-ink-2);
    font-size: 18px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row .planner-booking-info {
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--pp-ink-2);
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row .collapsed:has(> .planner-booking-info) {
    flex-wrap: wrap;
    align-items: center !important;
    gap: 4px 16px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row > .col-lg-4:has(.flight-date) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row .flight-date {
    height: auto !important;
    min-height: 0 !important;
    color: var(--pp-ink-2);
    font-size: 13.5px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row .flight-date p {
    display: inline;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    color: var(--pp-muted);
    font-size: 12.5px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row .airline-logo {
    background: transparent;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-date-time {
    height: auto;
    padding: 0 !important;
    background: transparent !important;
    color: var(--pp-ink-2) !important;
    font-size: 13px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-drop-down {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-drop-down > div {
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-drop-down > div:empty {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-status {
    display: inline-flex !important;
    align-items: center;
    height: 26px;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-status.price-rate-type {
    border: 0 !important;
    background: #eef0fa !important;
    color: #3b4a8a !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-status i {
    padding-left: 6px !important;
    font-size: 11px;
    opacity: .6;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .price-action {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0 2px;
    margin-left: auto;
    padding: 0 !important;
    background: transparent !important;
    color: var(--pp-ink) !important;
    font: 15px var(--pp-sans) !important;
}

/* Many status chips wrap among themselves; the price stays on the right, level with their last line */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info:has(> .booking-drop-down) {
    flex-wrap: nowrap;
    align-items: flex-end;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .booking-drop-down {
    flex: 1 1 auto;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > :is(.price-action, .add_hotel) {
    flex: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .price-action br {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .price-action .color-green {
    color: var(--pp-ok) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .price-action i {
    color: var(--pp-muted);
    font-size: 12px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > i.add_hotel {
    color: var(--pp-muted) !important;
    font-size: 16px !important;
}

/* Overnight line: the design's quiet pill */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail.overnight_trip {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    margin: 0 0 10px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-2) !important;
    font: 13.5px var(--pp-sans) !important;
}

/* A time chip inside the title line (check-in / check-out) */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title > span.booking-date-time {
    height: 22px;
    font-size: 12px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title > i.add_hotel {
    color: var(--pp-muted);
}

/* Day summary (PremiumDayTimeline.vue): category icons, item count and day total on a collapsed day */
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions > .pp-daysum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
    white-space: nowrap;
}

/* The day body is slid open/closed with jQuery; its chevron (fa-angle-up = open) is the reliable state */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-up) .pp-daysum {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum .pp-daysum-ic {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border-radius: 8px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font-size: 14px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum small {
    margin: 0 4px;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum b {
    color: var(--pp-ink);
    font: 15px var(--pp-sans);
    font-variant-numeric: tabular-nums;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum em {
    color: var(--pp-muted);
    font: italic 12.5px var(--pp-sans);
}

/* The day's open body: the header no longer looks like a card inside the card */
html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .planner-reservation,
html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list .summary-day-section {
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .accordion-collapse {
    padding: 0 18px 8px;
}

/* Tiles: eight across like the design, four per row on narrower screens */
html.pie-premium .pp-shell.pp-planner .pp-tilesw > .pp-tiles:first-child {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

@container (max-width: 1300px) {
    html.pie-premium .pp-shell.pp-planner .pp-tilesw > .pp-tiles:first-child {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (max-width: 560px) {
    html.pie-premium .pp-shell.pp-planner .pp-tilesw > .pp-tiles:first-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

html.pie-premium .pp-shell.pp-planner .pp-tl.pp-tl-health {
    background: radial-gradient(120% 140% at 0% 0%, #8c2443, #45101f 70%) !important;
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.pp-tl-health > small,
html.pie-premium .pp-shell.pp-planner .pp-tl.pp-tl-health > div,
html.pie-premium .pp-shell.pp-planner .pp-tl.pp-tl-health > div b {
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.pp-tl-health > div b .pp-ic {
    width: 18px;
    height: 18px;
    vertical-align: -2px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.pp-tl-health.on {
    box-shadow: var(--pp-shadow), 0 0 0 2px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .pp-tl .pp-dn {
    flex-basis: 100%;
    color: #c0262d;
    font-size: 12px;
}

/* Trip health list under the tiles */
html.pie-premium .pp-shell.pp-planner .pp-tl-sheet {
    display: grid;
    gap: 4px;
    margin: 10px 0 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet > header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet > header div {
    flex: 1;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet > header b {
    display: block;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet > header small {
    color: var(--pp-muted);
    font-size: 12.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet-ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: radial-gradient(120% 140% at 0% 0%, #8a007a, #4a0b4f 70%);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet-x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet-x:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-issue {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .pp-tl-issue:hover {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-issue .pp-ic {
    width: 14px;
    height: 14px;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-tl-sheet-empty {
    margin: 0;
    color: var(--pp-muted);
    font-size: 13px;
}

/* Master itinerary description: title and a line under it, "+ Add description" on the right */
html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px 20px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > h5 {
    display: grid !important;
    order: 1;
    gap: 2px;
    margin: 0 !important;
    color: var(--pp-ink) !important;
    font: 16px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > h5::after {
    content: "An introduction shown at the top of every itinerary";
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > .add-link {
    order: 2;
    margin-left: auto !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > .add-link i {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    font-size: 13px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > .add-link span {
    font: 13.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > i.fa {
    order: 3;
    float: none !important;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--pp-muted);
    font-size: 16px;
}

/* The itinerary sits on the page background like the design, not inside one big white card */
html.pie-premium .pp-shell.pp-planner .planner-details-view.new-planner:has(.pp-itb.attached) {
    padding-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view.new-planner:has(.pp-itb.attached) .tab-content {
    padding: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached {
    margin: 0 0 14px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex {
    gap: 14px;
}

/* A little room inside the itinerary's scroll box so the current day's outline is never clipped */
html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex #planner_booking {
    padding: 3px 4px 3px 0 !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex .top-reservation-actions,
html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex .day_booking_section {
    margin-top: 0 !important;
}

/* ==========================================================================
   Planner — Trip content panel (right): the design's header, Library card, segmented tabs,
   category rows with a dark count, and type chips. CSS on the classic panel plus the header
   PremiumItineraryToolbar.vue adds.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside {
    padding: 16px !important;
    border-radius: 18px !important;
    background: var(--pp-panel) !important;
    box-shadow: var(--pp-shadow) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-head > div {
    flex: 1;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-head b {
    display: block;
    color: var(--pp-ink);
    font: 17px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-x {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-x:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-x .pp-ic {
    width: 15px;
    height: 15px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-head small {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

/* The header says it; the classic hint line goes */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section:has(.pp-tc-head) .right-sidebar-title {
    display: none !important;
}

/* Library: a card with an arrow, first, like the design */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .daily-inerary > .accordion-collapse {
    display: flex !important;
    flex-direction: column;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library {
    order: -1;
    margin: 0 0 12px !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li {
    justify-content: flex-start !important;
    gap: 12px !important;
    height: auto !important;
    padding: 12px 14px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px !important;
    color: var(--pp-ink) !important;
    font: 14px var(--pp-sans) !important;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font-size: 17px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li::after {
    content: "→";
    margin-left: auto;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li:hover {
    border-color: var(--pp-acc-line) !important;
}

/* Reservations / Information: segmented, active in ink */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.active {
    background: var(--pp-ink) !important;
    color: var(--pp-bg) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.active i {
    color: var(--pp-bg) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li i {
    display: none;
}

/* Category rows */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header,
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-event-category-header {
    margin: 0 0 8px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head {
    min-height: 44px;
    padding: 8px 12px !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head > .d-flex > span[class*="pie-icon"] {
    color: var(--pp-ink-3);
    font-size: 16px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head h4 {
    align-items: center;
    gap: 8px;
    color: var(--pp-ink) !important;
    font: 14px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head .count {
    display: inline-grid !important;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: var(--pp-ink) !important;
    color: #fff !important;
    font: 11px/20px var(--pp-bold) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head > a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head > a:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink) !important;
}

/* Types inside an open category: chips */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .accordion-body {
    padding: 0 10px 10px !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .accordion-body ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    text-align: left !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .accordion-body .drag.gray_light_pills {
    margin: 0 !important;
    padding: 5px 10px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    background: var(--pp-panel) !important;
    cursor: grab;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .accordion-body .drag.gray_light_pills a {
    color: var(--pp-ink-2) !important;
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .accordion-body .drag.gray_light_pills:hover {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-acc-soft) !important;
}

/* No empty gap between the description and the first day */
html.pie-premium .pp-shell.pp-planner #planner_booking .trip-services:not(:has(.selected-services li)) {
    margin: 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip-services:not(:has(.selected-services li)) > p {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip-services .selected-services:not(:has(li)) {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex .top-reservation-actions > .day_booking_section:has(.trip_desc_sec) {
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex .trip-services {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex .top-reservation-actions {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Planner — day cards, final pass to match the design: short date, meal chips, quiet collapsed
   row, overnight first, then cards, a link row and a dashed drop area.
   ========================================================================== */
/* Short date ("Sat, Nov 7") from data-pp-date; the classic text stays in the DOM */
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main > .week-days[data-pp-date] {
    font-size: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main > .week-days[data-pp-date]::before {
    content: attr(data-pp-date);
    color: var(--pp-muted);
    font: 13px var(--pp-sans);
}

/* No count pill in the header (the collapsed summary carries it) */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section :is(.day-date-count, .pre-date-count) {
    display: none !important;
}

/* Meals: the hover flyout becomes the design's row of round chips (AI B L D C), chosen ones filled */
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .main_event_day_meals_options > i {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .main_event_day_meals_options ul {
    position: static !important;
    display: flex !important;
    gap: 4px;
    width: auto !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .main_event_day_meals_options ul li a {
    display: grid !important;
    place-items: center;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 50% !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-3) !important;
    font: 11.5px/1 var(--pp-bold) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .main_event_day_meals_options ul li a:hover {
    border-color: var(--pp-acc-line);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .main_event_day_meals_options ul li a.color-pink {
    border-color: var(--pp-acc);
    background: var(--pp-acc) !important;
    color: #fff !important;
}

/* "+": a square button like the design */
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .add-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions .tp-shop-day-btn {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
}

/* Collapsed day: only the summary and the chevron */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-actions > :is(.trip-daily-itinerary, .tp-shop-dropdown, .days-btn) {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-main .reservation-place {
    display: none !important;
}

/* Open/closed follows the chevron: jQuery leaves an inline display on the body after sliding */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) > .accordion-collapse {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-up) > .accordion-collapse {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 0 18px 18px !important;
}

/* Overnight first */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list > .accordion-collapse > .d-block {
    order: -1;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list > .accordion-collapse > .d-block .overnight_trip {
    margin: 0 !important;
}

/* The day body: cards, then the link row, then the drop area */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-up) > .accordion-collapse > [class*="dd_day_"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 22px;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > div:has(.planner-item-wrap),
html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > div:has(.travel_detail) {
    order: 1;
    flex-basis: 100%;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > div:has(.di-day-note-view-section) {
    order: 2;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > div:has(.day-notes-list:not(.day-notes-list-empty)) {
    flex-basis: 100%;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > .di-day-image-view-section {
    order: 3;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > .mb-1:empty {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] .di-day-note-view-section {
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] :is(.day-details-section-desc-add .add-link, .di-day-image-view-section .add-link) {
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] :is(.day-details-section-desc-add .add-link, .di-day-image-view-section .add-link) i {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    color: var(--pp-acc) !important;
    font-size: 14px !important;
    font-style: normal;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] :is(.day-details-section-desc-add .add-link, .di-day-image-view-section .add-link) span {
    padding: 0 !important;
    color: var(--pp-acc) !important;
    font: 13.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > div:has(.di-day-note-view-section),
html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] .day-details-section-desc-add > .d-flex {
    display: flex;
    align-items: center;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] .planner-item-wrap .travel_detail {
    margin-bottom: 10px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"]:not([class*="dd_day_General"])::after {
    content: "Drop a reservation, information or a photo here";
    order: 4;
    flex-basis: 100%;
    margin-top: 4px;
    padding: 20px;
    border: 1.5px dashed var(--pp-line-2);
    border-radius: 14px;
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] :is(.planner-item-wrap, .planner-item-wrap > .travel_detail:not(.overnight_trip)) {
    width: 100% !important;
    max-width: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] .di-day-note-view-section > *,
html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] .day-details-section-desc-add {
    margin: 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] .day-notes-list-empty {
    display: none !important;
}

/* Day number: room before the title, centred on the two lines, like the design */
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-count {
    align-self: center;
    width: 40px !important;
    margin-right: 22px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-count::before {
    display: block;
    line-height: 1;
}

/* Collapsed day: keep the city ("· London"), drop only the "+ Add city" link */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-main .reservation-place {
    display: flex !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-main .reservation-place > .add-link {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .planner-city-name:empty {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .planner-city-name:not(:empty) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pp-muted);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .planner-city-name:not(:empty)::before {
    content: "·";
    margin-right: 2px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place > .add-link {
    margin: 0 0 0 10px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .accordion-collapse > [class*="dd_day_"] > .planner-cards-empty:empty {
    display: none !important;
}

/* template1.css turns a hovered category header (and type chip) black: keep the design's quiet hover */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header:hover .panels-head {
    background-color: var(--pp-panel-2) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header:hover .panels-head h4,
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header:hover .panels-head > .d-flex > span[class*="pie-icon"] {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header:hover .panels-head .day-date-count {
    background: var(--pp-ink) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header .drag.gray_light_pills:hover {
    background-color: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header .drag.gray_light_pills:hover a {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header .panels-head {
    border-radius: 11px;
    transition: background-color .12s;
}

/* Price last: the column with the chips and price (col-md-8 or col-lg-8, depending on the card)
   fills the row, and the price sits at its right end, followed only by the details chevron */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row > [class*="col-"]:has(.track-info) {
    flex: 1 1 auto !important;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row > [class*="col-"]:has(.track-info) > .text-end {
    width: 100%;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info {
    width: 100%;
    flex-wrap: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .booking-drop-down {
    flex: 0 1 auto;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .price-action {
    flex: none;
    margin-left: auto !important;
    white-space: nowrap;
}

/* ==========================================================================
   Planner — the itinerary flows with the page like the design: no 750px inner scroll box
   (template1.css), Trip content pinned beside it, and Cancel / Archive right after the last day.
   ========================================================================== */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex .trip-reservation-tab {
        height: auto !important;
        overflow: visible !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex {
        align-items: flex-start !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex > .booking-new-section {
        height: auto !important;
        overflow: visible !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex > .reservation-rightside-section {
        position: sticky;
        top: var(--pp-itb-below, 104px);
        align-self: flex-start;
        height: auto !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex > .reservation-rightside-section .drag-rightside {
        height: auto !important;
        max-height: calc(100vh - var(--pp-itb-below, 104px) - 20px);
        overflow-y: auto;
    }
}

/* Cancel / Archive: on the page background after the last day, with the design's icons */
html.pie-premium .pp-shell.pp-planner .planner-details-view.new-planner:has(.pp-itb.attached) .trip-btn {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 6px 0 24px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .trip-btn .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .trip-btn .btn::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--pp-i) center / contain no-repeat;
    mask: var(--pp-i) center / contain no-repeat;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .trip-btn .btn-gray-outline::before {
    --pp-i: var(--pp-i-x);
}

html.pie-premium .pp-shell.pp-planner .planner-details-view .trip-btn .btn-gray::before {
    --pp-i: var(--pp-i-archive);
}

/* ==========================================================================
   Planner — trip side bar folded into an icon rail (PremiumTripRail.vue), the design's
   "Layout · Rail". Desktop only; below 916px the classic side bar behaviour applies.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-tp-rail {
    display: none;
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-tp-rail {
        position: fixed;
        z-index: 11;
        top: 64px;
        left: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 60px;
        padding: 14px 8px;
        border-radius: 18px;
        background: var(--pp-panel);
        box-shadow: var(--pp-shadow);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-ico {
        position: relative;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: none;
        color: var(--pp-ink-2);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-ico:hover {
        background: var(--pp-panel-2);
        color: var(--pp-acc);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-ico .pp-ic {
        width: 18px;
        height: 18px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-ico em {
        position: absolute;
        top: 2px;
        right: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--pp-acc);
        color: #fff;
        font: 10px/16px var(--pp-bold);
        font-style: normal;
        text-align: center;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-ico.pp-tp-tg {
        margin-bottom: 4px;
        background: var(--pp-panel-2);
    }

    /* Folded: the classic side bar steps aside, the brand shrinks to its mark, the page uses the room */
    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open) .planner-left-sidebar {
        display: none !important;
    }

    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open) .pp-planner-brand {
        width: 60px;
        justify-content: center;
    }

    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open) .pp-planner-brand .pp-w {
        display: none;
    }

    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open):has(.trip-planner-compact) .header-wrapper {
        left: 72px;
    }

    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open) .trip-planner-compact .page-content {
        padding-left: 78px;
    }
}


/* ==========================================================================
   Planner — the open trip panel as the design's single card: header (PremiumTripPanelHead.vue)
   with cover, name and Trip health; sections as quiet rows with an icon, a dark count and a
   chevron; Create / Back as a small row at the end. Desktop only.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-tph-host {
    display: none;
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .left-sidebar-wrapper {
        padding: 14px !important;
        border-radius: 22px;
        background: var(--pp-panel) !important;
        box-shadow: var(--pp-shadow);
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .left-sidebar-wrapper > .custom-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 8px;
        align-content: start;
        background: transparent !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > * {
        grid-column: 1 / -1;
        min-width: 0;
        max-width: 100%;
    }

    /* Create / Back: a small row at the end */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > :is(.create-btn, .trips-btn) {
        order: 99;
        grid-column: auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto !important;
        height: 36px !important;
        margin: 14px 0 0 !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font: 13px var(--pp-sans) !important;
        letter-spacing: 0 !important;
    }

    /* Header: cover, name, code · dates, fold */
    html.pie-premium .pp-shell.pp-planner .planner-left-sidebar .pp-tph {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin: 0 0 6px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-head > img,
    html.pie-premium .pp-shell.pp-planner .pp-tph-noimg {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 11px;
        object-fit: cover;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-noimg {
        display: grid;
        place-items: center;
        background: var(--pp-panel-2);
        color: var(--pp-muted);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-name {
        flex: 1;
        min-width: 0;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-name b {
        display: block;
        overflow: hidden;
        color: var(--pp-ink);
        font: 14.5px/1.3 var(--pp-sans);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-name small {
        color: var(--pp-muted);
        font: 12px var(--pp-sans);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-fold {
        display: grid;
        flex: none;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--pp-line-2);
        border-radius: 9px;
        background: var(--pp-panel);
        color: var(--pp-ink-3);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-fold:hover {
        border-color: var(--pp-acc-line);
        color: var(--pp-acc);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph .pp-ic {
        width: 15px;
        height: 15px;
    }

    /* Trip health: the purple card with its issues */
    html.pie-premium .pp-shell.pp-planner .pp-tph-health {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 14px;
        border-radius: 16px;
        background: radial-gradient(120% 140% at 0% 0%, #8a007a, #4a0b4f 70%);
        color: #fff;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-health small {
        display: flex;
        align-items: center;
        gap: 6px;
        font: 11px var(--pp-bold);
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .85;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-health > b {
        margin-bottom: 4px;
        font: 16px var(--pp-bold);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-health button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font: 12.5px/1.35 var(--pp-sans);
        text-align: left;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-health button:hover {
        background: rgba(255, 255, 255, .24);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tph-health button .pp-ic {
        width: 13px;
        height: 13px;
        flex: none;
    }

    /* Sections: rows with dividers instead of separate bubbles */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .dropdown_pie_dashboard {
        margin: 0 !important;
        border-top: 1px solid var(--pp-line);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu {
        display: flex !important;
        align-items: center;
        gap: 12px;
        min-height: 50px;
        margin: 0 !important;
        padding: 0 4px !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--pp-ink) !important;
        font: 14.5px var(--pp-sans) !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu > :is(.nav-label-wrap, .nav-label-wrap .price-tittle) {
        margin: 0 !important;
        overflow: hidden;
        color: inherit !important;
        font: inherit !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu > :is(.nav-meta-wrap, .collaborate-drop-down) {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    /* The design's icon in front of every section (the classic icon fonts are hidden) */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu > i:not(.fa) {
        display: none !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu::before {
        content: "";
        flex: none;
        width: 17px;
        height: 17px;
        background-color: var(--pp-ink-3);
        -webkit-mask: var(--pp-i) center / contain no-repeat;
        mask: var(--pp-i) center / contain no-repeat;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .dropdown_pie_dashboard:nth-of-type(1) .parent-menu { --pp-i: var(--pp-i-map); }
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .dropdown_pie_dashboard:nth-of-type(2) .parent-menu { --pp-i: var(--pp-i-check); }
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .dropdown_pie_dashboard:nth-of-type(3) .parent-menu { --pp-i: var(--pp-i-bar); }
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .collaborators_sections .parent-menu { --pp-i: var(--pp-i-user); }
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .clientcontacts_sections .parent-menu { --pp-i: var(--pp-i-phone); }
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .reservations_sections .parent-menu { --pp-i: var(--pp-i-tag); }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .dropdown_pie_dashboard:nth-of-type(1) .parent-menu::before {
        background-color: var(--pp-acc);
    }

    /* Counts: a dark badge pushed right; chevrons quiet */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu .count {
        display: inline-grid !important;
        place-items: center;
        min-width: 22px;
        height: 22px;
        margin: 0 0 0 auto !important;
        padding: 0 7px !important;
        border-radius: 999px !important;
        background: var(--pp-ink) !important;
        color: #fff !important;
        font: 11.5px/22px var(--pp-bold) !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu > .count + * .count,
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu .nav-meta-wrap .count {
        margin-left: 0 !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu .sub-angle {
        float: none !important;
        margin: 0 0 0 auto !important;
        color: var(--pp-muted) !important;
        font-size: 15px !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu .count ~ .sub-angle,
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu :is(.nav-meta-wrap, .collaborate-drop-down) .sub-angle {
        margin-left: 0 !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .collaborate-drop-down .add_collobrators {
        display: inline-grid !important;
        place-items: center;
        width: 24px;
        height: 24px;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--pp-acc) !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .collaborate-drop-down .add_collobrators i {
        margin: 0 !important;
        font-size: 17px;
        line-height: 1;
    }

    /* Client itineraries: photo cards. Not overflow:hidden, that clipped the ⋯ menu */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] {
        min-height: 52px;
        margin-bottom: 8px;
        border-radius: 12px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"]::before {
        border-radius: inherit;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] .trip_itinerarie {
        padding: 0 8px 0 12px !important;
        font: 13.5px/52px var(--pp-sans);
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] .booking-actions.dropdown-menu {
        min-width: 148px;
        padding: 6px !important;
        border: 1px solid var(--pp-line);
        border-radius: 12px;
        background: var(--pp-panel);
        box-shadow: var(--pp-shadow-2);
        text-align: left !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] .booking-actions.dropdown-menu > a {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 34px;
        padding: 0 10px !important;
        border-radius: 8px;
        color: var(--pp-ink-2) !important;
        font: 13px/1 var(--pp-sans);
        letter-spacing: 0;
        cursor: pointer;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] .booking-actions.dropdown-menu > a:hover {
        background: var(--pp-hover);
        color: var(--pp-ink) !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] .booking-actions.dropdown-menu > a i {
        margin: 0 !important;
        color: var(--pp-ink-3);
        font-size: 15px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] .booking-actions.dropdown-menu > a:has(.pie-icon-trash):hover,
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar #ti_list_block li[style*="background-image"] .booking-actions.dropdown-menu > a:has(.pie-icon-trash):hover i {
        color: #b42318 !important;
    }
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu :is(.sub-angle, .add_collobrators i) {
        display: block;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .dropdown_pie_dashboard .parent-menu .add_collobrators i::before {
        display: block;
        line-height: 1;
    }
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .collaborate-drop-down :is(.add_collobrators, .sub-angle) {
        position: static !important;
    }
}

/* ==========================================================================
   Planner — the app's main menu folded to icons (PremiumAppRail.vue), the design's far-left
   column. The trip rail / trip panel sit to its right. Desktop only.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-app-rail {
    display: none;
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-app-rail {
        position: fixed;
        z-index: 1040;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 64px;
        padding: 14px 0 16px;
        overflow-y: auto;
        border-right: 1px solid var(--pp-line);
        background: #fbfbfc;
        scrollbar-width: none;
        transition: width .18s, box-shadow .18s;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-rail.open {
        align-items: stretch;
        width: 248px;
        padding-right: 10px;
        padding-left: 10px;
        box-shadow: var(--pp-shadow-2);
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-mk {
        display: grid;
        place-items: center;
        flex: none;
        width: 36px;
        height: 36px;
        margin: 0 0 10px;
        border-radius: 10px;
        background: var(--pp-acc);
        color: #fff !important;
        font: 16px var(--pp-bold);
        text-decoration: none !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-ico {
        position: relative;
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: none;
        color: var(--pp-ink-2) !important;
        text-decoration: none !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-ico:hover {
        background: var(--pp-panel);
        color: var(--pp-acc) !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-ico.on {
        background: var(--pp-panel);
        color: var(--pp-acc) !important;
        box-shadow: var(--pp-shadow);
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-ico .pp-ic {
        width: 18px;
        height: 18px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-ico.pp-app-tg {
        margin-bottom: 6px;
        background: var(--pp-panel-2);
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-ico.pp-app-create {
        width: 52px;
        height: 46px;
        margin-bottom: 8px;
        border-radius: 14px;
        background: var(--pp-ink);
        color: #fff !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-ico em {
        position: absolute;
        top: 1px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--pp-acc);
        color: #fff;
        font: 10px/16px var(--pp-bold);
        font-style: normal;
        text-align: center;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-lbl {
        display: none;
    }

    /* Open: icons with their labels, over the page */
    html.pie-premium .pp-shell.pp-planner .pp-app-rail.open .pp-app-ico {
        display: flex;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        padding: 0 12px;
        font: 13.5px var(--pp-sans);
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-rail.open .pp-app-lbl {
        display: inline;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-rail.open .pp-app-ico em {
        position: static;
        margin-left: auto;
        order: 2;
    }

    html.pie-premium .pp-shell.pp-planner .pp-app-rail.open .pp-app-mk {
        margin-left: 4px;
    }

    /* The "P" lives in the app rail now; the trip rail and panel move right of it */
    html.pie-premium .pp-shell.pp-planner:has(.pp-app-rail) .pp-planner-brand {
        display: none !important;
    }

    html.pie-premium .pp-shell.pp-planner:has(.pp-app-rail) .pp-tp-rail {
        top: 14px;
        left: 76px;
    }

    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open):has(.pp-app-rail):has(.trip-planner-compact) .header-wrapper {
        left: 136px;
    }

    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open):has(.pp-app-rail) .trip-planner-compact .page-content {
        padding-left: 136px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open:has(.pp-app-rail) .planner-left-sidebar {
        left: 64px;
        padding-top: 14px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open:has(.pp-app-rail):has(.trip-planner-compact) .header-wrapper {
        left: 340px;
    }

    /* The header starts at the rail / card edge (so it never covers the card's corner). Its white
       bar is inset 12px, so 24px keeps the search box 12px inside the bar's rounded corner */
    html.pie-premium .pp-shell.pp-planner:has(.pp-app-rail) .header-wrapper .header.pp-top {
        padding-left: 24px !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open:has(.pp-app-rail) .trip-planner-compact .page-content {
        padding-left: 340px;
    }
}

/* Open trip panel: the card fits the window (14px around), keeps its rounded corners, and only
   the list inside scrolls with a thin scrollbar. The classic « strip is replaced by the card's ‹. */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar {
        display: flex;
        flex-direction: column;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        overflow: hidden !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .left-sidebar-wrapper {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-right: 6px !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .left-sidebar-wrapper > .custom-scroll {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        max-height: none !important;
        padding-right: 8px;
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .left-sidebar-wrapper:hover > .custom-scroll {
        scrollbar-color: var(--pp-line-2) transparent;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll::-webkit-scrollbar {
        width: 6px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: transparent;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .left-sidebar-wrapper:hover > .custom-scroll::-webkit-scrollbar-thumb {
        background: var(--pp-line-2);
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .toggle-sidebar {
        display: none !important;
    }

    /* Create / Back: bottom row, kept clear of the card edge */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > :is(.create-btn, .trips-btn) {
        margin-bottom: 2px !important;
    }
}

/* One 12px rhythm between the stacked planner blocks: banner, tiles, toolbar, description, days */
html.pie-premium .pp-shell.pp-planner .pp-tilesw {
    margin-top: 12px;
}

html.pie-premium .pp-shell.pp-planner .planner-details-view.new-planner:has(.pp-itb.attached) {
    margin-top: 12px !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached {
    margin-bottom: 12px !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex #planner_booking {
    padding-top: 0 !important;
}

/* The empty sticky strip under the (hidden) tab bar adds 12px; the price strip's own spacing is 2px over */
html.pie-premium .pp-shell.pp-planner .planner-details-view:has(.pp-itb.attached) .planner-details-tab-sticky {
    margin-top: 0 !important;
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-line {
        margin-bottom: 32px;
    }
}

/* Open trip panel: Create lives in the app menu (its black +), so only Back stays, full width */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open:has(.pp-app-rail) .planner-left-sidebar .custom-scroll > .create-btn {
        display: none !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .trips-btn {
        grid-column: 1 / -1;
        gap: 8px;
        height: 40px !important;
        margin-top: 12px !important;
        border: 1px solid var(--pp-line-2) !important;
        background: var(--pp-panel) !important;
        color: var(--pp-ink) !important;
        font: 13.5px var(--pp-sans) !important;
        -webkit-text-stroke: .3px currentColor;
        box-shadow: none !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .trips-btn:hover {
        border-color: var(--pp-acc-line) !important;
        background: var(--pp-acc-soft) !important;
        color: var(--pp-acc) !important;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .trips-btn i {
        padding: 0 !important;
        font-size: 13px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .custom-scroll > .trips-btn span {
        margin: 0 !important;
    }
}

/* Folded trip rail: Back to the Trips list at the bottom, below a divider */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-tp-rail .pp-tp-back {
        margin-top: 4px;
        text-decoration: none !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-rail .pp-tp-sep {
        width: 28px;
        height: 1px;
        margin: 4px 0 0;
        background: var(--pp-line-2);
    }
}

/* Trip content category rows: one block. The header's 8px bottom margin left a white band under the
   hover colour; the whole card now takes the hover. */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header .panels-head {
    margin-bottom: 0 !important;
    border-radius: 11px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header {
    overflow: hidden;
    transition: background-color .12s, border-color .12s;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header:hover {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header:hover .panels-head {
    background-color: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header:hover .panels-head h4,
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header:hover .panels-head > .d-flex > span[class*="pie-icon"] {
    color: var(--pp-acc) !important;
}

/* ==========================================================================
   Planner — Sabre / email import pop-ups (TripBookingNew.vue): Sync Sabre PNR and the
   PNR / email import status lists.
   ========================================================================== */
/* Sync Sabre PNR: account, PNR and the button on one even row */
html.pie-premium .pp-shell.pp-planner #pnrSyncModal .pnr-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

html.pie-premium .pp-shell.pp-planner #pnrSyncModal .pnr-block > .d-flex {
    flex: 1 1 420px;
    gap: 10px;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #pnrSyncModal .pnr-block > .d-flex > * {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #pnrSyncModal select.form-control,
html.pie-premium .pp-shell.pp-planner #pnrSyncModal .bootstrap-select > .dropdown-toggle,
html.pie-premium .pp-shell.pp-planner #pnrSyncModal .check-pnr .form-control {
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 13.5px var(--pp-sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell.pp-planner #pnrSyncModal .bootstrap-select.form-control {
    border: 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #pnrSyncModal .check-pnr .form-control:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

/* The PNR field shows its placeholder, not a floating label over it */
html.pie-premium .pp-shell.pp-planner #pnrSyncModal .check-pnr .ffl-label {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #pnrSyncModal .check-pnr .form-control::placeholder {
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #pnrSyncModal .btns .single-pnr-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--pp-acc) !important;
    border-radius: 10px !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
    font: 13.5px var(--pp-sans) !important;
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* Disabled until a valid PNR is typed: quiet, but still readable */
html.pie-premium .pp-shell.pp-planner #pnrSyncModal .btns .single-pnr-btn.disabled {
    border-color: var(--pp-line-2) !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-muted) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Status pop-ups: title left, counts as chips, close at the far right */
html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-dialog {
    max-width: min(1000px, calc(100vw - 48px));
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header {
    flex-wrap: wrap;
    gap: 12px;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header > div:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header .top-reservation-actions {
    container-type: normal;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header .top-reservation-actions > span:not(.import-status-icon) {
    margin: 0 8px 0 0 !important;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header .import-status-icon {
    display: inline-grid !important;
    place-items: center;
    flex: none;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #c0262d;
    color: #fff;
    font-size: 10px;
    line-height: 1 !important;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header .import-status-icon.bg-success {
    background: var(--pp-ok) !important;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header .import-status-icon.bg-warning {
    background: #d98a00 !important;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .modal-header .btn-close {
    margin: 0 !important;
}

/* The list: the design's table, with a message when it is empty */
html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .table {
    margin: 0;
    border-collapse: collapse;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .table thead th {
    padding: 12px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 12px var(--pp-bold) !important;
    text-align: left !important;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .table tbody td {
    padding: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-planner :is(#importSaberModalStatus, #importBookingModalStatus) .table-responsive-sm:has(tbody:empty)::after {
    content: "Nothing imported yet.";
    display: block;
    padding: 28px 10px;
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
    text-align: center;
}

/* Email import status: empty row centred, support line on one row */
html.pie-premium .pp-shell.pp-planner #importBookingModalStatus .table tbody td[colspan] {
    padding: 28px 10px !important;
    border-bottom: 0 !important;
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner #importBookingModalStatus .table tbody td[colspan] .small-text {
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #importBookingModalStatus .modal-footer.import-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner #importBookingModalStatus .modal-footer.import-status br {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #importBookingModalStatus .modal-footer.import-status small {
    color: var(--pp-ink-3) !important;
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #importBookingModalStatus .modal-footer.import-status a {
    color: var(--pp-acc) !important;
}


/* ==========================================================================
   Planner — Accounting tab (TripAccounting.vue): convenience fees as a card, even
   final-payment fields, standard buttons
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > div:first-child {
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > button {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0 !important;
    height: 36px !important;
    border: 1px solid var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > button:hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

/* The payment methods the fee applies to: quiet chips */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0 !important;
    padding: 0;
    list-style: none !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > ul li {
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > ul:empty::before {
    content: "No payment methods set";
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

/* Final payment: three fields at one height with the same small label */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section > .row {
    align-items: flex-start;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section :is(.form-control, .vdp-datepicker input) {
    height: 52px !important;
    min-height: 52px;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .form-floating > .form-control {
    padding: 22px 12px 6px !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .vdp-datepicker input {
    padding: 22px 36px 6px 12px !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .bootstrap-select.form-control,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .bootstrap-select > .dropdown-toggle {
    height: 52px !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .ffl-label {
    padding: 8px 12px 0 !important;
    color: var(--pp-muted) !important;
    font: 11.5px var(--pp-bold) !important;
    transform: none !important;
    opacity: 1 !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .form-control::placeholder {
    color: var(--pp-muted);
    font: 13.5px var(--pp-sans);
}

/* The description field already says what it is in its label */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .form-floating > .form-control::placeholder {
    color: transparent;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .vdp-datepicker + i,
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab .final-payment-section .vdp-datepicker ~ .icon {
    top: 18px !important;
}

/* Save / Update Text: the design's standard button */
html.pie-premium .pp-shell.pp-planner .trip-accounting-tab :is(.btn.fs-14, .btn-gray.bg-dark-gray) {
    height: 40px !important;
    padding: 0 18px !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > button.btn.btn-primary.btn-small {
    border: 1px solid var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-accounting-tab > div:first-child:has(> ul) > button.btn.btn-primary.btn-small:hover {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

/* The open trip panel's fixed column is a bit wider than its card: keep that strip see-through so
   it never paints over the first tile's selected outline */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar {
        background: transparent !important;
        pointer-events: none;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar > * {
        pointer-events: auto;
    }
}

/* "More" tiles: title on top, one 22px line below, the same height whether it holds a number or a note */
html.pie-premium .pp-shell.pp-planner .pp-tl.sm {
    grid-template-rows: auto 22px;
    align-content: start;
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.sm > div {
    align-items: center;
    min-height: 22px;
    line-height: 22px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.sm > div b {
    line-height: 22px;
}

html.pie-premium .pp-shell.pp-planner .pp-tl.sm > div > span {
    font-size: 12.5px;
}

/* ==========================================================================
   Planner — every section page opened from the tiles: one white card, no repeated title
   (the "Back to itinerary" bar names the section), contents flush inside it
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .trip-photos-tab, .trip-documents-tab, .automated-messages-tab, .trip-activity-log-tab) {
    margin: 0 !important;
    padding: 18px 20px 20px !important;
    border-radius: 18px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

/* Titles already shown in the bar above */
html.pie-premium .pp-shell.pp-planner .received-forms-tab > div:first-child > .received-section,
html.pie-premium .pp-shell.pp-planner .trip-documents-tab > span:first-child,
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .activity-log-title {
    display: none !important;
}

/* Tables: no second card, no extra indent */
html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
}

html.pie-premium .pp-shell.pp-planner :is(.received-forms-tab, .automated-messages-tab) .crm_table.container-fluid {
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_wrapper > .row {
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner :is(.booking-confirmation-tab, .received-forms-tab, .automated-messages-tab) .dataTables_wrapper > .row > [class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Received forms: Refresh and full screen on the table's top row */
html.pie-premium .pp-shell.pp-planner .received-forms-tab > div:first-child > .received-forms {
    margin: 0 0 4px !important;
}

/* Automated messages: "+ Add new" on the left, refresh / full screen on the right, one row */
html.pie-premium .pp-shell.pp-planner .automated-messages-tab > .btn.btn-primary {
    margin-bottom: 10px !important;
}

/* Trip photos: the notes as a quiet line above the drop zone */
html.pie-premium .pp-shell.pp-planner .trip-photos-tab > .small-text,
html.pie-premium .pp-shell.pp-planner .trip-photos-tab > p.small-text {
    margin: 0 0 2px;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-photos-tab .crm_photos {
    margin-top: 12px;
}

html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .crm_photos,
html.pie-premium .pp-shell.pp-planner :is(.trip-photos-tab, .trip-documents-tab) .crm_photos > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-documents-tab .crm_photos {
    --bs-gutter-x: 16px;
    margin: 0 !important;
}

/* Activity log: the filter bar sits flat in the card */
html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .activity-log-header {
    margin-bottom: 12px;
}

html.pie-premium .pp-shell.pp-planner .trip-activity-log-tab .activity-filter-bar {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Trip information: the form in one white card that grows with the page (no 50dvh inner scroller),
   Update pinned to the card's foot while the form scrolls past */
html.pie-premium .pp-shell.pp-planner #trip_traveler_info_v3_planner {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner #trip_traveler_info_v3_planner .trip_profile_page {
    height: auto;
    overflow: visible;
    padding: 20px !important;
}

html.pie-premium .pp-shell.pp-planner #trip_traveler_info_v3_planner > .me-5 {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 !important;
    padding: 12px 20px;
    border-top: 1px solid var(--pp-line);
    border-radius: 0 0 18px 18px;
    background: var(--pp-panel);
}

/* Trip content, Information tab: the same white rows as the Reservations tab
   (template1.css gives this list's row head an 8px bottom margin and no background) */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-event-category-header {
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-event-category-header .panels-head {
    margin: 0 !important;
}

/* Open trip panel: the Trip health list is hidden for now (the Trip health tile still shows it) */
html.pie-premium .pp-shell.pp-planner .pp-tph-health {
    display: none !important;
}

/* Create / edit travel itinerary layout popup: a quiet subtitle under the title, the layout
   select across the body (View / Edit links beside it), the template link and buttons in line */
html.pie-premium .pp-shell.pp-planner #itinerarySettingShowModal .modal-title > p {
    margin: 4px 0 0;
    color: var(--pp-ink-3);
    font: 400 13.5px/1.4 var(--pp-sans);
    white-space: normal !important;
}

html.pie-premium .pp-shell.pp-planner #itinerarySettingShowModal .modal-body > .row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

html.pie-premium .pp-shell.pp-planner #itinerarySettingShowModal .modal-body > .row > .col-md-10 {
    flex: 1 1 auto;
    width: auto;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner #itinerarySettingShowModal .modal-body > .row > .col-md-2 {
    flex: 0 0 auto;
    width: auto;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner #itinerarySettingShowModal .modal-body > .row > .col-md-2:empty {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #itinerarySettingShowModal .modal-body > a.color-pink {
    float: none !important;
    display: inline-block;
    margin-top: 2px;
    color: var(--pp-acc) !important;
    font-size: 13px !important;
    font-weight: 500;
}

html.pie-premium .pp-shell.pp-planner #itinerarySettingShowModal .modal-footer {
    justify-content: flex-end;
}

/* Trip status menu: the banner no longer clips it (its image and shade keep the rounded corners),
   it opens above the money strip, and the chosen status reads white on template1's purple */
html.pie-premium .pp-shell.pp-planner .trip-header .trip-banner {
    overflow: visible;
}

html.pie-premium .pp-shell.pp-planner .trip-banner > img,
html.pie-premium .pp-shell.pp-planner .trip-banner > .overlay {
    border-radius: inherit;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .dropdown-menu {
    z-index: 30;
    overflow: hidden;
    border: 0;
    box-shadow: 0 12px 32px -10px rgba(17, 17, 26, .35);
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .dropdown-menu .dropdown-item.active,
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .dropdown-menu .dropdown-item:active {
    color: #fff !important;
}

/* App footer: one heading style for all four columns (the "PlanitEasy" heading is a link and the
   app heading used another font), every link list starting on the same line, card corners like the page */
html.pie-premium .pp-shell .pie_footer {
    border-radius: var(--pp-r-card) var(--pp-r-card) 0 0;
}

html.pie-premium .pp-shell .pie_footer .footer-detalis strong,
html.pie-premium .pp-shell .pie_footer .footer-detalis strong a {
    display: inline-block;
    color: var(--pp-ink) !important;
    font: 15px/22px var(--pp-bold) !important;
    letter-spacing: 0;
    text-decoration: none;
}

html.pie-premium .pp-shell .pie_footer .footer-detalis ul li:first-child {
    height: 22px;
    margin: 0 0 14px !important;
    padding: 0 !important;
    line-height: 22px;
}

html.pie-premium .pp-shell .pie_footer .footer-detalis a.d-block:has(> strong) {
    margin: 6px 0 14px;
    line-height: 22px;
}

html.pie-premium .pp-shell .pie_footer .footer-detalis a.d-block:has(> strong) ~ img {
    margin-top: 0 !important;
}

/* Planner right edge: the same 12px gap as the rail / card side (was 20px page padding + 12px),
   with the header's right end on the same line */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner:has(.pp-app-rail) .trip-planner-compact .page-content {
        padding-right: 0;
    }

    /* 12px inside the white bar's rounded corner (the bar is inset 12px), so the avatar is not cut */
    html.pie-premium .pp-shell.pp-planner:has(.pp-app-rail) .header-wrapper .header.pp-top {
        padding-right: 24px !important;
    }
}

/* Information items on a day (DI events): the same card as a reservation. White, the category
   icon as the 40px tile on the left, title over the category name, the ⋯ menu top-right */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list {
    position: relative;
    margin: 0 0 10px !important;
    padding: 14px 54px 12px 74px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 16px !important;
    background: var(--pp-panel) !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:hover {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 {
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.align-items-baseline {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
    min-height: 40px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info {
    display: contents;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info > i.category-icon {
    position: absolute;
    top: 14px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font-size: 18px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info > p {
    order: 2;
    margin: 0 !important;
    color: var(--pp-ink-3) !important;
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.align-items-baseline > div:not(.planner-booking-info) > div {
    padding: 0 !important;
    color: var(--pp-ink);
    font: 16px/1.35 var(--pp-sans);
}

/* ⋯ menu: a round button in the card's top-right corner */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list > div > .dropdown-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list > div > .dropdown-toggle::after {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list > div > .dropdown-toggle:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

/* Details toggle (notes / places / photos) under the ⋯ */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between:has(> .ms-auto) {
    position: absolute;
    right: 12px;
    bottom: 10px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between .ms-auto .cursor-pointer {
    color: var(--pp-ink-3);
}

/* Information items take the full row, like the reservation cards (their section is a wrapping flex row) */
html.pie-premium .pp-shell.pp-planner #planner_booking [class*="dd_day_"] > div:has(> .event-booking-list) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list {
    width: 100%;
}

/* Information cards match the reservation cards: a plain icon (no tile) and the same inset */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list {
    padding-left: 58px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info > i.category-icon {
    top: 16px;
    left: 22px;
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: transparent;
    color: var(--pp-ink-2);
}

/* Information cards: the whole card drags (grab cursor), so the hover grip in the bottom-right
   corner, which landed between the ⋯ menu and the details toggle, is not shown */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .information-drag-handle {
    display: none !important;
}

/* Information cards: ⋯ and the details toggle side by side in the top-right corner,
   two 32px buttons on one line (the ⋯ moves left only when the card has details) */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between:has(> .ms-auto) {
    top: 12px;
    right: 12px;
    bottom: auto;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between .ms-auto .cursor-pointer {
    display: grid !important;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between .ms-auto .cursor-pointer:hover {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between .ms-auto .cursor-pointer > .pie-icon-map-pin {
    display: none;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between .ms-auto .cursor-pointer > .fa {
    font-size: 18px !important;
    line-height: 1;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.my-1 .ms-auto .cursor-pointer) > div > .dropdown-toggle {
    right: 48px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.my-1 .ms-auto .cursor-pointer) {
    padding-right: 90px !important;
}

/* Before trip / After trip: Book and + stay in the header whether the section is open or closed,
   so toggling only flips the chevron (closed, "Nothing planned yet" sits before them) */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:is(:has(#dd_day_Pre), :has(#dd_day_Post)):has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-actions > .tp-shop-dropdown {
    display: block !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:is(:has(#dd_day_Pre), :has(#dd_day_Post)):has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-actions > .days-btn {
    display: flex !important;
}

/* Day header "+ Add reservation" menu: a compact card that scrolls, small category labels,
   14px rows with a soft hover, instead of a page-tall list in large type */
html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown > .dropdown-menu {
    width: 260px;
    min-width: 0;
    max-height: min(420px, 60vh);
    overflow-y: auto;
    padding: 6px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 16px 40px -14px rgba(17, 17, 26, .28);
    scrollbar-width: thin;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown > .dropdown-menu > li > .bold {
    padding: 10px 10px 4px;
    color: var(--pp-ink-3);
    font: 11px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown > .dropdown-menu > li:first-child > .bold {
    padding-top: 6px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown > .dropdown-menu > li > .dropdown-item {
    padding: 7px 10px !important;
    border-radius: 8px;
    color: var(--pp-ink);
    font: 14px/1.3 var(--pp-sans);
    white-space: normal;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .booking_type_dropdown > .dropdown-menu > li > .dropdown-item:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

/* Open/closed is decided by the chevron alone. toggleBooking() also runs jQuery's slideToggle(),
   which (seeing the body already shown) animated it shut before it snapped open again. Pin the
   properties the slide animates so opening is immediate. */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-up) > .accordion-collapse > [class*="dd_day_"] {
    height: auto !important;
    overflow: visible !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-up) > .accordion-collapse > .mt-3[class*="dd_day_"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Trip content rows: the label takes the row's free width (template1.css fixes it at 140px / 65px,
   which cut "Accommodation", "Transportation"); "…" only if it truly does not fit */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header .panels-head > .d-flex {
    flex: 1 1 auto;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .tab-content-header .panels-head > .d-flex > h4 {
    width: auto !important;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* ==========================================================================
   Planner — phones (640px and below): the banner grows with its title, day headers put their
   buttons on a second line, reservation cards wrap their actions and price
   ========================================================================== */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .trip-header .trip-banner {
        height: auto;
        min-height: 230px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .banner-wrapper {
        position: relative;
        inset: auto;
        min-height: 230px;
        gap: 6px 8px;
        padding: 14px 16px 16px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name,
    html.pie-premium .pp-shell.pp-planner .trip-banner h1.mb-1,
    html.pie-premium .pp-shell.pp-planner .trip-banner h1 .trip_name_id {
        font-size: 24px !important;
        line-height: 1.2 !important;
        word-break: normal !important;
        overflow-wrap: break-word;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
        height: 32px;
        padding: 0 10px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover .cover-text {
        display: none;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .planner_detail > .d-flex {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    /* Day headers: number + title on the first line, the buttons on the next */
    html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .planner-reservation > .summary-day-section {
        align-items: flex-start !important;
        gap: 10px;
        padding: 12px 14px !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-row {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-actions > i.add_hotel {
        margin-left: auto !important;
    }

    /* Reservation and information cards: smaller tile inset, actions and price wrap */
    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail:not(.overnight_trip) {
        padding: 14px 12px 12px 62px !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-title > .planner-booking-info:first-child > i {
        left: 12px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title {
        flex-wrap: wrap;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row > [class*="col-"] {
        flex: 1 1 100% !important;
        max-width: 100%;
        width: 100%;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list {
        padding-left: 62px !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.align-items-baseline > .planner-booking-info > i.category-icon {
        left: 12px;
    }
}

/* Phones: the money strip sits under the banner, so the hidden classic price / pills no longer
   need to hold their space in it (they made the banner tall with the title at the top) */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .trip-banner .trip_price,
    html.pie-premium .pp-shell.pp-planner .trip-banner .itinerary-count {
        display: none !important;
    }
}

/* Tablets and phones too: the itinerary flows with the page instead of the classic 750px
   inner scroll box, so the day list is never cut off above Cancel / Archive */
@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex .trip-reservation-tab,
    html.pie-premium .pp-shell.pp-planner .pp-itb.attached + .planner-itinerary-flex > .booking-new-section {
        height: auto !important;
        overflow: visible !important;
    }
}

/* Phones: reservation card actions on their own row under the title; chips and price wrap from the left */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title > div:last-child {
        flex: 1 1 100% !important;
        flex-wrap: wrap;
        margin: 0 !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title > div:first-child {
        flex: 1 1 100%;
        min-width: 0;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .text-end:has(> .track-info) {
        text-align: left !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .booking-drop-down {
        display: flex;
        flex: 1 1 100% !important;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .price-action {
        margin-left: 0 !important;
    }
}

/* Header: the agency name folds into the avatar a little earlier, so with the full side menu
   open (Trips, 1024–1280px) it no longer pushes the avatar off the right edge */
@media (max-width: 1280px) {
    html.pie-premium .pp-shell .pp-org-name {
        display: none;
    }
}

/* Lists (Trips): on phones the search takes its own line and the filter buttons wrap under it */
@media (max-width: 760px) {
    html.pie-premium .pp-shell .pp-toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    html.pie-premium .pp-shell .pp-toolbar > .pp-search {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Tablets and small laptops (641–1100px): with Trip content beside it the day list is narrow,
   so day headers and cards wrap the same way as on phones */
@media (min-width: 641px) and (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .planner-reservation > .summary-day-section {
        align-items: flex-start !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-row {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-actions > i.add_hotel {
        margin-left: auto !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title {
        flex-wrap: wrap;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title > div:first-child {
        flex: 1 1 100%;
        min-width: 0;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title > div:last-child {
        flex: 1 1 100% !important;
        flex-wrap: wrap;
        margin: 0 !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail > .row > [class*="col-"] {
        flex: 1 1 100% !important;
        max-width: 100%;
        width: 100%;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .text-end:has(> .track-info) {
        text-align: left !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .booking-drop-down {
        display: flex;
        flex: 1 1 100% !important;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .price-action {
        margin-left: 0 !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .booking-new-section {
        min-width: 0;
    }
}

/* Information sections only have the chevron: keep it beside the title instead of on its own line */
@media (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:is(:has(#dd_day_General), :has(#dd_day_GeneralPost)) .summary-day-section .day-header-row {
        flex-wrap: nowrap !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:is(:has(#dd_day_General), :has(#dd_day_GeneralPost)) .summary-day-section .day-header-actions {
        flex: none;
    }
}

/* Reservation cards: the status chips always start right after the date pill and the price sits
   at the far right, whatever wrapper the card type uses (packages nest the row in .booking-accordion,
   hotels wrap the chips in a floated .pull-right) */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row > [class*="col-"]:has(.track-info) {
    flex: 1 1 auto !important;
    width: auto;
    max-width: none;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row > [class*="col-"]:has(.track-info) :is(div, .text-end):has(> .track-info),
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row > [class*="col-"]:has(.track-info) > div:has(.track-info) {
    float: none !important;
    width: 100%;
    margin-left: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info {
    width: 100%;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .booking-drop-down {
    justify-content: flex-start !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .track-info > .price-action {
    margin-left: auto !important;
}

/* ...and the date column beside it is only as wide as the date pill (Bootstrap's col-lg-4 kept a
   fixed third of the card, which pushed the chips to the middle on packages / other reservations) */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .row:has(> [class*="col-"] .track-info) > [class*="col-"]:not(:has(.track-info)) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* ==========================================================================
   Planner — loading skeleton (TripBookingNew.vue .skeleton-loading-container): shaped like the
   real day cards (white 16px cards, a 40px tile, two text lines, a price on the right) with a
   soft shimmer instead of Bootstrap's grey glow
   ========================================================================== */
@keyframes pp-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .placeholder {
    display: inline-block;
    min-height: 12px;
    border-radius: 7px !important;
    background: linear-gradient(90deg, #eceef2 30%, #f6f7f9 50%, #eceef2 70%) !important;
    background-size: 300% 100% !important;
    opacity: 1 !important;
    animation: pp-shimmer 1.4s ease-in-out infinite !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container > .day_booking_section {
    margin: 0 0 12px !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .accordion-item {
    overflow: hidden;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--pp-panel) !important;
    box-shadow: var(--pp-shadow);
}

/* Day header: "01" block, title + date lines, chevron */
html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .summary-day-section {
    align-items: center !important;
    gap: 16px;
    min-height: 66px;
    padding: 14px 18px 14px 22px !important;
    border: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .summary-day-section > .placeholder:first-child {
    width: 34px !important;
    height: 26px !important;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .summary-day-section .flex-grow-1 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .summary-day-section .flex-grow-1 > .placeholder:first-child {
    width: 160px !important;
    height: 14px;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .summary-day-section .flex-grow-1 > .placeholder:last-child {
    width: 100px !important;
    height: 10px;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .summary-day-section .justify-content-between > .placeholder {
    width: 120px !important;
    height: 32px;
    border-radius: 10px !important;
}

/* Reservation rows: white cards with the 40px tile like .travel_detail */
html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .accordion-collapse {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 18px 18px;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content {
    margin: 0 !important;
    padding: 16px 18px 14px !important;
    border: 1px solid var(--pp-line);
    border-radius: 16px !important;
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content .d-flex > .placeholder:first-child {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin-right: 16px !important;
    border-radius: 12px !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content .flex-grow-1 > .placeholder {
    height: 12px;
    margin-bottom: 9px !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content .flex-grow-1 > .placeholder:first-child {
    width: 45% !important;
    height: 15px;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content .flex-grow-1 > .placeholder:nth-child(2) {
    width: 25% !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content .flex-grow-1 > .placeholder:last-child {
    width: 60% !important;
    height: 22px;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content .text-end > .placeholder {
    height: 14px;
}

html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .daily-itinerary-accommodation-content .text-end > .placeholder:first-child {
    width: 110px !important;
    height: 32px;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
}

/* Banner while the cover image loads: shimmer instead of the broken-image icon */
html.pie-premium .pp-shell.pp-planner .trip-header .trip-banner:has(> img:is(:not([src]), [src=""])) {
    background: linear-gradient(90deg, #e6e8ec 30%, #f1f2f5 50%, #e6e8ec 70%);
    background-size: 300% 100%;
    animation: pp-shimmer 1.4s ease-in-out infinite;
}

html.pie-premium .pp-shell.pp-planner .trip-banner > img:is(:not([src]), [src=""]) {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html.pie-premium .pp-shell.pp-planner .skeleton-loading-container .placeholder,
    html.pie-premium .pp-shell.pp-planner .trip-header .trip-banner {
        animation: none !important;
    }
}

/* Header skeleton (PremiumPlannerTiles.vue while the trip loads): tile cards with a label and a
   value line, then a toolbar-shaped bar — same shimmer as the itinerary skeleton */
html.pie-premium .pp-shell.pp-planner .pp-sk {
    display: block;
    border-radius: 7px;
    background: linear-gradient(90deg, #eceef2 30%, #f6f7f9 50%, #eceef2 70%);
    background-size: 300% 100%;
    animation: pp-shimmer 1.4s ease-in-out infinite;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-wrap {
    pointer-events: none;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-tile {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    min-height: 92px;
    cursor: default;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-label {
    width: 70%;
    height: 11px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-value {
    width: 45%;
    height: 22px;
    border-radius: 8px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    margin-top: 12px;
    padding: 0 16px;
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner .pp-sk-seg {
    width: 220px;
    height: 36px;
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-chip {
    width: 40px;
    height: 36px;
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-btn {
    width: 170px;
    height: 40px;
    margin-left: auto;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    html.pie-premium .pp-shell.pp-planner .pp-sk {
        animation: none;
    }
}

/* The footer waits for the itinerary: until its sections render, the short page pulled the footer
   up under the banner */
html.pie-premium .pp-shell.pp-planner:not(:has(#planner_booking .planner-booking-list)) .pie_footer {
    display: none !important;
}

/* Itinerary skeleton in the planner layout (PremiumPlannerIndex.vue): shown only until the
   itinerary has mounted — then its day list, or TripBookingNew's own skeleton, takes over */
html.pie-premium .pp-shell.pp-planner .pp-itin-skel {
    margin-top: 12px;
}

html.pie-premium .pp-shell.pp-planner .pp-itin-skel > .pp-sk-bar {
    margin: 0 0 12px;
}

html.pie-premium .pp-shell.pp-planner:has(#planner_booking :is(.planner-booking-list, .skeleton-loading-container)) .pp-itin-skel {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner .pp-itin-skel .placeholder {
    width: 100%;
}

html.pie-premium .pp-shell.pp-planner .pp-itin-skel .daily-itinerary-accommodation-content .text-end > .placeholder:last-child {
    width: 70px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner:has(> img:is(:not([src]), [src=""])) > .overlay {
    display: none;
}

/* Trip header skeleton (PremiumPlannerIndex.vue, until the trip loads): the banner's shape with
   its code and status chips, Change cover, title, date line and money strip */
html.pie-premium .pp-shell.pp-planner .pp-banner-skel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    position: relative;
    height: 260px;
    padding: 20px 24px;
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell.pp-planner .pp-banner-skel-top {
    position: absolute;
    top: 20px;
    right: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-code {
    width: 64px;
    height: 26px;
    border-radius: 8px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-status {
    width: 104px;
    height: 30px;
    border-radius: 8px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-cover {
    width: 136px;
    height: 36px;
    margin-left: auto;
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-title {
    width: min(520px, 70%);
    height: 34px;
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-meta {
    width: min(280px, 50%);
    height: 14px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-money {
    width: min(540px, 90%);
    height: 40px;
    border-radius: 12px;
}

/* The classic header is empty until then */
html.pie-premium .pp-shell.pp-planner .container-fluid:has(> .pp-banner-skel) > .trip-header,
html.pie-premium .pp-shell.pp-planner .container-fluid:has(> .pp-banner-skel) > #planner_trip_header {
    display: none !important;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .pp-banner-skel {
        height: 230px;
        padding: 14px 16px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-banner-skel-top {
        top: 14px;
        right: 16px;
        left: 16px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-sk-title {
        height: 26px;
    }
}

/* Top header and app rail skeletons (PremiumPlannerIndex.vue, until the user session loads):
   the header's search, Ask AI, three icons, trial pill and avatar; the rail's icon column */
html.pie-premium .pp-shell.pp-planner .container-fluid:has(> .pp-top-skel) {
    position: relative;
}

html.pie-premium .pp-shell.pp-planner .pp-top-skel {
    position: absolute;
    top: -76px;
    right: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 68px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-search {
    width: min(440px, 40%);
    height: 40px;
    border-radius: 12px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-ask {
    width: 90px;
    height: 36px;
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-trial {
    width: 220px;
    height: 32px;
    margin-left: auto;
    border-radius: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-sk-av {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

html.pie-premium .pp-shell.pp-planner .pp-rail-skel {
    display: none;
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-rail-skel {
        position: fixed;
        z-index: 11;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 64px;
        padding: 72px 0 16px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-rail-skel > .pp-sk {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .pp-sk-trial,
    html.pie-premium .pp-shell.pp-planner .pp-sk-ico {
        display: none;
    }
}

/* ==========================================================================
   Planner — Hotel quick popup (the compact #bookingPopupModal with the Rooms block): the design's
   two-column layout. Form fields on the left, Rooms on the right, sub-types as pills, the note
   rows as soft grey rows. Same fields and save as before; layout only.
   ========================================================================== */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) {
    width: min(1080px, calc(100vw - 32px));
    max-width: none;
}

/* Sub-types: Hotel / Apartment / Villa / Other as pills instead of a dropdown */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-toggle {
    display: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-menu {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    inset: auto !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-menu .dropdown-item {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 14.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-menu .dropdown-item:hover {
    border-color: var(--pp-ink-3);
    background: var(--pp-panel);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-menu .dropdown-item.active {
    border-color: var(--pp-ink);
    background: var(--pp-ink) !important;
    color: #fff !important;
}

/* Body: the form column spans the dialog, then splits into two columns */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .seach-location-wrapper {
    padding: 0 24px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .search-location {
    margin: 16px 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .search-location > [class*="col-"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .search-location > [class*="col-"] > .row {
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .search-location > [class*="col-"] > .row > .col-12:has(> .ic-inline-rooms) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 12px 28px;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > * {
    grid-column: 1;
    width: auto;
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .ic-inline-rooms {
    grid-column: 2;
    grid-row: 1 / span 12;
    padding: 20px 20px 22px !important;
}

/* Left-column rows: fields fill the column (the classic half/quarter widths are for one column) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row {
    flex-wrap: nowrap;
    gap: 12px;
    --bs-gutter-x: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row > [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row > .library-action-col {
    flex: 0 0 auto;
    align-items: stretch !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row > .library-action-col > :first-child {
    min-height: 48px;
}

/* Rooms box title */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .ic-inline-rooms-head > label {
    color: var(--pp-ink);
    font: 17px var(--pp-bold) !important;
}

/* Note from Advisor / Description / Cancellation Policy / Cancellation Date: soft grey rows */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-field {
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-header > label {
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-header > .booking-inline-edit-icon {
    margin-left: auto;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group:has(> .booking-inline-view-field),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .form-group {
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .add-link {
    float: none !important;
    justify-self: start;
    color: var(--pp-acc);
    font: 14px var(--pp-bold);
    cursor: pointer;
}

/* Phones and narrow windows: one column again, Rooms after the dates */
@media (max-width: 760px) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) {
        grid-template-columns: minmax(0, 1fr);
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .ic-inline-rooms {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ==========================================================================
   Planner — banner actions (PremiumBannerActions.vue): Submit sale · Emails · Preview · Share,
   glass buttons on the banner's bottom-right (Share white), on the money strip's line
   ========================================================================== */
html.pie-premium .pp-shell {
    --pp-i-eye: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");
    --pp-i-share: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2015V3M7%208l5-5%205%205M5%2013v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6'/%3E%3C/svg%3E");
}

html.pie-premium .pp-shell .pp-ic-eye { --pp-i: var(--pp-i-eye); }
html.pie-premium .pp-shell .pp-ic-share { --pp-i: var(--pp-i-share); }

html.pie-premium .pp-shell.pp-planner .pp-bacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 12px 0 0;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-bact-w {
    position: relative;
}

html.pie-premium .pp-shell.pp-planner .pp-bact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--pp-line-2);
    border-radius: 12px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 14.5px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-bact .pp-ic {
    width: 18px;
    height: 18px;
}

html.pie-premium .pp-shell.pp-planner .pp-bact.pri .pp-ic {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .pp-bact-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-width: 320px;
    padding: 6px;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 16px 40px -14px rgba(17, 17, 26, .28);
}

html.pie-premium .pp-shell.pp-planner .pp-bact-menu > small {
    padding: 8px 10px 4px;
    color: var(--pp-ink-3);
    font: 11px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner .pp-bact-menu > button {
    overflow: hidden;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-bact-menu > button:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

/* On the banner (desktop): glass buttons on the money strip's line, Share white */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-bacts {
        position: relative;
        z-index: 4;
        height: 0;
        margin: 0;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts > * {
        position: relative;
        top: -78px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts {
        padding-right: 24px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bact {
        border-color: rgba(255, 255, 255, .24);
        background: rgba(255, 255, 255, .16);
        color: #fff;
        backdrop-filter: blur(10px);
    }

    html.pie-premium .pp-shell.pp-planner .pp-bact:hover,
    html.pie-premium .pp-shell.pp-planner .pp-bact.on {
        background: rgba(255, 255, 255, .26);
    }

    html.pie-premium .pp-shell.pp-planner .pp-bact.pri {
        border-color: #fff;
        background: #fff;
        color: var(--pp-ink);
    }

    html.pie-premium .pp-shell.pp-planner .pp-bact.pri:hover {
        background: #f2f2f4;
    }
}

/* ==========================================================================
   Accent: Bordeaux (#7A1A37). The new look's tokens carry it; these classic utility classes
   (template1.css / common.css hard-code PIE Magenta #A20090) follow it inside the new look.
   ========================================================================== */
html.pie-premium .pp-shell :is(.add-link, .color-pink, .color-blue, .purple-btn, .upload-text, .reset-text, .selection-reset, .confirmation-link, .count_clr:not(.active)) {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell :is(.btn-primary, .btn-blue, .btn-pink):not(:disabled) {
    border-color: var(--pp-acc) !important;
    background-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell :is(.btn-primary, .btn-blue, .btn-pink):not(:disabled):hover {
    border-color: #63142c !important;
    background-color: #63142c !important;
}

html.pie-premium .pp-shell .dropdown-menu :is(.dropdown-item.active, .dropdown-item:active) {
    background-color: var(--pp-acc) !important;
}

/* Help button, warning icon, AI chips and BETA badges (AiFieldSparkle.vue / AiBetaBadge.vue hard-code
   PIE Magenta): Bordeaux, with the AI gradient running Bordeaux → rose → violet */
html.pie-premium .pp-shell .modal-help-videos .head.pp-ibtn,
html.pie-premium .pp-shell .fa-exclamation-triangle.blink-text {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell .ai-spark {
    --ai-1: #7a1a37;
    --ai-2: #b8436a;
    --ai-3: #6b3fc4;
}

html.pie-premium .pp-shell .ai-spark__btn {
    background: rgba(122, 26, 55, .07);
    color: #6a1530;
}

html.pie-premium .pp-shell .ai-spark__btn:hover:not(:disabled),
html.pie-premium .pp-shell .ai-spark__btn--open {
    background: rgba(122, 26, 55, .12);
    color: #5a1128;
    box-shadow: inset 0 0 0 1px rgba(122, 26, 55, .28), 0 4px 12px -6px rgba(122, 26, 55, .5);
}

html.pie-premium .pp-shell .ai-beta--soft {
    border-color: rgba(122, 26, 55, .26);
    background: rgba(122, 26, 55, .08);
    color: var(--pp-acc);
}

/* Hotel popup note rows: the empty "—" is a placeholder, not an alert */
html.pie-premium .pp-shell #bookingPopupModal .booking-inline-view-field > .color-red {
    color: var(--pp-muted) !important;
}

/* Hotel popup: Library stays the design's outlined button (it is a .btn-primary underneath) */
html.pie-premium .pp-shell #bookingPopupModal .library-action-col .btn:not(:disabled),
html.pie-premium .pp-shell #bookingPopupModal .library-action-col .btn:not(:disabled):hover {
    border: 1px solid var(--pp-acc-line) !important;
    background-color: var(--pp-panel) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #bookingPopupModal .library-action-col .btn:not(:disabled):hover {
    background-color: var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell .tag-count {
    background-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell .count_clr.active {
    background-color: var(--pp-acc) !important;
    color: #fff !important;
}

/* ==========================================================================
   Popups — fee pairs (% and amount) as one input with a %/$ switch (PremiumFeeToggle.vue).
   The table becomes two columns, label | input; the unchosen input is hidden, not removed.
   ========================================================================== */
html.pie-premium .modal.show table > tbody[data-pp-fees] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

html.pie-premium .modal.show table > tbody[data-pp-fees] > tr {
    display: contents;
}

html.pie-premium .modal.show table > tbody[data-pp-fees] > tr > :is(td, th) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

html.pie-premium .modal.show table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html.pie-premium .modal.show table > tbody[data-pp-fees] > tr > td.pp-fee-off {
    display: none !important;
}

html.pie-premium .modal .pp-ms {
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--pp-panel-2, #f3f2f5);
    box-shadow: inset 0 0 0 1px var(--pp-line, #ebebef);
}

html.pie-premium .modal .pp-ms > button {
    width: 30px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--pp-ink-3, #6b6b73);
    font: 13px var(--pp-bold, inherit);
    cursor: pointer;
}

html.pie-premium .modal .pp-ms > button[aria-pressed="true"] {
    background: #fff;
    color: var(--pp-acc, #7a1a37);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}

/* Each fee pair stacks: label and switch on one line, its input full width under it */
html.pie-premium .modal.show table > tbody[data-pp-fees] > tr > td[data-pp-fee],
html.pie-premium .modal.show table > tbody[data-pp-fees] > tr:has(> td[data-pp-fee]) > td:not(.pp-fee-off),
html.pie-premium .modal.show table > tbody[data-pp-fees] > tr:has(> td[data-pp-fee]) + tr > td:not(.pp-fee-off) {
    grid-column: 1 / -1;
    width: auto !important;
}

html.pie-premium .modal.show table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
    padding: 8px 10px !important;
    border-bottom: 0 !important;
}

/* ==========================================================================
   Hotel quick popup, design pass 2 (PremiumHotelPopupExtras.vue adds the data bits):
   "Accommodation · Hotel" tab + day pill + status on one line, sub-type pills on their own
   row, borderless fields, nights line under the dates, compact note rows with a +
   ========================================================================== */
html.pie-premium .pp-shell {
    --pp-i-moon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2014.5A8%208%200%201%201%209.5%204a6.5%206.5%200%200%200%2010.5%2010.5z'/%3E%3C/svg%3E");
    --pp-i-bed: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206v13M3%2015h18M21%2019v-6a3%203%200%200%200-3-3h-8v5M7%2011h.01'/%3E%3C/svg%3E");
}

html.pie-premium .pp-shell .pp-ic-moon { --pp-i: var(--pp-i-moon); }

/* Header: tab · day pill · status, then the pills row */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-popup-header {
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-popup-header > .row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-popup-header > .row > .col-auto:first-child,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-popup-header .booking-sub-category-dropdown {
    display: contents;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-toggle {
    display: inline-flex !important;
    grid-row: 1;
    grid-column: 1;
    align-items: center;
    gap: 6px;
    height: 54px;
    margin-left: 24px;
    padding: 0 10px 0 36px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--pp-ink) !important;
    border-radius: 0 !important;
    background: transparent var(--pp-i-bed) 6px 50% / 20px no-repeat !important;
    color: var(--pp-ink-3) !important;
    font: 16px var(--pp-sans) !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-toggle[data-pp-cat]::before {
    content: attr(data-pp-cat) "  ·";
    color: var(--pp-ink);
    font: 17px var(--pp-bold);
    white-space: pre;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-toggle::after {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-popup-header .pp-qday {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 14.5px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-popup-header .quick-booking-status {
    grid-row: 1;
    grid-column: 4;
    margin-right: 24px;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .booking-sub-category-dropdown > .dropdown-menu {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 14px 24px !important;
    border-top: 1px solid var(--pp-line) !important;
    border-bottom: 1px solid var(--pp-line) !important;
    border-radius: 0 !important;
}

/* Borderless fields (label over value), like the design; a soft ring on focus */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .form-floating > .form-control:is(#hotel_info_common, #booking_title),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .vdp-datepicker input,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .quick-booking-status .vs__dropdown-toggle {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .form-floating > .form-control:is(#hotel_info_common, #booking_title):focus,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .vdp-datepicker input:focus {
    background-color: var(--pp-panel-2) !important;
    box-shadow: 0 0 0 2px var(--pp-acc-line) !important;
}

/* Nights line under the dates */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qnights {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qnights > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qnights .pp-ic {
    width: 17px;
    height: 17px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qnights > small {
    color: var(--pp-ink-3);
    font: 15px var(--pp-sans);
}

/* Note rows: one line — title, AI chip, + at the right; the empty "—" is not shown */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-field {
    padding: 12px 20px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-field > span.color-red {
    display: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-header {
    min-height: 32px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-header .ai-spark__btn {
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-header > .booking-inline-edit-icon {
    font-size: 0 !important;
    opacity: 1 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .booking-inline-view-header > .booking-inline-edit-icon::before {
    content: "+" !important;
    color: var(--pp-ink-3);
    font: 22px/1 var(--pp-sans) !important;
}

/* Footer buttons: the design's rounded pair */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .popup-footer .btn {
    min-width: 104px;
    height: 54px;
    border-radius: 18px;
    font: 16px var(--pp-bold);
}

/* Hotel popup: an opened note (after "+") as the same grey card — bold title, the field as a soft
   white box under it (the repeated floating label hidden), the character count inside the card */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) {
    padding: 14px 20px 14px;
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > label {
    display: block;
    margin: 0 0 10px;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > .form-floating > .ffl-label {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > .form-floating > .form-control {
    height: auto;
    min-height: 56px;
    padding: 14px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: #fffefb !important;
    color: var(--pp-ink);
    font: 15px var(--pp-sans);
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > .form-floating > .form-control:focus {
    border-color: var(--pp-acc-line) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > small {
    margin-top: 8px !important;
    color: var(--pp-ink-3) !important;
    font: 12.5px var(--pp-sans);
    text-align: right;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > .form-floating > .form-control::placeholder {
    color: var(--pp-muted) !important;
}

/* Opened Description (rich-text editor) and Cancellation Date inside the card */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) .ck.ck-editor {
    overflow: hidden;
    border-radius: 12px;
    background: #fffefb;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) .ck.ck-toolbar {
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: #fffefb !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) .ck-editor__editable {
    min-height: 110px;
    border: 0 !important;
    background: #fffefb !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > .row {
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) > .row > [class*="col-"] {
    flex: 0 0 auto;
    width: min(260px, 100%);
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) .vdp-datepicker input.form-control {
    height: 52px;
    padding: 14px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: #fffefb !important;
    font: 15px var(--pp-sans);
}

/* Date picker (vuejs-datepicker): Bordeaux instead of PIE Magenta / pink, softer cells */
html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar {
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px;
    box-shadow: 0 16px 40px -14px rgba(17, 17, 26, .28);
}

html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar header span {
    color: var(--pp-acc) !important;
}

html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar header .prev::after {
    border-right-color: var(--pp-ink-2) !important;
}

html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar header .next::after {
    border-left-color: var(--pp-ink-2) !important;
}

html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar .cell.day {
    border-radius: 8px;
    background-color: var(--pp-panel-2);
}

html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar .cell.selected,
html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar .cell.selected:hover {
    background-color: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar .cell:not(.blank):not(.disabled):is(.day, .month, .year):hover {
    border-color: var(--pp-acc) !important;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

/* Days that can't be picked (e.g. a booked date in the future) are faint text, not grey blocks that
   read as a disabled calendar */
html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar .cell.day:is(.disabled, .blank) {
    background-color: transparent;
    color: var(--pp-line-2);
}

/* In the reservation popup's narrow side rail the calendar is as wide as its field, not the classic
   300px that ran past the rail's edge and cut off Saturday */
html.pie-premium .pp-shell #bookingPopupModal .pp-bp-rail .vdp-datepicker__calendar {
    right: auto;
    left: 0;
    width: 100% !important;
    min-width: 0;
}

/* Record as Cancelled (reservation popup): a quiet outline button in the danger colour. The filled
   accent from .btn-pink kept the classic pink text, which was hard to read on Bordeaux. */
html.pie-premium .pp-shell #bookingPopupModal [data-bs-title="Cancel Reservation"] > .btn:not(:disabled) {
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px;
    background: var(--pp-panel) !important;
    color: #b42318 !important;
    font: 13px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell #bookingPopupModal [data-bs-title="Cancel Reservation"] > .btn:not(:disabled):hover {
    border-color: #b42318 !important;
    background: #fdf1f0 !important;
}

/* The calendar keeps its own width (the date column is narrow) */
html.pie-premium :is(.pp-shell, .trip-request-form-page) .vdp-datepicker__calendar {
    width: 330px !important;
    max-width: calc(100vw - 32px);
}

/* Opened note: the design's fold icon (four arrows) in the card's top-right corner */
html.pie-premium .pp-shell {
    --pp-i-fold: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-2%20-2%2028%2028'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v18M3%2012h18M9%206l3-3%203%203M9%2018l3%203%203-3M6%209l-3%203%203%203M18%209l3%203-3%203'/%3E%3C/svg%3E");
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) .form-group > div:has(> label:first-child) {
    position: relative;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-fold {
    position: absolute;
    z-index: 3;
    overflow: visible;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-fold::before {
    content: "";
    position: absolute;
    inset: 5px;
    background: var(--pp-ink-3);
    -webkit-mask: var(--pp-i-fold) center / contain no-repeat;
    mask: var(--pp-i-fold) center / contain no-repeat;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-fold:hover {
    background: var(--pp-line);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-fold:hover::before {
    background: var(--pp-ink);
}

/* Hotel popup: Library as the design's outlined button — open-book icon, bold Bordeaux label */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .library-action-col .btn:not(:disabled) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 24px !important;
    border-radius: 16px !important;
    font: 17px var(--pp-bold) !important;
    letter-spacing: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .library-action-col .btn > i[class*="pie-icon"] {
    width: 20px;
    height: 20px;
    padding: 0 !important;
    font-size: 0 !important;
    background: currentColor;
    -webkit-mask: var(--pp-i-book) center / contain no-repeat;
    mask: var(--pp-i-book) center / contain no-repeat;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .library-action-col .btn > i[class*="pie-icon"]::before {
    content: none !important;
}

/* Hotel popup: the main fields keep a visible box (a borderless field read as plain text) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .form-floating > .form-control:is(#hotel_info_common, #booking_title),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .vdp-datepicker input,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:has(.ic-inline-rooms) .quick-booking-status .vs__dropdown-toggle {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 12px !important;
    background-color: var(--pp-panel) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .form-floating > .form-control:is(#hotel_info_common, #booking_title):focus,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .col-12:has(> .ic-inline-rooms) > .row .vdp-datepicker input:focus {
    border-color: var(--pp-acc-line) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

/* Hotel popup "Create room type" editor (BookingPopupIC_new.vue .ic-quick-add): warm panel and
   Bordeaux controls instead of the classic cool grey and magenta */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add {
    border-color: var(--pp-line) !important;
    border-radius: 16px;
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ic-inline-nights {
    border-color: transparent !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add input.form-control:is([readonly], :disabled) {
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ic-seg {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ic-seg > button.ic-seg-on {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ic-step-btn {
    border-color: var(--pp-acc-line) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ic-step-btn:not(:disabled):hover {
    background: var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ck.ck-toolbar {
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ic-quick-cancel-btn {
    border-color: var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-add .ic-quick-add-btn {
    border-color: var(--pp-acc) !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
}


/* ==========================================================================
   Every other compact reservation popup (car service, activities, …): the same header tab, day
   pill, sub-type pills, field boxes, note cards and fold icon as the hotel popup (one column)
   ========================================================================== */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-toggle {
    display: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-menu {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    inset: auto !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-menu .dropdown-item {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 14.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-menu .dropdown-item:hover {
    border-color: var(--pp-ink-3);
    background: var(--pp-panel);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-menu .dropdown-item.active {
    border-color: var(--pp-ink);
    background: var(--pp-ink) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper {
    padding: 0 24px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header {
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header > .row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header > .row > .col-auto:first-child,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header .booking-sub-category-dropdown {
    display: contents;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-toggle {
    display: inline-flex !important;
    grid-row: 1;
    grid-column: 1;
    align-items: center;
    gap: 6px;
    height: 54px;
    margin-left: 24px;
    padding: 0 10px 0 36px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--pp-ink) !important;
    border-radius: 0 !important;
    background: transparent var(--pp-i-bed) 6px 50% / 20px no-repeat !important;
    color: var(--pp-ink-3) !important;
    font: 16px var(--pp-sans) !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-toggle[data-pp-cat]::before {
    content: attr(data-pp-cat) "  ·";
    color: var(--pp-ink);
    font: 17px var(--pp-bold);
    white-space: pre;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-toggle::after {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header .pp-qday {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 14.5px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header .quick-booking-status {
    grid-row: 1;
    grid-column: 4;
    margin-right: 24px;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-menu {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 14px 24px !important;
    border-top: 1px solid var(--pp-line) !important;
    border-bottom: 1px solid var(--pp-line) !important;
    border-radius: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .popup-footer .btn {
    min-width: 104px;
    height: 54px;
    border-radius: 18px;
    font: 16px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .booking-inline-view-field {
    padding: 12px 20px;
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .booking-inline-view-field > span.color-red {
    display: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .booking-inline-view-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .booking-inline-view-header > label {
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .booking-inline-view-header .ai-spark__btn {
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .booking-inline-view-header > .booking-inline-edit-icon {
    margin-left: auto;
    font-size: 0 !important;
    opacity: 1 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .booking-inline-view-header > .booking-inline-edit-icon::before {
    content: "+" !important;
    color: var(--pp-ink-3);
    font: 22px/1 var(--pp-sans) !important;
}

/* Opened notes: the same grey card with a soft white field */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .form-group > div:has(> label:first-child):has(> :is(.form-floating, .booking-desc-wrapper, .row)) {
    position: relative;
    padding: 14px 20px;
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .form-group > div:has(> label:first-child):has(> :is(.form-floating, .booking-desc-wrapper, .row)) > label {
    display: block;
    margin: 0 0 10px;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .form-group > div:has(> label:first-child) > .form-floating > .ffl-label {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .form-group > div:has(> label:first-child) > .form-floating > .form-control {
    min-height: 56px;
    padding: 14px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: #fffefb !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .form-group > div:has(> label:first-child) .ck.ck-editor {
    overflow: hidden;
    border-radius: 12px;
}

/* Fields: rounded white boxes with a warm outline */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .form-floating > .form-control,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .form-floating .vs__dropdown-toggle,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper .vdp-datepicker input {
    border-color: var(--pp-line-2) !important;
    border-radius: 12px !important;
}

/* Header tab: room for long category names; no hotel bed icon on other categories */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-toggle {
    padding-left: 10px !important;
    background-image: none !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header > .row {
    grid-template-columns: max-content max-content minmax(0, 1fr) minmax(160px, 220px);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header .quick-booking-status {
    width: auto;
    min-width: 0;
    margin-right: 24px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header > .row {
    grid-template-columns: max-content max-content minmax(0, 1fr) minmax(150px, 200px);
}

/* Many sub-types (Transportation has 15): smaller pills */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-menu {
    gap: 6px !important;
    padding: 12px 24px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-menu .dropdown-item {
    height: 34px;
    padding: 0 14px !important;
    font-size: 13.5px;
}

/* The form uses the dialog's width, 24px in from each side */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .seach-location-wrapper {
    padding: 0 24px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location {
    margin: 16px 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location > [class*="col-"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header .quick-booking-status {
    justify-self: stretch;
    margin-left: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-popup-header > .row {
    grid-template-columns: max-content max-content minmax(0, 1fr) minmax(170px, 210px);
}

/* Sub-type pills: one row that scrolls sideways (the design), not several wrapped rows */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 12px 24px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu::-webkit-scrollbar {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu > li {
    flex: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu .dropdown-item {
    height: 36px;
    padding: 0 18px !important;
    border-color: var(--pp-line) !important;
    font-size: 14.5px;
    white-space: nowrap;
}

/* ==========================================================================
   Reservations with travelers (car service, activities, …): the design's two columns. The form
   on the left; Travelers (Pax) and the Price summary (PremiumHotelPopupExtras.vue) on the right
   ========================================================================== */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)):has(.quick-travelers) {
    width: min(1080px, calc(100vw - 32px));
    max-width: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    gap: 12px 28px;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > * {
    grid-column: 1;
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .add-link {
    float: none !important;
    justify-self: start;
    color: var(--pp-acc);
    font: 14px var(--pp-bold);
    cursor: pointer;
}

/* Left column rows: date + time side by side, the address on its own line under them */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row > [class*="col-"] {
    flex: 1 1 calc(50% - 12px);
    width: auto;
    max-width: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row > [class*="col-"]:nth-child(3) {
    flex-basis: 100%;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row > [class*="col-"]:has(.library-btn, .btn-pink) {
    flex: 0 0 auto;
}

/* Right column: Travelers card, then the Price summary */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:has(.quick-travelers) {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .pp-psum {
    grid-column: 2;
    grid-row: 5 / span 8;
    align-self: start;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-psum {
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers > label {
    margin: 0 !important;
    color: var(--pp-ink);
    font: 18px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers > label > i {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers > label::after {
    content: attr(data-pp-count);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers > .d-flex {
    display: contents !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers .add-link {
    color: var(--pp-acc) !important;
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers > .d-flex > :not(.add-link) {
    flex-basis: 100%;
    order: 2;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-psum {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-psum-h {
    margin-bottom: 4px;
    color: var(--pp-ink);
    font: 18px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-psum-l {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--pp-ink-3);
    font-size: 15px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-psum-l .mu {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-psum-l.big {
    padding-top: 14px;
    border-top: 1px solid var(--pp-line);
    color: var(--pp-ink);
    font: 19px var(--pp-bold);
}

@media (max-width: 760px) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) {
        grid-template-columns: minmax(0, 1fr);
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > :is(.row:has(.quick-travelers), .pp-psum) {
        grid-column: 1;
        grid-row: auto;
    }
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:has(.quick-travelers) > [class*="col-"] {
    flex-basis: 100%;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > :is(.row:has(.quick-travelers), .pp-psum) {
    justify-self: stretch;
    width: auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:has(.quick-travelers) {
    grid-row: 1;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .pp-psum {
    grid-row: 2 / span 10;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:has(.quick-travelers) > [class*="col-"],
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-travelers {
    width: 100% !important;
    max-width: none;
}

/* The travelers row's own inner col-12 also matches :has(.quick-travelers): keep it a plain block */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12 > .row > .col-12:has(> .quick-travelers) {
    display: block !important;
    padding: 0;
}

/* ==========================================================================
   Reservation quick popup — the design's exact sizes (planner.css .qpop/.qf/.qsubs/.qnotes/.qbox,
   app.css .btn, sage.css): 920px dialog, 20px title, 38px category tab, 30px sub-type pills,
   10px-radius fields with 11.5px labels and 14px values, 13.5px note rows, 40px pill buttons.
   ========================================================================== */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact {
    --pp-panel-2: #fafaf8;
    --pp-pill: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    width: min(920px, calc(100vw - 32px)) !important;
    max-width: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .modal-content {
    border-radius: 22px;
    box-shadow: 0 30px 70px -26px rgba(30, 40, 32, .35), 0 0 0 1px var(--pp-line);
}

/* Header: title 20px; help link and close on the right */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .modal-header {
    padding: 20px 22px 6px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .modal-title {
    font: 20px var(--pp-bold) !important;
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .modal-help-videos .head {
    font: 13px var(--pp-bold) !important;
}

/* Category tab · day pill · status (the design's .qsub) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header > .row {
    column-gap: 12px !important;
    align-items: end !important;
    padding: 0 22px 12px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-toggle {
    height: 38px !important;
    margin-left: 0 !important;
    padding: 0 4px 0 26px !important;
    background-position: 2px 50% !important;
    background-size: 16px !important;
    font: 14px var(--pp-sans) !important;
    color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact:not(:has(.ic-inline-rooms)) .booking-sub-category-dropdown > .dropdown-toggle {
    padding-left: 4px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-toggle[data-pp-cat]::before {
    font: 14px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header .pp-qday {
    align-self: end;
    margin-bottom: 6px;
    padding: 4px 10px !important;
    font: 12px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header .quick-booking-status {
    min-width: 220px;
    margin-right: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header > .row {
    grid-template-columns: max-content max-content minmax(0, 1fr) minmax(220px, 240px) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header .quick-booking-status .vs__dropdown-toggle {
    min-height: 0;
    padding: 18px 10px 4px !important;
    border-radius: 10px !important;
}

/* Sub-type pills (.qsubs) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu {
    gap: 6px !important;
    padding: 10px 22px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu .dropdown-item {
    height: 30px !important;
    padding: 0 12px !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu .dropdown-item.active {
    box-shadow: none;
    color: #fff !important;
}

/* Body (.qbody 16px 22px, columns gap 18, rows gap 10) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper {
    padding: 0 22px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location {
    margin: 16px 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .col-12:is(:has(> .ic-inline-rooms), :has(.quick-travelers)) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 10px 18px !important;
}

/* Fields (.qf): 10px radius, 11.5px bold muted label over a 14px value */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .form-floating > .form-control,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .vdp-datepicker input.form-control,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .form-floating .vs__dropdown-toggle {
    height: 48px !important;
    min-height: 48px !important;
    padding: 21px 12px 6px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel) !important;
    color: var(--pp-ink);
    font: 14px var(--pp-sans) !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .form-floating > .form-control:focus,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .vdp-datepicker input.form-control:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .form-floating > :is(label, .ffl-label),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header .quick-booking-status .ffl-label {
    padding: 7px 12px 0 !important;
    color: var(--pp-muted) !important;
    font: 11.5px var(--pp-bold) !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Library (.qlib): 13px bold, 10px radius, outlined */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .library-action-col .btn:not(:disabled),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .btn-pink:not(:disabled) {
    height: 48px !important;
    gap: 6px !important;
    padding: 0 14px !important;
    border: 1px solid var(--pp-acc-line) !important;
    border-radius: 10px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .library-action-col .btn > i[class*="pie-icon"] {
    width: 15px;
    height: 15px;
}

/* Nights line (.qnights) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-qnights {
    gap: 10px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-qnights > span {
    gap: 6px !important;
    padding: 4px 10px !important;
    font: 12px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-qnights .pp-ic {
    width: 13px !important;
    height: 13px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-qnights > small {
    font: 12.5px var(--pp-sans) !important;
}

/* Note rows (.qnotes): 10px radius, 10px 12px, 13.5px bold, muted + */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper .booking-inline-view-field {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper .booking-inline-view-header {
    gap: 8px !important;
    min-height: 24px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper .booking-inline-view-header > label {
    font: 13.5px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper .booking-inline-view-header > .booking-inline-edit-icon::before {
    color: var(--pp-muted) !important;
    font: 16px/1 var(--pp-sans) !important;
}

/* AI chips (.qai): 24px, 11.5px bold, accent-soft */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .ai-spark__btn {
    height: 24px !important;
    padding: 0 9px !important;
    border-radius: 7px !important;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
    font: 11.5px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Opened notes: the same 10px card */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper .form-group > div:has(> label:first-child):has(> :is(.form-floating, .booking-desc-wrapper, .row)) {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper .form-group > div:has(> label:first-child):has(> :is(.form-floating, .booking-desc-wrapper, .row)) > label {
    margin-bottom: 8px !important;
    font: 13.5px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .seach-location-wrapper .form-group > div:has(> label:first-child) > .form-floating > .form-control {
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    background: var(--pp-panel) !important;
    font: 13.5px var(--pp-sans) !important;
}

/* Right column boxes (.qbox 14px / 16px radius; header 15px) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .ic-inline-rooms,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .quick-travelers,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-psum {
    padding: 14px !important;
    border-radius: 16px !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact :is(.ic-inline-rooms-head > label, .quick-travelers > label, .pp-psum-h) {
    font: 15px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .quick-travelers .add-link {
    font: 13px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-psum {
    gap: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-psum-h {
    margin-bottom: 10px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-psum-l {
    padding: 6px 0;
    font-size: 13px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-psum-l.big {
    margin-top: 4px;
    padding-top: 10px !important;
    font: 16px var(--pp-bold) !important;
}

/* Footer (.qpop > footer 14px 22px): radios 13.5px, Reset, then 40px pill buttons */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .modal-footer {
    padding: 14px 22px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .modal-footer .pie_radio_btn label {
    font: 13.5px var(--pp-sans);
    color: var(--pp-ink-2);
}

/* ---------- Buttons, everywhere in new-look popups: the design's 40px pills ---------- */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) :is(.modal-footer, .popup-footer) .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: 13.5px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
}

/* Secondary: white with a soft shadow */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) :is(.modal-footer, .popup-footer) .btn:is(.btn-blue-outline, .btn-primary-outline, .btn-gray-outline, .btn-outline-primary, .btn-secondary, .btn-light, .btn-default) {
    background: #fff !important;
    color: var(--pp-ink) !important;
    box-shadow: 0 0 0 1px var(--pp-line), 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) :is(.modal-footer, .popup-footer) .btn:is(.btn-blue-outline, .btn-primary-outline, .btn-gray-outline, .btn-outline-primary, .btn-secondary, .btn-light, .btn-default):hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}

/* Primary: Bordeaux with a soft top light and shadow */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) :is(.modal-footer, .popup-footer) .btn:is(.btn-blue, .btn-primary, .btn-pink, .btn-success):not(:disabled) {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) :is(.modal-footer, .popup-footer) .btn:is(.btn-blue, .btn-primary, .btn-pink, .btn-success):not(:disabled):hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), #63142c !important;
}

/* Pills row runs edge to edge under the header (it sits inside the header row's 22px padding) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header > .row {
    padding-bottom: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu {
    margin: 12px -22px 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header {
    border-bottom: 0 !important;
}

/* Library lines up with the field beside it (top), not with the field + its AI chip */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .library-action-col {
    align-self: flex-start !important;
    justify-content: flex-start !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu {
    margin: 10px 0 0 !important;
    padding: 12px 0 !important;
}

/* One Way / Round Trip / Multiple Destinations: off the line above them, like the type pills */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-sub-category-block:has(> ul.route_type) {
    padding-top: 12px;
}

/* Files on a reservation (.gallery-grid, Documents.vue): each a compact soft row the width of
   its own column (For Internal Use / Visible to Client), a small rounded thumbnail, the file
   name cut with … and the delete icon on the right */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid {
    align-self: stretch;
    display: grid;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid .gallery-col.pdf_document {
    align-items: center;
    gap: 10px;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 10px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid .gallery-col.pdf_document > img {
    flex: none;
    width: 48px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 6px;
    object-fit: cover;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid .pdf_document_bottom_share {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid .pdf_document_bottom_share > a {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--pp-ink-2) !important;
    font: 13px var(--pp-sans);
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid .pdf_document_bottom_share > .delete_uploaded_image {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0 !important;
    border-radius: 7px;
    color: var(--pp-ink-3);
    font-size: 14px;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid .pdf_document_bottom_share > .delete_uploaded_image:hover {
    background: var(--pp-panel);
    color: var(--pp-acc);
}

/* Form rows: the design's 10px between fields (no leftover form-group margin), and the time
   picker the same 48px box as the other fields */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12 > .row {
    --bs-gutter-y: 10px;
    --bs-gutter-x: 10px;
    align-items: flex-start;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12 > .row > [class*="col-"].form-group,
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12 > .row > [class*="col-"] > .form-group {
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .timepicker input.display-time {
    width: 100%;
    height: 48px !important;
    padding: 21px 12px 6px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background: var(--pp-panel) !important;
    font: 14px var(--pp-sans) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .timepicker,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .timepicker .vue__time-picker {
    display: block;
    width: 100%;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12 > .row {
    --bs-gutter-y: 0px;
    row-gap: 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12 > .row > [class*="col-"] {
    margin-top: 0 !important;
}

/* Opened notes (every reservation popup): fold icon on the title line, a visible input box,
   the rich-text editor kept inside the card (its toolbar wraps instead of running off) */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .pp-fold {
    top: 6px !important;
    right: 8px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .form-group > div:has(> label:first-child) > label {
    padding-right: 36px;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .form-group > div:has(> label:first-child) > .form-floating > .form-control {
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 8px !important;
    background: var(--pp-panel) !important;
    font: 13.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .form-group > div:has(> label:first-child) > .form-floating > .form-control:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .form-group > div:has(> label:first-child) {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper :is(.booking-desc-wrapper, .custom-ck, .ck.ck-editor) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .ck.ck-editor {
    border: 1px solid var(--pp-line-2);
    border-radius: 8px;
    overflow: hidden;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .ck.ck-toolbar > .ck-toolbar__items {
    flex-wrap: wrap;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .ck.ck-toolbar {
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .seach-location-wrapper .ck-editor__editable {
    min-height: 110px;
    border: 0 !important;
    background: var(--pp-panel) !important;
    box-shadow: none !important;
}

/* The grid column the notes live in must be allowed to shrink */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12:is(:has(> .ic-inline-rooms), :has(.quick-travelers)) > .row,
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12:is(:has(> .ic-inline-rooms), :has(.quick-travelers)) > .row > [class*="col-"] {
    min-width: 0;
    max-width: 100%;
}

/* Passengers: the classic label already shows its own count */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > label::after {
    content: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > .d-flex > :not(.add-link) {
    border-color: var(--pp-line-2) !important;
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .pp-fold {
    top: 4px !important;
    width: 26px !important;
    height: 26px !important;
}

/* Passengers / Travelers card: the design's traveler rows (avatar initials, name, Adult / Teen · 16,
   a checked box that removes the traveler — QuickTravelers.vue's own remove button) */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > label {
    flex: 1 1 auto;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > label > .text-muted {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > .d-flex > .badge {
    position: relative;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    padding: 7px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--pp-ink) !important;
    font: 13.5px var(--pp-bold) !important;
    text-align: left;
    white-space: normal;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > .d-flex > .badge::before {
    content: attr(data-pp-ini);
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pp-acc);
    color: #fff;
    font: 11px var(--pp-bold);
    letter-spacing: .02em;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > .d-flex > .badge::after {
    content: attr(data-pp-sub);
    grid-column: 2;
    grid-row: 2;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > .d-flex > .badge > .btn-close {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0;
    border-radius: 5px;
    background: var(--pp-acc) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207.5'/%3E%3C/svg%3E") center / 13px no-repeat !important;
    opacity: 1 !important;
    font-size: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > .d-flex > .badge > .btn-close:hover {
    background-color: #63142c !important;
}

/* "Remove all" sits at the bottom right of the list */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .quick-travelers > .d-flex > .add-link.ms-2 {
    order: 3;
    flex-basis: 100%;
    margin: 4px 0 0 !important;
    text-align: right;
    color: var(--pp-muted) !important;
    font: 12.5px var(--pp-sans) !important;
}

/* Right column: the travelers row now holds the summary too and spans the left rows, so tall
   cards never stretch the form fields beside them */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12:has(.quick-travelers) > .row:has(.quick-travelers) {
    grid-column: 2 !important;
    grid-row: 1 / span 9 !important;
    align-self: start !important;
    row-gap: 12px;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .search-location .col-12:has(.quick-travelers) > .row:has(.quick-travelers) > .pp-psum {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
}

/* ==========================================================================
   Add Travellers popup (AddTravelerPopup.vue / AddGuestPopup.vue): the design's traveler list —
   Bordeaux initials avatar, bold name over a muted email, a soft "Added" pill or an outlined
   "+ Add" pill, rows divided by a hairline in one rounded box
   ========================================================================== */
html.pie-premium .pp-shell .modal.add-travelers-modal .modal-dialog {
    max-width: min(640px, calc(100vw - 32px));
}

html.pie-premium .pp-shell .modal.add-travelers-modal .modal-content {
    border-radius: 22px;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .modal-header {
    padding: 20px 22px 8px !important;
    border: 0 !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal #imageUploaderCommonModelHeaderTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: var(--pp-ink) !important;
    font: 20px var(--pp-bold) !important;
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell .modal.add-travelers-modal #imageUploaderCommonModelHeaderTitle > i {
    color: var(--pp-acc);
    font-size: 20px;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .modal-body {
    padding: 4px 22px 18px !important;
}

/* Search: the design's field box */
html.pie-premium .pp-shell .modal.add-travelers-modal .modal-body input[type="text"],
html.pie-premium .pp-shell .modal.add-travelers-modal .modal-body input[type="search"] {
    height: 44px;
    padding: 0 40px 0 14px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background-color: var(--pp-panel) !important;
    font: 14px var(--pp-sans) !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .modal-body input[type="text"]:focus,
html.pie-premium .pp-shell .modal.add-travelers-modal .modal-body input[type="search"]:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

/* The list: one rounded box, rows split by a hairline */
html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up {
    overflow: hidden;
    margin-top: 12px;
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up > table {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    background: transparent !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up > table:last-of-type {
    border-bottom: 0 !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up > table td {
    padding: 10px 14px !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up > table td:first-child {
    width: 56px !important;
    padding-right: 0 !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up :is(.user_name, td:first-child img) {
    display: grid;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
    font: 13px var(--pp-bold) !important;
    line-height: 36px !important;
    object-fit: cover;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up .user-card-row-name {
    color: var(--pp-ink) !important;
    font: 14px var(--pp-bold) !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up .user-card-row-name.fs-12 {
    margin-top: 2px !important;
    color: var(--pp-muted) !important;
    font: 12.5px var(--pp-sans) !important;
}

/* Status: soft "Added" pill / outlined "+ Add" pill */
html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up .confirm-lbl {
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold) !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up .btnAddTraveler {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pp-panel) !important;
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold) !important;
    cursor: pointer;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .team_select_up .btnAddTraveler:hover {
    background: var(--pp-acc-soft) !important;
    box-shadow: 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell .modal.add-travelers-modal .modal-footer {
    justify-content: flex-end !important;
    padding: 14px 22px !important;
    border-top: 1px solid var(--pp-line) !important;
}

/* Every Library button in the reservation popup (quick and full view): the design's outlined
   button — open-book icon, 13px bold Bordeaux label, 10px radius */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .btn:has(> i.pie-icon-thin-0123_download_cloud_file_sync):not(:disabled) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--pp-acc-line) !important;
    border-radius: 10px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .btn:has(> i.pie-icon-thin-0123_download_cloud_file_sync):not(:disabled):hover {
    background: var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .btn > i.pie-icon-thin-0123_download_cloud_file_sync {
    width: 15px;
    height: 15px;
    padding: 0 !important;
    font-size: 0 !important;
    background: currentColor;
    -webkit-mask: var(--pp-i-book) center / contain no-repeat;
    mask: var(--pp-i-book) center / contain no-repeat;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .btn > i.pie-icon-thin-0123_download_cloud_file_sync::before {
    content: none !important;
}

/* The quick view keeps it the height of the field beside it */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .library-action-col .btn:not(:disabled) {
    height: 48px !important;
}

/* Drag preview for Trip content items (PremiumDragGhost.vue): kept off screen, its picture follows
   the pointer — white card, Bordeaux edge, icon, name and count */
html.pie-premium .pp-shell .pp-drag-ghost {
    position: fixed;
    top: -200px;
    left: -400px;
    z-index: -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--pp-acc-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px -12px rgba(17, 17, 26, .35);
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
    white-space: nowrap;
    pointer-events: none;
}

html.pie-premium .pp-shell .pp-drag-ghost > i {
    color: var(--pp-acc);
    font-size: 17px;
}

html.pie-premium .pp-shell .pp-drag-ghost > em {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pp-ink);
    color: #fff;
    font: 11px var(--pp-bold);
    font-style: normal;
}

/* Popups whose action buttons sit in a plain right-aligned row (event / information popup
   PopupFooter.vue, and others): the same 40px pills as the modal footers */
html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .modal-body .text-end:last-child > .btn,
html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .text-end.mt-5 > .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    min-width: 0 !important;
    margin-left: 8px;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: 13.5px var(--pp-bold) !important;
    letter-spacing: 0 !important;
    text-transform: capitalize !important;
}

/* Colours for these buttons anywhere inside a new-look popup: white secondary, Bordeaux primary */
html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .btn.btn-primary-outline:not(:disabled) {
    border-color: transparent !important;
    background: #fff !important;
    color: var(--pp-ink) !important;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25) !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .btn.btn-primary-outline:not(:disabled):hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .btn.btn-primary:not(:disabled) {
    border-color: var(--pp-acc) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000) !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .btn.btn-primary:not(:disabled):hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), #63142c !important;
}

/* Event / information popup footer (PopupFooter.vue): library options, Reset and the buttons on
   one line, like the reservation popup footer */
html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) div:has(> .pie_radio_btn + .text-end.mt-5) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) div:has(> .pie_radio_btn + .text-end.mt-5) > :is(.pie_radio_btn, .text-end.mt-5) {
    float: none !important;
    margin: 0 !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) div:has(> .pie_radio_btn + .text-end.mt-5) > .text-end.mt-5 {
    display: flex;
    gap: 10px;
    margin-left: auto !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) div:has(> .pie_radio_btn + .text-end.mt-5) > .text-end.mt-5 > .btn {
    margin: 0 !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) div:has(> .pie_radio_btn + .text-end.mt-5) .custome-radiobtn label {
    font: 13.5px var(--pp-sans);
    color: var(--pp-ink-2);
}

/* No buttons-only row (Starter / library): keep the buttons right-aligned without the big gap */
html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .text-end.mt-5:only-child {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) div:has(> .pie_radio_btn + .text-end.mt-5) .selection-reset {
    color: var(--pp-acc) !important;
    font: 13.5px var(--pp-bold) !important;
}

/* Traveler popups (car service, …): Start date + time, End date + time, then Pick-up and Drop-off
   side by side. The two date rows open up (display: contents) so their cells join the form grid,
   which splits the left column in two; order puts the addresses after both date lines. */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) {
    grid-template-columns: minmax(0, .525fr) minmax(0, .525fr) minmax(0, 1fr) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > * {
    grid-column: 1 / span 2;
    order: 20;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:first-child {
    order: 1;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:is(:nth-child(2), :nth-child(3)):has(.vdp-datepicker) {
    display: contents;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:is(:nth-child(2), :nth-child(3)):has(.vdp-datepicker) > [class*="col-"] {
    grid-column: auto;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:nth-child(2):has(.vdp-datepicker) > :nth-child(1) { order: 2; }
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:nth-child(2):has(.vdp-datepicker) > :nth-child(2) { order: 3; }
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:nth-child(3):has(.vdp-datepicker) > :nth-child(1) { order: 4; }
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:nth-child(3):has(.vdp-datepicker) > :nth-child(2) { order: 5; }
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:nth-child(2):has(.vdp-datepicker) > :nth-child(3) { order: 6; }
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:nth-child(3):has(.vdp-datepicker) > :nth-child(3) { order: 7; }

/* Right column stays in the third track */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row:has(.quick-travelers) {
    grid-column: 3 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row {
    --bs-gutter-x: 0px;
    column-gap: 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row > [class*="col-"] {
    flex: 1 1 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact:not(:has(.ic-inline-rooms)) .search-location .col-12:has(.quick-travelers) > .row > .library-action-col {
    flex: 0 0 auto !important;
}

/* ==========================================================================
   Event popup (EventPopup.vue → PopupHeader.vue): sub-type tabs as the reservation popup's
   30px pills, on one row that scrolls sideways (classic: underlined text, double padding)
   ========================================================================== */
html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 4px 0 16px !important;
    padding: 2px 1px !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type::-webkit-scrollbar {
    display: none;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type > li {
    display: flex;
    flex: none;
    float: none !important;
    align-items: center;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--pp-line);
    background: #fff;
    cursor: pointer;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type > li .booking-sub-category {
    padding: 0 !important;
    border: 0 !important;
    color: var(--pp-ink-3) !important;
    font: 12.5px/1 var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type > li .booking-sub-category::after {
    display: none !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type > li:hover {
    box-shadow: 0 0 0 1px var(--pp-ink-3);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type > li:hover .booking-sub-category {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type > li.active {
    box-shadow: none;
    background: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) ul.event_sub_type > li.active .booking-sub-category {
    color: #fff !important;
}

/* Event popup upload areas (Documents.vue "Visible to Client!", Photos.vue "Upload Photos"):
   side by side like the trip Documents tab, each tag with an info icon */
html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) form:has(> #event_client_doc) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 14px;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) form:has(> #event_client_doc) > * {
    flex: 0 0 100%;
    min-width: 0;
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) form:has(> #event_client_doc) > .crm_photos {
    flex: 1 1 0;
}

html.pie-premium .pp-shell .modal#eventModalNew .crm_photos > .documents_upload {
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 12px !important;
    background: #fff !important;
}

html.pie-premium .pp-shell .modal#eventModalNew .crm_photos > .documents_upload .upload-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px !important;
    border-radius: 4px;
    background: #f6f4fd !important;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell .modal#eventModalNew .crm_photos > .documents_upload .upload-text::before {
    content: "\ec33";
    font: 13px/1 'picos_thin';
}

html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) #event_client_doc > .documents_upload .upload-text {
    background: #fdf0f2 !important;
    color: #e0245e !important;
}

/* Event popup: Reservation Tags and Place Tags side by side (EventInfo.vue) */
@media (min-width: 768px) {
    html.pie-premium .pp-shell .modal:is(#eventModalNew, .modal) .event_info_div .row:has(> .tags-multi-select + .tags-multi-select) > .tags-multi-select {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Package / other cards (BookingGeneral_new.vue) nest the date + chips row in .booking-accordion,
   so it missed the card's second-line rules: same spacing below the title and between wrapped chips */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-accordion > .row:has(> [class*="col-"] .track-info) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-accordion > .row:has(> [class*="col-"] .track-info) > [class*="col-"] {
    padding: 0 !important;
}

@media (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-accordion > .row:has(> [class*="col-"] .track-info) {
        row-gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .booking-accordion > .row:has(> [class*="col-"] .track-info) > [class*="col-"] {
        flex: 1 1 100% !important;
        max-width: 100%;
        width: 100%;
    }
}

/* Header: switch back to the classic look (PremiumHeader.vue, same action as the account menu item) */
html.pie-premium .pp-shell .pp-look {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--pp-line-2);
    background: #fff;
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell .pp-look:hover {
    box-shadow: 0 0 0 1px var(--pp-acc-line);
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .pp-look > [class*="pie-icon-"] {
    font-size: 15px;
    color: var(--pp-acc);
}

@media (max-width: 1280px) {
    html.pie-premium .pp-shell .pp-look {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    html.pie-premium .pp-shell .pp-look-lbl {
        display: none;
    }
}

/* Trips: the row above the table already ends with a 12px margin; the empty applied-filters row
   (Vue leaves comment nodes, so :empty misses it), the hidden bulk-action row and the table's own
   top margin stacked another 34px under the Advisor filter */
html.pie-premium .pp-shell .pp-trips .applied-filters-wrapper:not(:has(> *)) {
    display: none;
}

html.pie-premium .pp-shell .pp-trips .position-relative > .form-group.col-md-3:not(:has(.custom-trip-action-button > button:not(.hide))) {
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell .pp-trips .trip-list-section {
    margin-top: 0 !important;
}

/* ==========================================================================
   Shell cards (design: the side bar and the top bar are white rounded cards floating on the
   page background, 12px from the window edges). Desktop only; the page offsets stay the same:
   the side bar card is 12px narrower than its column, and the top bar's card is drawn behind
   its content so the header keeps its 68px height.
   ========================================================================== */
@media (min-width: 916px) {
    html.pie-premium .pp-shell .left-sidebar.pp-side {
        top: 12px;
        left: 12px;
        width: calc(var(--pp-side-mini) - 12px);
        height: calc(100vh - 24px);
        border-radius: 24px;
        background: #fff;
        box-shadow: var(--pp-shadow);
        overflow: hidden auto;
        scrollbar-width: none;
    }

    html.pie-premium .pp-shell .left-sidebar.pp-side::-webkit-scrollbar {
        display: none;
    }

    html.pie-premium .pp-shell .control-panel-left.open .left-sidebar.pp-side {
        width: calc(var(--pp-side) - 12px);
    }

    html.pie-premium .pp-shell .header.pp-top {
        position: relative;
        isolation: isolate;
        padding-top: 12px;
    }

    html.pie-premium .pp-shell .header.pp-top::before {
        content: "";
        position: absolute;
        inset: 12px 12px 0;
        z-index: -1;
        border-radius: 20px;
        background: #fff;
        box-shadow: var(--pp-shadow);
    }

    /* Dashboard cards line up with the top bar card: the same 12px from the side bar card and
       the window edge (was 32px) */
    html.pie-premium .pp-shell .pp-dash .pp-bento {
        padding-right: 12px;
        padding-left: 12px;
    }

    /* Every other page the same as the Dashboard: content 12px from the side bar card and the
       window edge, flush with the top bar card. Each page sets 32px in its own stylesheet
       (premium-pages/*.css), hence !important; full-screen views keep their own padding. */
    html.pie-premium .pp-shell :is(.pp-trips > #full-screen-trips, .new-profile-page, .accounting-dpage > .crm-page-content, .automation-dpage, .booking-conf-dpage .crm-page-content, .checklists-dpage > .crm-panel, .commission-master-page, .flight-tracker-dpage .crm-page-content, .library-dpage .crm-page-content, .reports-master-page > .crm-page-content, .reservation-dashpage > .crm-page-content, .submit-sales-dpage .crm-page-content) > .container-fluid:not(.toggle-full-screen),
    html.pie-premium .pp-shell .pp-forms:not(.toggle-full-screen) {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

/* On the white side bar card the active page is the design's dark pill (top-level items only;
   sub-menu items keep the accent text) */
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li:is(.active, .bg-black):not(.sub-menu):not(.sub-menu li),
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li:is(.active, .bg-black):not(.sub-menu):not(.sub-menu li):hover {
    background: var(--pp-ink) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li:is(.active, .bg-black):not(.sub-menu):not(.sub-menu li) > .pp-ic {
    color: #fff;
}

/* ==========================================================================
   Trips table — the design's list (app.css .gtable / .pill): soft status pills with a dot,
   sort arrows only on hover, plain code chip, thin row icons
   ========================================================================== */
/* Status: the agency's own status colour (--pp-st, PremiumTripsTable.vue) as a soft tint with a
   darker text and dot of the same hue */
html.pie-premium .pp-shell .pp-trips .trip-status-badge-lable[style*="--pp-st"] {
    gap: 6px;
    padding: 0 10px 0 8px;
    background: color-mix(in srgb, var(--pp-st) 32%, #fff) !important;
    color: color-mix(in srgb, var(--pp-st) 42%, #1d1d22) !important;
}

/* Same hue at the design's fixed lightness, so pastel and dark agency colours both read like
   the design's green / amber pills */
@supports (color: oklch(from red l c h)) {
    html.pie-premium .pp-shell .pp-trips .trip-status-badge-lable[style*="--pp-st"] {
        background: oklch(from var(--pp-st) 0.965 clamp(0.02, calc(c * 0.45), 0.05) h) !important;
        color: oklch(from var(--pp-st) 0.48 clamp(0.09, calc(c * 1.4), 0.16) h) !important;
    }
}

html.pie-premium .pp-shell .pp-trips .trip-status-badge-lable[style*="--pp-st"]::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Sort arrows: shown on hover; the sorted column keeps its accent text */
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.sortable button {
    opacity: 0;
    transition: opacity .12s;
}

html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.sortable:hover button,
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th.sortable button:focus-visible {
    opacity: 1;
}

/* Code chip: the design's near-white chip (shows on the hovered row) */
html.pie-premium .pp-shell .pp-trips .pp-code {
    background: #fafaf8;
}

/* Go-to-planner arrow: the design's thin arrow instead of Font Awesome's solid one */
html.pie-premium .pp-shell .pp-trips .custom-table table.vgt-table td .round-btn-trip-list::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

html.pie-premium .pp-shell .pp-trips .custom-table table.vgt-table td .round-btn-trip-list {
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
}

/* ==========================================================================
   Trips tabs — the design's glass segmented bars (glass.css / sage.css .tabs): translucent
   white capsule, fully round tabs, the open tab a dark pill with a soft drop, counts as quiet
   white badges (white-on-dark inside the open tab)
   ========================================================================== */
html.pie-premium .pp-shell .pp-trips :is(ul.trip-types, .tasks-filter) {
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
}

html.pie-premium .pp-shell .pp-trips :is(ul.trip-types li, .tasks-filter li) {
    border-radius: 999px;
}

html.pie-premium .pp-shell .pp-trips .tasks-filter li {
    padding: 7px 13px;
    font-size: 13.5px;
}

html.pie-premium .pp-shell .pp-trips :is(ul.trip-types li.active, .tasks-filter li.active_black, .tasks-filter li.active_black:hover) {
    background: var(--pp-ink) !important;
    color: #fff !important;
    font-family: var(--pp-bold);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li .count {
    background: rgba(255, 255, 255, .72) !important;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell .pp-trips ul.trip-types li.active .count {
    background: rgba(255, 255, 255, .2) !important;
    color: inherit !important;
}

/* Trips table: no column-search row (as in the design). It comes back only while one of its
   fields holds a value (column filters are saved per browser), so a saved filter is never
   applied out of sight */
html.pie-premium .pp-shell .pp-trips table.vgt-table thead tr:has(> th.filter-th):not(:has(.vgt-input:not(:placeholder-shown))) {
    display: none;
}

/* Column names: regular weight, as in the design */
html.pie-premium .pp-shell .pp-trips table.vgt-table thead th {
    font-family: var(--pp-sans);
    font-size: 13px;
    -webkit-text-stroke: .2px currentColor;
}

/* ==========================================================================
   Page header actions (Trips: Travelers report · Flight Tracker · Import · Export · New Trip) —
   the design's glass buttons (sage.css): white pills with a soft shadow, bold label; the primary
   a Bordeaux capsule with a soft top light
   ========================================================================== */
html.pie-premium .pp-shell {
    --pp-i-upload: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2015V4M7%209l5-5%205%205M4%2014v4a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-4'/%3E%3C/svg%3E");
}

html.pie-premium .pp-shell .pp-ic-upload { --pp-i: var(--pp-i-upload); }

html.pie-premium .pp-shell .pp-acts .pp-btn {
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    font: 13.5px var(--pp-bold);
    -webkit-text-stroke: 0;
    transition: background .15s;
}

html.pie-premium .pp-shell .pp-acts .pp-btn:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

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

html.pie-premium .pp-shell .pp-acts .pp-btn.pp-pri:hover {
    filter: brightness(1.06);
}

/* The side bar / dashboard "plane" icon: the same airplane as the app rail and the Trips
   Flight Tracker button (the older path read as a bent pin at 18px) */
html.pie-premium .pp-shell {
    --pp-i-plane: var(--pp-i-flight);
}

/* ==========================================================================
   Profiles (CrmContent_new.vue + IndividualsListNew.vue and the other profile lists) — the design's
   Profiles screen (sections.js P.profiles), in the same language as the Trips page: page head with
   eyebrow, white pill actions, glass tabs, category chips, toolbar, list card
   ========================================================================== */
html.pie-premium .pp-shell .new-profile-page > .container-fluid {
    padding: 0 32px 32px;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

/* Page head: eyebrow, 30px title, subtitle; actions on the right */
html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between {
    align-items: flex-end !important;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 0 !important;
    padding: 18px 0 22px;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between > h4 {
    margin: 0 !important;
    color: var(--pp-ink);
    font: 30px/1.15 var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between > h4::before {
    content: "Workspace";
    display: block;
    margin-bottom: 6px;
    color: var(--pp-acc);
    font: 11.5px var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between > h4::after {
    content: "Clients, suppliers and your team";
    display: block;
    margin-top: 4px;
    color: var(--pp-ink-3);
    font: 14px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between > div:last-child > .crm_action {
    order: 2;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between > div:last-child > .full-screen {
    order: 3;
}

html.pie-premium .pp-shell .new-profile-page .crm_action {
    float: none !important;
    margin: 0 !important;
}

html.pie-premium .pp-shell .new-profile-page .full-screen.pie-icon-maximize {
    float: none !important;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink-2);
    font-size: 16px !important;
}

/* White pill buttons (Merge profiles, Export, Send Profile Update Form, Import, Sync…) */
html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between .btn,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > .btn,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > span.delete-profiles-hide,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > div > span.cursor-pointer,
html.pie-premium .pp-shell .new-profile-page .individuals-list .apply-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    height: 40px;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--pp-ink) !important;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25) !important;
    font: 13.5px var(--pp-bold) !important;
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between .btn:hover,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > .btn:hover,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > span.delete-profiles-hide:hover,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > div > span.cursor-pointer:hover,
html.pie-premium .pp-shell .new-profile-page .individuals-list .apply-btn:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}

html.pie-premium .pp-shell .new-profile-page :is(#full-screen-profile > .d-flex.justify-content-between, .tab-content > .mb-4) [class*="pie-icon-"] {
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 15px;
}

/* Primary: New Individual / New Supplier… as the Bordeaux capsule */
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > span > a.btn {
    display: inline-flex !important;
    align-items: center;
    height: 40px;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000) !important;
    font: 13.5px var(--pp-bold) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px !important;
}

html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > div,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > span {
    margin: 0 !important;
}

html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > div.float-end,
html.pie-premium .pp-shell .new-profile-page .tab-content > .mb-4 > span.float-end {
    float: none !important;
}

/* Main tabs (Clients & Individuals · My Suppliers · Internal · PlanitEasy Supplier Database):
   the glass capsule, open tab a dark pill */
html.pie-premium .pp-shell .new-profile-page .crm_menu {
    margin: 0 0 16px !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu > .g-2 {
    display: flex;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    overflow-x: auto;
    scrollbar-width: none;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_pills {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 13.5px var(--pp-sans);
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_pills::after {
    display: none !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_pills:hover {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_pills.active {
    background: var(--pp-ink);
    color: #fff;
    font-family: var(--pp-bold);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown {
    padding: 0 6px !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown select {
    height: 36px;
    padding: 0 26px 0 8px !important;
    border: 0 !important;
    background-color: transparent !important;
    background-position: right 6px center !important;
    color: inherit;
    font: inherit;
    box-shadow: none !important;
}

/* Category chips (Individuals, Corporate, … Deleted Institutions, +) */
html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px !important;
    padding: 0;
}

html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills + ul.profile-subcat-pills {
    margin-bottom: 18px !important;
}

html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills li.gray_light_pills {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--pp-ink-2) !important;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    font: 13.5px var(--pp-sans) !important;
    cursor: pointer;
}

html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills li.gray_light_pills:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}

html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills li.gray_light_pills.active {
    background: var(--pp-ink) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell .new-profile-page ul.profile-subcat-pills li.gray_light_pills.add-profile-category {
    justify-content: center;
    width: 34px;
    padding: 0 !important;
}

/* Toolbar: Apply filters, count, Display Columns, search */
html.pie-premium .pp-shell .new-profile-page .individuals-list .apply-btn::after {
    display: none;
}

html.pie-premium .pp-shell .new-profile-page .crm_table > p.fs-14 {
    margin: 14px 0 10px !important;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell .new-profile-page .custom-dropdown > button.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    font: 13.5px var(--pp-bold);
}

/* List card: same as the Trips table */
html.pie-premium .pp-shell .new-profile-page .vgt-wrap {
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
}

html.pie-premium .pp-shell .new-profile-page .vgt-inner-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html.pie-premium .pp-shell .new-profile-page .vgt-global-search {
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .new-profile-page .vgt-global-search .vgt-input {
    width: min(420px, 100%);
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    background: var(--pp-panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa2' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 14px center / 16px no-repeat;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page .vgt-global-search .input__icon {
    display: none;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table {
    border: 0;
    background: var(--pp-panel);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
    white-space: nowrap;
    vertical-align: middle;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th:is(.sorting-asc, .sorting-desc) {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th.sortable {
    padding-right: 30px;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th.sortable button {
    opacity: 0;
    transition: opacity .12s;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead th.sortable:hover button {
    opacity: 1;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead tr:has(> th.filter-th):not(:has(.vgt-input:not(:placeholder-shown))) {
    display: none;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table thead .vgt-input {
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--pp-panel-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table tbody td {
    height: 56px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-ink-2);
    font-size: 13.5px;
    vertical-align: middle;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table.striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

html.pie-premium .pp-shell .new-profile-page table.vgt-table tbody tr:hover td {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell .new-profile-page .vgt-wrap__footer {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--pp-line);
    background: var(--pp-panel);
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell .new-profile-page :is(.btn, .crm_pills, .crm_dropdown select, .gray_light_pills, .apply-btn, .tab-content > .mb-4 span) {
    letter-spacing: 0 !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown select {
    font: 13.5px var(--pp-sans) !important;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell .new-profile-page .crm_menu .crm_dropdown.active select {
    color: #fff !important;
    font-family: var(--pp-bold) !important;
}

/* Apply filters on its own line, the count under it (the classic layout pulled the list up) */
html.pie-premium .pp-shell .new-profile-page .individuals-list > .btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0 !important;
}

html.pie-premium .pp-shell .new-profile-page .individuals-list > .position-relative {
    margin-top: 0 !important;
    top: 0 !important;
}

html.pie-premium .pp-shell .new-profile-page .individuals-list .apply-btn {
    flex: none;
    width: auto !important;
}

/* Filter rows with no filter added (Vue leaves comment nodes, so :empty misses them) pulled the
   list 8px up each through Bootstrap's gutter margin */
html.pie-premium .pp-shell .new-profile-page .individuals-list > .profile-page-filter:not(:has(> *)) {
    display: none;
}

html.pie-premium .pp-shell .new-profile-page .vgt-global-search {
    border-bottom: 0;
}

/* Display Columns sits inside the white list card: outlined, no floating shadow */
html.pie-premium .pp-shell .new-profile-page .custom-dropdown > button.dropdown-toggle {
    box-shadow: 0 0 0 1px var(--pp-line-2);
    margin-top: 4px;
}

/* Scrolled: the classic sticky title bar (CrmContent_new.vue adds .sticky-div-common) as a compact
   strip on the page background under the top bar, no grey band or drop shadow */
html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .sticky-div-common {
    top: 68px;
    z-index: 20;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: var(--pp-bg) !important;
    box-shadow: 0 1px 0 var(--pp-line);
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between.sticky-div-common > h4 {
    font-size: 22px;
}

html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between.sticky-div-common > h4::before,
html.pie-premium .pp-shell .new-profile-page #full-screen-profile > .d-flex.justify-content-between.sticky-div-common > h4::after {
    display: none;
}

/* Side bar menu: when the list is taller than the card it scrolls under the Create button; fade
   its top and bottom edges so items slide out of view instead of being cut mid-label */
html.pie-premium .pp-shell .pp-side .custom-scroll.vertical-scrollbar {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* Where the browser can tie it to the scroll position, fade an edge only while there is more
   list beyond it, so the first item (often the active, dark one) is never washed out at rest */
@property --pp-side-fade-top {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --pp-side-fade-bottom {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@keyframes pp-side-fade-top {
    from { --pp-side-fade-top: 0px; }
    to { --pp-side-fade-top: 16px; }
}

@keyframes pp-side-fade-bottom {
    from { --pp-side-fade-bottom: 16px; }
    to { --pp-side-fade-bottom: 0px; }
}

@supports (animation-timeline: scroll()) {
    html.pie-premium .pp-shell .pp-side .custom-scroll.vertical-scrollbar {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pp-side-fade-top), #000 calc(100% - var(--pp-side-fade-bottom)), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pp-side-fade-top), #000 calc(100% - var(--pp-side-fade-bottom)), transparent 100%);
        animation: pp-side-fade-top linear both, pp-side-fade-bottom linear both;
        animation-timeline: scroll(self), scroll(self);
        animation-range: 0 24px, calc(100% - 24px) 100%;
    }
}

/* Reports sub-menu groups (Commission Reports / Sales Report): expandable rows that match
   the leaf links, not uppercase headings (Bootstrap .fs-15 !important was blowing them up) */
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu :is(.submenu-title, .submenu-title-sales) {
    margin: 0;
    color: var(--pp-ink-2) !important;
    font: 13px/1.35 var(--pp-sans) !important;
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu :is(.submenu-title, .submenu-title-sales):hover {
    background: var(--pp-hover) !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu :is(.submenu-title, .submenu-title-sales).rotate-270 {
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold) !important;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu :is(.submenu-title, .submenu-title-sales) > .sub-angle {
    flex: none;
    width: 12px;
    height: 12px;
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu li:not(.sub-menu):hover {
    background: var(--pp-hover) !important;
}

/* Group children: nested hairline under the group title */
html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu ul:is(.sub-menu-block, .sub-menu-block-sales) {
    margin: 2px 0 6px 10px;
    padding: 0 0 0 8px;
    border-left: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .pp-side .dropdown_pie_dashboard ul li.sub-menu ul:is(.sub-menu-block, .sub-menu-block-sales) li {
    padding-left: 10px !important;
}

/* Note on `.pp-shell:not(.pp-classic)` (reservation popup rules above): it matches every new-look
   shell with the same weight as `.pp-shell.pp-planner`. Off the planner the side bar mounts the same
   #bookingPopupModal (Library, Reservations, Dashboard…), so the popup looks the same everywhere.
   No element ever gets a pp-classic class. */

/* Off the planner the popup footer has no "add to library" options on the left, so Close / Save
   would sit at the left edge: keep them on the right as on the planner */
html.pie-premium .pp-shell:not(.pp-planner) #bookingPopupModal .modal-footer > div > .popup-footer {
    margin-left: auto;
}

/* ==========================================================================
   Planner reservation cards: the row icons (view, edit, delete, copy, open) sit in the card's
   top-right corner at every width. Wide: Mark as Booked stays just left of them on the title
   line. ≤1100px (the title line wraps): Mark as Booked on the second line, the title wraps before
   the icons. Phones: slightly smaller icons so the title keeps room.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail:has(> .planner-booking-title .booking-actions) {
    position: relative;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title .booking-actions.dropdown-menu {
    position: absolute !important;
    top: 20px !important;
    right: 18px !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title > div:last-child:has(> .booking-actions) {
    padding-right: 166px;
}

@media (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title > div:last-child:has(> .booking-actions) {
        padding-right: 0;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title:has(.booking-actions) > .planner-title.planner-title {
        padding-right: 166px !important;
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title .booking-actions.dropdown-menu {
        top: 14px !important;
        right: 12px !important;
        gap: 0;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title .booking-actions.dropdown-menu > i {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .travel_detail .planner-booking-title:has(.booking-actions) > .planner-title.planner-title {
        padding-right: 134px !important;
    }
}

/* ==========================================================================
   Planner — exact match with the design (app.html, Sage/glass skin), measured in the browser at
   990px: toolbar tools as translucent round buttons, import status as a dot, round Day by day
   segment, New reservation as the accent capsule; banner buttons 40px glass; title 32px; status as a
   glass pill with a dot in the agency colour. 916–1100px: the price row and the banner buttons
   stack inside the banner (they collided on one line).
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-itb-seg {
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-seg button {
    border-radius: 999px;
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-seg button.on {
    background: var(--pp-ink);
    color: #fff;
    font-family: var(--pp-sans);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell.pp-planner :is(.pp-itb-imp, .pp-itb-tool) {
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: none;
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp,
html.pie-premium .pp-shell.pp-planner .pp-itb-tool.sq {
    width: 38px;
}

html.pie-premium .pp-shell.pp-planner :is(.pp-itb-imp, .pp-itb-tool):hover {
    background: #fff !important;
    box-shadow: none;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner :is(.pp-itb-imp.on, .pp-itb-tool.on) {
    background: #fff !important;
    box-shadow: none;
    color: var(--pp-ink);
}

/* Import status: an 8px dot (green when something was imported) instead of a count bubble */
html.pie-premium .pp-shell.pp-planner .pp-itb-imp em {
    top: 2px;
    right: 2px;
    min-width: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: var(--pp-line-2);
    box-shadow: 0 0 0 2px #fff;
    font-size: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp em.ok {
    background: var(--pp-ok);
}

html.pie-premium .pp-shell.pp-planner .pp-itb-new {
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    font: 13.5px var(--pp-sans);
    -webkit-text-stroke: 0;
}

/* Banner */
html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name,
html.pie-premium .pp-shell.pp-planner .trip-banner h1.mb-1 {
    font-size: 32px;
}

html.pie-premium .pp-shell.pp-planner .pp-bact {
    height: 40px;
    gap: 8px;
    padding: 0 16px;
    font: 13.5px var(--pp-sans);
}

@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-bact {
        border: 0;
        background: rgba(255, 255, 255, .14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    }

    html.pie-premium .pp-shell.pp-planner .pp-bact.pri {
        background: #fff;
        box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45);
    }
}

/* Status: glass pill, white text, a dot in the agency's status colour (the colour is an inline
   !important background set by the select plugin, so a dark glass layer is laid over it and the
   dot inherits it) */
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 28px 0 12px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 100px rgba(24, 24, 28, .62), inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    font: 14px/30px var(--pp-sans);
    letter-spacing: 0;
    text-transform: none;
    backdrop-filter: blur(10px);
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: inherit;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35);
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle .filter-option {
    position: static;
    width: auto;
    padding: 0;
}

/* 916–1100px: price row, then the banner buttons on their own line inside the banner, left */
@media (min-width: 641px) and (max-width: 1100px) {
    /* design (.pl-hero at 641–1100): 255px tall, padding 20/22, rows at 20 (chips), 70 (title),
       111 (dates), 146 (money line), 195 (actions) */
    html.pie-premium .pp-shell.pp-planner .trip-header .trip-banner {
        height: 255px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .banner-wrapper {
        grid-template-rows: 30px auto auto 1fr;
        align-content: start;
        row-gap: 0;
        padding: 20px 22px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name,
    html.pie-premium .pp-shell.pp-planner .trip-banner h1.mb-1 {
        grid-row: 2;
        margin-top: 20px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .planner_detail > .d-flex {
        grid-row: 3;
        margin-top: 6px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner :is(.trip_price, .itinerary-count) {
        display: none !important;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts {
        justify-content: flex-start;
        padding: 0 0 0 22px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts > * {
        top: -62px;
    }

    /* The money strip one line above the actions */
    html.pie-premium .pp-shell.pp-planner .pp-fin-line {
        min-height: 35px;
        margin: -109px 0 76px 22px;
        padding: 4px 8px 4px 2px;
        font-size: 14px;
    }
}

/* Planner ≤915px: the trip panel is a drawer. The menu button (classic .mobile-leftmenu) toggles
   .open on .trip-planner-compact; closed = hidden, open = laid over the page. The page never gives
   up 230px for it (phones were left with a sliver and one-letter-per-line text). */
@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .trip-planner-compact .page-content {
        padding-left: 0 !important;
    }

    html.pie-premium .pp-shell.pp-planner .trip-planner-compact:not(.open) .planner-left-sidebar {
        display: none !important;
    }

    html.pie-premium .pp-shell.pp-planner .trip-planner-compact.open .planner-left-sidebar {
        z-index: 1040;
        width: min(300px, 86vw) !important;
        background: var(--pp-bg);
        box-shadow: 0 0 0 100vmax rgba(20, 20, 24, .32), 12px 0 32px -16px rgba(0, 0, 0, .35);
    }
}

@media (max-width: 915px) {
    /* The menu button stays above the open drawer so it can close it again */
    html.pie-premium .pp-shell.pp-planner #mobile_left_menu {
        z-index: 1050 !important;
    }
}

/* Banner chips at every width, as the design: ID chip 11.5px glass, Change cover 34px light glass.
   The ID chip uses dark glass so it stays readable on bright cover photos (sky, snow, beach). */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-code {
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(17, 12, 14, .42) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    font-size: 11.5px;
    letter-spacing: .04em;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    font-size: 13px;
}

/* 641–915px (tablet): the same banner as desktop — money line and actions inside the photo, glass
   buttons filling the row (Share keeps its size) */
@media (min-width: 641px) and (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .pp-bacts {
        position: relative;
        z-index: 4;
        height: 0;
        margin: 0;
        gap: 8px;
        flex-wrap: nowrap;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts > * {
        position: relative;
        flex: 0 0 auto;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts .pp-bact {
        border: 0;
        background: rgba(255, 255, 255, .14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
        color: #fff;
        backdrop-filter: blur(10px);
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts .pp-bact.pri {
        background: #fff;
        box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45);
        color: var(--pp-ink);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line {
        background: rgba(255, 255, 255, .14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
        color: #fff;
        backdrop-filter: blur(10px);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line > span + span {
        border-left-color: rgba(255, 255, 255, .25);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line :is(b, small) {
        color: inherit;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line em {
        background: rgba(255, 255, 255, .18);
        color: inherit;
    }
}

/* The hidden classic price pills kept their width in the banner grid and stretched its first
   columns, so the status sat ~80px away from the ID chip; keep their height only */
html.pie-premium .pp-shell.pp-planner .trip-banner :is(.trip_price, .itinerary-count) {
    width: 0;
    min-width: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    border: 0;
}

/* Profit value on the glass money line: the light green used on the desktop banner */
@media (min-width: 641px) and (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-line b.pos {
        color: #8ee6b8;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line b.neg {
        color: #ffb4b7;
    }
}

/* ==========================================================================
   Planner — itinerary toolbar, exact match with the design's one-row tool bar (planner.css
   .pl-bar1row + sage.css), measured in the browser: imports as two 15px icons 8px apart with a
   status dot only when something was imported / is running / failed; confirmation chips as white
   26px capsules with a hairline; "Confirmation ID" as a plain accent link; New reservation as the
   charcoal capsule.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-itb-imp .pp-ic {
    width: 15px;
    height: 15px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-mw:has(> .pp-itb-imp) + .pp-itb-mw:has(> .pp-itb-imp) {
    margin-left: -2px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp em.w {
    background: #d29a12;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp em.d {
    background: #c0392b;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf {
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 .5px var(--pp-line-2);
    font: 12px var(--pp-sans);
    -webkit-text-stroke: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf .pp-itb-conf-val {
    font: 12px var(--pp-sans);
    -webkit-text-stroke: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-conf small {
    margin: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-addcf {
    gap: 5px;
    color: var(--pp-acc);
    font: 13px var(--pp-sans);
    -webkit-text-stroke: 0;
    line-height: 20px;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-new {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-ink) !important;
    box-shadow: 0 8px 18px -12px rgba(20, 24, 20, .6);
    color: #fff;
    letter-spacing: .01em;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-new:hover,
html.pie-premium .pp-shell.pp-planner .pp-itb-new.on {
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--pp-ink) !important;
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-new .pp-ic {
    width: 16px;
    height: 16px;
}

/* The classic "Trip content" toggle is not shown in the new look; the toolbar's panel button
   replaces it (below 916px it clicks this hidden toggle to open the drawer) */
html.pie-premium .pp-shell.pp-planner #planner_details_tabs .drag-component {
    display: none !important;
}

/* Toolbar panel toggle: hides the right "Trip content" column, the day list takes the width */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner .pp-itb.attached.panel-off + .planner-itinerary-flex > .reservation-rightside-section {
        display: none !important;
    }
}

/* Design ≤760px: the actions fill the row (.pl-hbtn flex: 1 1 auto), Share included */
@media (min-width: 641px) and (max-width: 760px) {
    html.pie-premium .pp-shell.pp-planner .pp-bacts {
        padding-right: 22px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts > * {
        flex: 1 1 auto;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts .pp-bact {
        width: 100%;
        justify-content: center;
        padding: 0 12px;
    }
}

/* Banner type, as the design at every width: Interstate (the new look's fonts), the ID chip regular,
   the date line 14px with a calendar and a pin icon, parts joined by " · " */
html.pie-premium .pp-shell.pp-planner .trip-banner h1,
html.pie-premium .pp-shell.pp-planner .trip-banner h1 * {
    font-family: var(--pp-bold) !important;
    font-weight: 400 !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name,
html.pie-premium .pp-shell.pp-planner .trip-banner h1.mb-1 {
    line-height: 1.1;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-code {
    font-family: var(--pp-sans);
    font-weight: 400;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .planner_detail > .d-flex {
    align-items: center;
    gap: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner :is(.trip-header-date, .trip_destination) {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, .88) !important;
    font: 14px/21.7px var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .trip-banner :is(.trip-header-date, .trip_destination) * {
    color: inherit !important;
    font: inherit !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner :is(.trip-header-date, .trip_destination)::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--pp-i-cal) center / contain no-repeat;
    mask: var(--pp-i-cal) center / contain no-repeat;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination::before {
    -webkit-mask-image: var(--pp-i-map);
    mask-image: var(--pp-i-map);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date + .trip_destination,
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date ~ * .trip_destination {
    margin-left: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination {
    position: relative;
    padding-left: 18px !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination::after {
    content: "·";
    position: absolute;
    left: 6px;
    color: rgba(255, 255, 255, .88);
}

/* Status: the design's glass pill (.pl-hstat): 30px, 12.5px Interstate Bold, white; the agency colour
   (moved to --pp-st by PremiumPlannerIndex.vue) as an 8px dot with a soft ring */
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle {
    gap: 7px;
    padding: 0 28px 0 12px;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    font: 12.5px/30px var(--pp-bold);
    letter-spacing: .01em;
    backdrop-filter: blur(8px);
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle:hover {
    background: rgba(255, 255, 255, .26) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle::before {
    background: var(--pp-st, #ffd166);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-st, #ffd166) 25%, transparent);
}

/* "CONFIRMED" (saved in capitals) reads "Confirmed", as the design's "Planning" */
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .filter-option-inner-inner {
    color: #fff !important;
    text-transform: lowercase;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .filter-option-inner-inner::first-letter {
    text-transform: uppercase;
}

/* Date line: the date text kept 30px of padding for its (hidden) edit pencil, which pushed the
   " · destination" away; the destination icon is a map pin, as in the design */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-text {
    padding-right: 0 !important;
    cursor: pointer;
}

/* Without that padding the hover pencil (template1.css, absolute at right: 0) landed on the last
   digit of the year; the date itself is the click target, so the pencil stays hidden and the
   date underlines on hover instead */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-text .pie-icon-edit {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-text:hover {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s-7-6.2-7-11.5a7%207%200%200%201%2014%200C19%2014.8%2012%2021%2012%2021z'/%3E%3Ccircle%20cx='12'%20cy='9.5'%20r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s-7-6.2-7-11.5a7%207%200%200%201%2014%200C19%2014.8%2012%2021%2012%2021z'/%3E%3Ccircle%20cx='12'%20cy='9.5'%20r='2.5'/%3E%3C/svg%3E");
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination :is(input, .form-control) {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-indent: 0;
    text-align: left !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination input::placeholder {
    color: rgba(255, 255, 255, .88);
}

/* Destination suggestions (AddressAutoComplete.vue): the date line's "every child is white and
   nowrap" rule also hit this white dropdown, so only the Google logos showed. The panel is a
   new-look popover: wider than the small input, rounded rows, logo beside the text (common.css
   floats it and pads the name 30px), and whole words wrap (common.css breaks mid-word). */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result {
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    min-width: 280px;
    max-width: min(420px, 90vw);
    max-height: 300px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--pp-shadow-2);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result * {
    color: var(--pp-ink) !important;
    font: 14px/1.4 var(--pp-sans) !important;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result .typeahead-item > a {
    display: block;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result .typeahead-display {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result .suggestion-source-logo {
    flex: none;
    float: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result .typeahead-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result .typeahead-item:is(:hover, .active) > a {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination .typeahead-result .color-blue {
    color: var(--pp-acc) !important;
}

/* ==========================================================================
   Planner — day list, exact pass against the E · Sage reference: 24px cards with 18px padding,
   one-line collapsed rows (number, title over "Sat, Nov 7 · pin City", summary, chevron) at
   every width, the Information sections summarised too, and a soft outline on the current day.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list,
html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec {
    border-radius: 24px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list {
    margin-bottom: 16px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list[data-pp-current] {
    box-shadow: var(--pp-shadow), 0 0 0 1.5px color-mix(in srgb, var(--pp-acc) 45%, transparent) !important;
}

/* Master itinerary description: 18px inset, 15.5px title, 12.5px line under it */
html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper {
    gap: 12px 16px;
    padding: 18px 18px 16px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > h5 {
    gap: 0;
    font: 15.5px/24px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > h5::after {
    line-height: 19.5px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > .add-link i {
    gap: 5px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > .add-link span {
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .trip_desc_sec .daily-calendar-block-wrapper > i.fa {
    border-radius: 10px;
    color: var(--pp-ink-3);
}

/* Header: 18px inset, number 30px wide and 16px from the title */
html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .planner-reservation > .summary-day-section {
    align-items: center !important;
    gap: 16px;
    min-height: 0;
    padding: 18px 18px 16px !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-count {
    width: 30px !important;
    min-width: 30px;
    margin-right: 0 !important;
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-count::before {
    font: 20px/1 var(--pp-sans);
    letter-spacing: -.02em;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .booking_title input.day_title {
    height: 21px !important;
    min-height: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .week-days:has(> .trip-date),
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date {
    height: auto !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .day-header-main {
    gap: 0 4px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .booking_title input.day_title,
html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date > span,
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:is(:has(#dd_day_Pre), :has(#dd_day_Post)) .trip-date > span::before {
    font: 15.5px/1.35 var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:is(:has(#dd_day_Pre), :has(#dd_day_Post)) .trip-date > span {
    font-size: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date {
    gap: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .summary-day-section .trip-date::after,
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main > .week-days[data-pp-date]::before {
    font: 12.5px/19.5px var(--pp-sans);
}

/* "Sat, Nov 7 · [pin] Paris": the city is quiet, with the design's map pin */
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place {
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place .section-bgs1 {
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place .planner-city-name:not(:empty) {
    gap: 4px;
    color: var(--pp-muted) !important;
    font: 12.5px/19.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place .planner-city-name:not(:empty)::before {
    margin-right: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place .planner-city-name > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    color: var(--pp-muted) !important;
    font: 12.5px/19.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-main .reservation-place .planner-city-name > span::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s-7-6.2-7-11.5a7%207%200%200%201%2014%200C19%2014.8%2012%2021%2012%2021z'/%3E%3Ccircle%20cx='12'%20cy='9.5'%20r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s-7-6.2-7-11.5a7%207%200%200%201%2014%200C19%2014.8%2012%2021%2012%2021z'/%3E%3Ccircle%20cx='12'%20cy='9.5'%20r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Summary: 26px icon tiles 4px apart, then "3 items" and the 15.5px total 12px apart; 36px to the chevron */
html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions > .pp-daysum {
    gap: 4px;
    margin-right: 30px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum .pp-daysum-ic {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum .pp-daysum-info::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: var(--pp-i-info) center / contain no-repeat;
    mask: var(--pp-i-info) center / contain no-repeat;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum small {
    margin: 0 0 0 8px;
    font: 12.5px/19.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum b {
    margin-left: 8px;
    font: 15.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions > i.add_hotel {
    margin-left: 0 !important;
    border-radius: 10px;
    color: var(--pp-ink-3) !important;
}

/* Collapsed sections: no edit pencils, and Before / After trip drop Book and + like the days */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .summary-day-section :is(.week-days > i, .planner-city-name > i) {
    display: none !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:is(:has(#dd_day_Pre), :has(#dd_day_Post)):has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-actions > :is(.tp-shop-dropdown, .days-btn) {
    display: none !important;
}

/* Collapsed rows stay on one line at every width: the title side shrinks, the summary keeps its size */
html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .summary-day-section .day-header-row {
    flex-wrap: nowrap !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .summary-day-section .day-header-main {
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .summary-day-section .day-header-actions {
    flex: none !important;
    flex-wrap: nowrap !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .planner-booking-list:has(.day-header-actions > i.add_hotel.fa-angle-down) .day-header-main .booking_title input.day_title {
    width: 100%;
    text-overflow: ellipsis;
}

/* The rail's track: visible on the stone background, like the design */
html.pie-premium .pp-shell.pp-planner .pp-dtlb::before {
    background: var(--pp-line-2);
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .planner-reservation > .summary-day-section {
        padding: 18px 18px 16px !important;
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .day_booking_section > .planner-booking-list > .planner-reservation > .summary-day-section {
        gap: 12px;
        padding: 14px 14px 12px !important;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum .pp-daysum-ic {
        display: none;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .day-header-actions > .pp-daysum {
        margin-right: 8px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .pp-daysum small {
        margin-left: 0;
    }
}

/* ==========================================================================
   Planner — Trip content panel, exact pass against the E · Sage reference: 14px inset with a
   soft accent wash at the top, a regular 16px title, the Library card with its "Your saved
   items" line, pill tabs, and the categories as one grouped card of 40px rows.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside {
    padding: 14px !important;
    background: radial-gradient(120% 34% at 0% 0%, color-mix(in srgb, var(--pp-acc) 7%, #fff), #fff 72%) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-head {
    gap: 10px;
    margin: 0 0 14px !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-head b {
    font: 16px/24.8px var(--pp-sans) !important;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-head small {
    display: block;
    font: 12.5px/19.4px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-x {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--pp-ink-3);
}

/* The classic grey box around the panel body goes: the cards sit on the panel itself */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .daily-inerary {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Library: 63px card, 34px icon tile, title over "Your saved items", arrow on the right */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 0 12px !important;
    min-height: 63px;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(60, 60, 80, .08);
    justify-items: start;
    text-align: left;
    line-height: 22px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li:hover {
    box-shadow: 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li i {
    grid-area: 1 / 1 / 3 / 2;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    color: var(--pp-ink-2);
    font-size: 16px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li::before {
    content: "Your saved items";
    grid-area: 2 / 2;
    color: var(--pp-muted);
    font: 12px/18.6px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab-library li::after {
    grid-area: 1 / 3 / 3 / 4;
    margin: 0;
    color: var(--pp-ink-3);
    font-size: 16px;
}

/* Reservations / Information: pill tabs on the panel, the open one dark */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) {
    gap: 4px;
    margin: 0 0 12px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li {
    height: 34px;
    padding: 7px 4px !important;
    border-radius: 999px !important;
    color: var(--pp-ink-3) !important;
    font: 13px/20px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.active {
    background: var(--pp-ink) !important;
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
    color: #fff !important;
}

/* Categories: one white card with a hairline edge; rows 40px, 14px in, no borders between */
/* The panel is a column: header, Copilot, Library, tabs and picker keep their size, and the
   category list takes the rest as its own rounded card that scrolls inside, so all four
   corners always show */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section {
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside > :not(.drag-component-wrapper),
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section #collapseOne > :not(.tab-content) {
    flex: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section :is(.drag-component-wrapper, .drag-component-wrapper > .col-lg-12, .daily-inerary, #collapseOne) {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section #collapseOne > .tab-content {
    flex: 0 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line-2) transparent;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section #collapseOne > .tab-content:has(> .planner-rightsidebar-info > .tab-content-header) {
    border: 1px solid rgba(60, 60, 80, .1) !important;
    border-radius: 20px !important;
    background: #fff !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info:has(> .tab-content-header) {
    overflow: visible !important;
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Drawer (narrow windows): the panel fills the sheet, which itself shows nothing behind it */
@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside {
        box-sizing: border-box;
        height: calc(100% - 15px) !important;
        max-height: calc(100% - 15px) !important;
    }
}

/* Row hover: the whole row, + included, not a square patch behind the name */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .tab-content-header:hover {
    background: var(--pp-hover) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .tab-content-header:hover .panels-head {
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > :is(.js-di-booking-category-header, .js-di-event-category-header) {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .tab-content-header .panels-head {
    min-height: 40px;
    padding: 6px 8px 6px 14px !important;
    border-radius: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .tab-content-header .panels-head > .d-flex > span[class*="pie-icon"] {
    margin-right: 10px !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .tab-content-header .panels-head h4 {
    font: 13.5px/20.9px var(--pp-sans) !important;
}

/* Count: a plain number beside the name, not a dark badge */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .tab-content-header .panels-head .count {
    min-width: 0;
    padding: 0 4px !important;
    background: transparent !important;
    color: var(--pp-ink-2) !important;
    font: 11px/20px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .tab-content-header .panels-head > a {
    font-size: 14px;
}

/* ==========================================================================
   SweetAlert confirms (bootstrap-sweetalert, appended to <body>, so not under .pp-shell):
   the design's small confirm dialog (planner.css .rn) with pill buttons.
   Every confirm button is the primary pill, whatever confirmButtonClass the caller passed.
   ========================================================================== */
html.pie-premium .sweet-overlay {
    background-color: rgba(20, 24, 20, .32);
}

html.pie-premium .sweet-alert {
    right: auto;
    left: 50%;
    width: min(440px, calc(100vw - 32px));
    margin-left: calc(min(440px, calc(100vw - 32px)) / -2);
    padding: 26px 28px 24px;
    border-radius: 24px;
    background: var(--pp-panel);
    box-shadow: 0 24px 60px -18px rgba(20, 24, 20, .35), 0 0 0 1px var(--pp-line);
    font-family: var(--pp-sans);
}

html.pie-premium .sweet-alert .sa-icon {
    zoom: .7;
    margin: 4px auto 18px;
}

html.pie-premium .sweet-alert .sa-icon.sa-warning {
    border-color: #e8a33d;
    background: #fdf5e8;
}

html.pie-premium .sweet-alert .sa-icon.sa-warning :is(.sa-body, .sa-dot) {
    background-color: #e8a33d;
}

html.pie-premium .sweet-alert h2 {
    margin: 0 0 8px;
    color: var(--pp-ink);
    font: 20px/1.25 var(--pp-bold);
    letter-spacing: -.01em;
    text-transform: none;
}

html.pie-premium .sweet-alert :is(p, .lead) {
    margin: 0;
    color: var(--pp-ink-3);
    font: 14px/1.55 var(--pp-sans);
}

html.pie-premium .sweet-alert.show-input .form-group {
    margin: 16px 0 0;
}

html.pie-premium .sweet-alert .form-group .form-control {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
    box-shadow: none;
}

html.pie-premium .sweet-alert .form-group .form-control::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .sweet-alert .form-group .form-control:focus {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .sweet-alert .sa-button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

html.pie-premium .sweet-alert .sa-button-container .btn {
    min-width: 120px;
    height: 40px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    font: 13.5px var(--pp-sans);
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0;
    text-transform: none !important;
}

html.pie-premium .sweet-alert .sa-button-container .btn.cancel {
    background: #fff;
    color: var(--pp-ink);
    box-shadow: inset 0 0 0 1px var(--pp-line-2), 0 6px 16px -10px rgba(30, 40, 32, .25) !important;
}

html.pie-premium .sweet-alert .sa-button-container .btn.cancel:is(:hover, :focus) {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink);
}

html.pie-premium .sweet-alert .sa-button-container .btn.confirm {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000) !important;
}

html.pie-premium .sweet-alert .sa-button-container .btn.confirm:is(:hover, :focus) {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)), color-mix(in srgb, var(--pp-acc) 88%, #000);
    color: #fff;
}

html.pie-premium .sweet-alert .sa-button-container .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--pp-acc-soft), 0 0 0 1px var(--pp-acc) !important;
}

html.pie-premium .sweet-alert .sa-button-container .btn.confirm[disabled] {
    color: transparent;
}

/* Day timeline below 916px (PremiumDayTimeline.vue): the design's phone strip, sticky at the top of
   the itinerary's scroll box and scrolling sideways */
html.pie-premium .pp-shell.pp-planner .pp-dtl.strip {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0 0 12px;
    padding: 6px;
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}

html.pie-premium .pp-shell.pp-planner .pp-dtl.strip::-webkit-scrollbar {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .pp-dtl.strip .pp-dtlb {
    flex: none;
    min-width: 52px;
}

/* ==========================================================================
   Planner — Trip content extras (PremiumTripContent.vue): the Copilot box above the Library card,
   the "Adding to" day picker under the tabs, and "N types" plus a + on each category row.
   ========================================================================== */
/* The extras wait here, hidden, until the Trip content panel exists and they move into it
   (while the page loads, or before the narrow-window drawer is built) */
html.pie-premium .pp-shell.pp-planner .pp-tcx-host {
    display: none !important;
}

/* The Copilot box is hidden for now (the floating Ask Copilot button stays); the day picker,
   Images and Book move out of .pp-tcx, so only the box is left in it */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcx {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc {
    margin: 0 0 16px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pp-acc) 7%, #fff), color-mix(in srgb, var(--pp-acc) 2%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-acc) 22%, #fff);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 10px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-mk {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: radial-gradient(120% 140% at 0% 0%, #8c2443, #45101f 70%);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-mk .pp-ic {
    width: 14px;
    height: 14px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-head b {
    flex: none;
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-head small {
    overflow: hidden;
    min-width: 0;
    color: var(--pp-muted);
    font: 12px/18.6px var(--pp-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-head small em {
    color: var(--pp-acc);
    font-style: normal;
    font-size: 12.5px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 4px 4px 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(60, 60, 80, .08), 0 6px 18px -14px rgba(0, 0, 0, .3);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask:focus-within {
    box-shadow: 0 0 0 1px var(--pp-acc-line), 0 6px 18px -14px rgba(0, 0, 0, .3);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 1px 2px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask input::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask button {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask button:disabled {
    opacity: .55;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask button .pp-ic {
    width: 15px;
    height: 15px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 6px 0 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(60, 60, 80, .08);
    color: var(--pp-ink-2);
    font: 12.5px/19.4px var(--pp-sans);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-ask + .pp-tcc-chip {
    margin-top: 10px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-chip:hover {
    box-shadow: 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-chip .pp-ic {
    flex: none;
    width: 13px;
    height: 13px;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcc-chip span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* "Adding to": a calm pill with the day list under it; only on the Reservations tab */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct {
    position: relative;
    margin: 0 0 14px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct.off,
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct:has(+ #booking_content.hide) {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 37px;
    padding: 8px 12px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(60, 60, 80, .08);
    color: var(--pp-ink);
    font: 13.5px/20.9px var(--pp-sans);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-btn:hover {
    box-shadow: 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-lbl,
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-btn small {
    flex: none;
    color: var(--pp-muted);
    font: 12px/18.6px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-btn b {
    flex: none;
    margin-left: -2px;
    font: 13.5px/20.9px var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-btn > .pp-ic {
    flex: none;
    width: 15px;
    height: 15px;
    margin-left: auto;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-btn[aria-expanded="true"] > .pp-ic {
    transform: rotate(180deg);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    overflow-y: auto;
    max-height: 320px;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(60, 60, 80, .08), 0 18px 40px -18px rgba(20, 24, 20, .35);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-menu button {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-menu button:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-menu button.on {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-menu button b {
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct-menu button small {
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
}

/* Category rows: name and count, then "N types ⌄" on the right, then a round + */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .js-di-booking-category-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .js-di-booking-category-header > .drag-parent-category {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .js-di-booking-category-header > .accordion-collapse {
    flex: 1 1 100%;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .planner-rightsidebar-info > .js-di-booking-category-header:has(> .pp-tc-add) .panels-head {
    padding-right: 4px !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head > .pp-tc-types {
    margin-left: auto;
    padding-left: 10px;
    color: var(--pp-muted);
    font: 11.5px/28px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head:has(> .pp-tc-types) > a {
    width: 22px;
    margin-left: 2px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .panels-head:has(> .pp-tc-types) > a > i {
    display: inline-block !important;
    color: var(--pp-muted);
    font-size: 14px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-add {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 8px 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-add:hover {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tc-add .pp-ic {
    width: 15px;
    height: 15px;
}

/* Type chips under an open category: they add that type to the chosen day */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .js-di-booking-category-header .accordion-body li .drag {
    cursor: pointer;
}

/* ==========================================================================
   Old PIE Magenta (#A20090 / #ff005e) left on shared widgets: Display Columns menu buttons,
   DataTables / Bootstrap pagination, vue-good-table bulk-selection bar, trip status options,
   the create-trip "+ Show more" link and the SweetAlert info icon
   ========================================================================== */
/* Display Columns menu (CustomDropdown.vue): Cancel = secondary pill, Save = primary pill.
   The classic Save is !important and CustomDropdown.vue also paints it inline (#ff005e) once
   anything changes */
html.pie-premium .pp-shell .custom-dropdown .dropdown-menu > .text-center {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 6px 4px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .custom-dropdown .dropdown-menu > .text-center > .btn {
    min-width: 0;
    height: 34px;
    margin: 0 !important;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font: 13px var(--pp-sans);
    -webkit-text-stroke: .35px currentColor;
    letter-spacing: 0;
}

html.pie-premium .pp-shell .custom-dropdown .btn.btn-cancel {
    background: #fff;
    color: var(--pp-ink);
    box-shadow: inset 0 0 0 1px var(--pp-line-2);
}

html.pie-premium .pp-shell .custom-dropdown .btn.btn-cancel:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

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

html.pie-premium .pp-shell .custom-dropdown .btn.btn-done:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)), color-mix(in srgb, var(--pp-acc) 88%, #000) !important;
}

/* Pagination everywhere (DataTables Bootstrap markup li.paginate_button > a.page-link, plain
   DataTables a.paginate_button, b-pagination): colours only, so page rules keep their sizes.
   Current page = the dark pill used by the Dashboard and Checklists pagers */
html.pie-premium .pp-shell .pagination .page-item .page-link,
html.pie-premium .pp-shell .pagination :where(.paginate_button) > a {
    border-color: transparent;
    background-color: transparent;
    color: var(--pp-ink-3);
    box-shadow: none;
}

html.pie-premium .pp-shell .pagination .page-item:not(.disabled):not(.active) .page-link:hover,
html.pie-premium .pp-shell .pagination .paginate_button:not(.disabled):not(.active) > a:hover {
    background-color: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pagination .page-item.active .page-link,
html.pie-premium .pp-shell .pagination .paginate_button.active a {
    border-color: var(--pp-ink) !important;
    background-color: var(--pp-ink) !important; /* template1.css forces the old accent with !important */
    color: #fff;
}

html.pie-premium .pp-shell .pagination .page-item.disabled .page-link {
    background-color: transparent;
    color: var(--pp-muted);
    cursor: default;
}

/* DataTables pager (Trips Import preview and other jQuery tables): pill buttons in the same
   font as the "Showing 1 to 1 of 1 entries" text beside it (common.css .dataTables_info: 14px
   regular, #b2b2b2). Previous / Next are that grey when there is no page to go to, ink when
   they work; the current page is the dark pill. :where() keeps the Dashboard's own pager on top */
html.pie-premium .pp-shell .dataTables_paginate .pagination {
    gap: 4px;
}

html.pie-premium .pp-shell .dataTables_paginate .pagination :where(.paginate_button) > a {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    color: var(--pp-ink-3);
    font: 300 14px/1 var(--pp-sans);
    -webkit-text-stroke: 0;
    letter-spacing: 0;
    text-decoration: none;
}

html.pie-premium .pp-shell .dataTables_paginate .pagination :where(.paginate_button:is(.previous, .next)) > a {
    padding: 0 8px;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell .dataTables_paginate .pagination :where(.paginate_button.disabled) > a {
    background-color: transparent;
    color: #b2b2b2;
    cursor: default;
}

/* common.css fades every .disabled to .4 and the dt-bootstrap link to .8 (so the grey showed at
   a third of its strength), and pushes the pager 10px below the info text with !important.
   The Dashboard keeps its own pager */
html.pie-premium .pp-shell .dataTables_paginate:not(.pp-dash *) .pagination {
    margin: 2px 0 0 !important;
}

html.pie-premium .pp-shell .dataTables_paginate:not(.pp-dash *) .pagination .paginate_button.disabled,
html.pie-premium .pp-shell .dataTables_paginate:not(.pp-dash *) .pagination .paginate_button.disabled > a {
    opacity: 1;
}

html.pie-premium .pp-shell .dataTables_paginate .pagination :where(.paginate_button.active) > a {
    color: #fff;
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell .dataTables_paginate a.paginate_button.current {
    border-color: var(--pp-ink) !important;
    background: var(--pp-ink) !important;
    color: #fff !important;
}

/* Rows-selected bar (vue-good-table): soft accent strip with the accent "clear" link */
html.pie-premium .pp-shell .vgt-selection-info-row {
    background-color: var(--pp-acc-soft);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .vgt-selection-info-row a {
    color: var(--pp-acc);
}

/* Trips bulk actions (Archive / Cancel / Restore / Activate / Change trip status) */
html.pie-premium .pp-shell .pp-trips .custom-trip-action-button > button {
    border: 0;
    border-radius: 8px;
    background: transparent;
}

html.pie-premium .pp-shell .pp-trips .custom-trip-action-button .custom-flexbox-center {
    gap: 4px;
    color: var(--pp-acc);
    font-family: var(--pp-sans) !important; /* template1.css: Geologica !important */
}

html.pie-premium .pp-shell .pp-trips .custom-trip-action-button > button:hover {
    background: var(--pp-acc-soft);
}

/* Trip status: the editing cell and its option list (appended to <body>) use the same soft pill
   as the read-only status (--pp-st from PremiumTripsTable.vue) */
html.pie-premium .triplist-status-dropdown {
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow), 0 0 0 1px var(--pp-line);
}

html.pie-premium .triplist-status-dropdown .vs__dropdown-option {
    padding: 4px 6px;
    border-radius: 8px;
}

html.pie-premium .triplist-status-dropdown :is(.vs__dropdown-option--highlight, .vs__dropdown-option:hover) {
    background: var(--pp-hover);
}

html.pie-premium :is(.triplist-status-dropdown, .pp-shell .pp-trips) .trip-status-badge[style*="--pp-st"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-st) 32%, #fff) !important;
    color: color-mix(in srgb, var(--pp-st) 42%, #1d1d22) !important;
    font: 12px var(--pp-bold);
    white-space: nowrap;
}

@supports (color: oklch(from red l c h)) {
    html.pie-premium :is(.triplist-status-dropdown, .pp-shell .pp-trips) .trip-status-badge[style*="--pp-st"] {
        background: oklch(from var(--pp-st) 0.965 clamp(0.02, calc(c * 0.45), 0.05) h) !important;
        color: oklch(from var(--pp-st) 0.48 clamp(0.09, calc(c * 1.4), 0.16) h) !important;
    }
}

html.pie-premium :is(.triplist-status-dropdown, .pp-shell .pp-trips) .trip-status-badge[style*="--pp-st"]::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Create trip pop-up (trip_create.vue): "+ Show more / less" link in the accent */
html.pie-premium .pp-shell #myModalCustomize .modal-footer .apply-btn {
    color: var(--pp-acc);
    font: 13.5px var(--pp-sans);
    -webkit-text-stroke: .35px currentColor;
}

html.pie-premium .pp-shell #myModalCustomize .modal-footer .apply-btn:hover {
    color: color-mix(in srgb, var(--pp-acc) 80%, #000);
    text-decoration: underline;
}

/* SweetAlert info icon (common.css paints it Magenta) */
html.pie-premium .sweet-alert .sa-icon.sa-info {
    border-color: var(--pp-acc);
}

html.pie-premium .sweet-alert .sa-icon.sa-info::before,
html.pie-premium .sweet-alert .sa-icon.sa-info::after {
    background-color: var(--pp-acc);
}

/* ==========================================================================
   Flight reservation popup (FlightInfo_new.vue in #bookingPopupModal): each leg (Departure,
   Return, Flight n) as the design's grey card (.qleg), Date and Flight ID on one row with
   Flight ID the wider field, and the footer on one line with Close / Save on the right
   ========================================================================== */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box {
    display: grid;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-header {
    margin: 0 !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-header > .row {
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-header .di-flight-heading-text {
    padding: 0;
    color: var(--pp-ink) !important;
    font: 14px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight_box {
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight_box > .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight_box > .row > [class*="col-"] {
    flex: 1 1 140px;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight_box > .row > [class*="col-"]:has(.flight_number) {
    flex-grow: 2;
}

/* Date: room for the clear × and the calendar icon, so neither sits on the date */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .vdp-datepicker input {
    padding-right: 54px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .vdp-datepicker .vdp-datepicker__clear-button {
    top: 50%;
    right: 34px;
    color: var(--pp-muted);
    line-height: 1;
    transform: translateY(-50%);
}

/* Flight ID: the classic inline red border (style="… !important") cannot be overridden, so a
   frame in the field colours is drawn over it */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .form-floating:has(> .flight_number) {
    position: relative;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .form-floating > .flight_number {
    clip-path: inset(1px round 11px);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .form-floating:has(> .flight_number)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 1px solid var(--pp-line-2);
    border-radius: 12px;
    pointer-events: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .form-floating:has(> .flight_number:focus)::after {
    border-color: var(--pp-acc);
}

/* Found flight (BookingPopupIC_new.vue .flight-booking-details): a white card the leg's full width
   (the template's inline width:65% squeezed it to a word per line), route on one line, airline,
   flight and date on the next, chevron on the right */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details {
    margin-top: 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .card.accordion-item {
    width: 100% !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px !important;
    background: #fff;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .card.accordion-item > .card-header {
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button {
    gap: 10px !important;
    padding: 10px 14px !important;
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button > .flex-fill > div:first-child {
    display: block !important;
    margin-bottom: 2px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button > .flex-fill > div:first-child > span {
    color: var(--pp-ink-3) !important;
    font: 13px var(--pp-sans) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button > .flex-fill > div:first-child > span.fw-semibold {
    color: var(--pp-ink) !important;
    font: 14px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button > .flex-fill > div:last-child {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    white-space: nowrap;
    color: var(--pp-ink-3) !important;
    font: 12.5px var(--pp-sans) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button > .flex-fill > div:last-child :is(.fw-semibold, .fw-medium) {
    color: var(--pp-ink-2) !important;
    font: 12.5px var(--pp-bold) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .destination_box .flight-booking-details .accordion-button > .flex-fill > div:last-child img {
    height: 14px;
}

/* Footer: library options, Send flight updates and Reset on the left, Close / Save on the right */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer > div:has(> .d-inline-block > .on-off-switch) > br {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer > div:has(> .d-inline-block > .on-off-switch) > .pie_radio_btn {
    margin-right: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer > div > .d-inline-block:has(> .on-off-switch) {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer > div > .d-inline-block > .on-off-switch {
    float: none !important;
    padding: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .modal-footer > div:has(> .d-inline-block > .on-off-switch) > .popup-footer {
    margin-left: auto;
}

/* ==========================================================================
   Planner — Trip content "Images" tab (PremiumTripImages.vue, placed by PremiumTripContent.vue):
   search, category chips, Copilot picks for the chosen day and a two-column photo grid
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tct.pp-tct-img:not(.off):has(+ #booking_content.hide) {
    display: block;
}

/* Photos need room: while Images is open the whole column scrolls (Copilot, tabs and picker scroll
   away) instead of squeezing the photos into what is left under them */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside:has(.pp-tci-panel.open) {
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line-2) transparent;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside:has(.pp-tci-panel.open) :is(.drag-component-wrapper, .drag-component-wrapper > .col-lg-12, .daily-inerary, #collapseOne, #collapseOne > .pp-tci-panel) {
    flex: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci {
    padding: 2px 2px 8px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-q {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--pp-line);
    cursor: text;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-q:focus-within {
    box-shadow: 0 0 0 2px var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-q .pp-ic {
    width: 15px;
    height: 15px;
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-q input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-q input::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-tags {
    display: flex;
    gap: 6px;
    margin: 10px -2px 12px;
    padding: 2px 24px 2px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-tags::-webkit-scrollbar {
    display: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-tags button {
    flex: none;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: #fff;
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-tags button:hover {
    border-color: var(--pp-ink-3);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-tags button.on {
    border-color: var(--pp-ink);
    background: var(--pp-ink);
    color: #fff;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-picks {
    margin: 0 0 14px;
    padding: 10px;
    border-radius: 14px;
    background: var(--pp-acc-soft);
    box-shadow: inset 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-picksh {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-picksh .pp-ic {
    width: 14px;
    height: 14px;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-pickrow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-pickrow button {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-pickrow img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .25s;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-pickrow button:not(:disabled):hover img {
    transform: scale(1.06);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-img {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pp-panel-2);
    box-shadow: 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-img:hover img {
    transform: scale(1.04);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(10, 8, 20, .62));
    pointer-events: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-cap {
    position: absolute;
    left: 10px;
    right: 44px;
    bottom: 9px;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    font: 12px/1.3 var(--pp-sans);
    text-overflow: ellipsis;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    white-space: nowrap;
}

/* The round white + (a check once added), bottom right on picks and grid photos */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-add {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--pp-acc);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    font-style: normal;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-add .pp-ic {
    width: 14px;
    height: 14px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-img > .pp-tci-add:not(:disabled):hover,
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-pickrow button:not(:disabled):hover .pp-tci-add {
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section :is(.pp-tci-img, .pp-tci-pickrow button).busy .pp-tci-add {
    opacity: .6;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section :is(.pp-tci-img, .pp-tci-pickrow button).added .pp-tci-add {
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section :is(.pp-tci-note, .pp-tci-hint) {
    margin: 12px 2px 0;
    color: var(--pp-muted);
    font: 12px/1.45 var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-note {
    margin: 16px 0;
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-hint {
    display: flex;
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-hint .pp-ic {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

/* ==========================================================================
   Quick reservation popup (#bookingPopupModal .reservation-popup-compact)
   ========================================================================== */
/* The type's search field (hotel place, place / restaurant, flight lookup) stands out from the other
   fields as in the design: white, a Bordeaux-tinted border and a soft ring. The repeated id outranks
   the hotel popup's field rules. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact input:is(#hotel_info_common, #general_places, #restaurant_search) {
    border: 1px solid var(--pp-acc-line) !important;
    border-radius: 12px !important;
    background-color: var(--pp-panel) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact input:is(#hotel_info_common, #general_places, #restaurant_search):focus {
    border-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .destination_box .form-floating:has(> .flight_number)::after {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .destination_box .form-floating:has(> .flight_number:focus)::after {
    border-color: var(--pp-acc);
}

/* Documents and Photos (Documents.vue, moved here from the full view's Documents tab by
   PremiumHotelPopupExtras.vue) above "View more": soft dashed drop zones */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads {
    clear: both;
    margin: 4px 0 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads .tab-title {
    margin: 14px 0 8px !important;
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads .row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads .documents_upload {
    min-height: 0;
    padding: 12px;
    border: 1.5px dashed var(--pp-line-2) !important;
    border-radius: 14px;
    background: var(--pp-panel-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads .documents_upload:hover {
    border-color: var(--pp-acc-line) !important;
    background: color-mix(in srgb, var(--pp-acc) 4%, var(--pp-panel));
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads .upload_icon {
    min-height: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads .add-photo-wrapper i {
    margin-bottom: 4px;
    color: var(--pp-acc);
    font-size: 18px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads .add-photo-wrapper span {
    color: var(--pp-ink-3);
    font: 12.5px/1.35 var(--pp-sans) !important;
}

/* The zone's label ("For Internal Use" / "Visible to Client!") on its own line above the drop text */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads :is(.upload-text, .upload-text-visible) {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 6px !important;
    padding: 0;
    background: none;
    font: 11.5px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .pp-qp-uploads #booking_photos_artical_section .documents_upload {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .pp-qp-uploads + .add-link {
    margin-top: 2px;
}

/* Trip content column at the design's width (planner.css .pl-wrap: 330px), so the Reservations /
   Information / Images tabs get their full pill width. Narrower windows keep 290px for the day list. */
@media (min-width: 1280px) {
    html.pie-premium .pp-shell.pp-planner .planner-itinerary-flex > .reservation-rightside-section {
        width: 330px;
        min-width: 330px;
    }
}

/* Trip content panel width: the design's 330px column (template1.css holds it at 290px). Open
   states only, so the collapsed column (drag-component-hidden → 0) still folds away */
@media (min-width: 821px) {
    html.pie-premium .pp-shell.pp-planner .new-planner .planner-itinerary-flex:not(.drag-component-hidden) > .reservation-rightside-section {
        width: 330px;
        min-width: 330px;
    }
}

/* Narrow windows: the slide-in drawer is 330px too (never wider than the window less a gutter) */
@media (max-width: 820px) {
    html.pie-premium .pp-shell.pp-planner .new-planner .reservation-rightside-section,
    html.pie-premium .pp-shell.pp-planner .new-planner .planner-itinerary-flex.drag-component-hidden .reservation-rightside-section {
        width: min(330px, 100vw - 16px);
        min-width: min(330px, 100vw - 16px);
    }
}

/* ==========================================================================
   Accounting / invoice QA fixes that reach every page: popup footer buttons the page hides,
   focused fields, radios, link hover, and the invoice pop-ups (Edit, View, Send, Apply payment)
   that open from both Accounting and the planner
   ========================================================================== */
/* Footer buttons a page hides (.hide / v-show) stay hidden: the pill rule above forces
   display:inline-flex !important on every footer .btn, which showed Save + Update + Update & Send
   together on the invoice form and both "Send Invoice" buttons (email and SMS) */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) :is(.modal-footer, .popup-footer) .btn:is(.hide, .d-none, [style*="display: none"], [style*="display:none"]) {
    display: none !important;
}

/* Focused fields: the accent ring, not common.css's Magenta border (!important there) */
html.pie-premium .form-control:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* Custom radios: common.css draws the checked ring and dot green (#00C853). Pages with their own
   radio look (Dashboard, reservation pop-up) keep it, their rules are more specific */
html.pie-premium .pp-shell .custome-radiobtn input[type="radio"]:checked ~ .checkmark {
    border-color: var(--pp-acc);
}

html.pie-premium .pp-shell .custome-radiobtn .checkmark::after {
    background: var(--pp-acc);
}

/* Links: common.css turns every hovered link Magenta. :where() keeps this at the same weight,
   so links with their own hover colour keep it */
:where(html.pie-premium) a:hover {
    color: var(--pp-acc);
}

/* Public invoice page (/client_invoice/…): "Due Date" in the accent, not Magenta */
html.pie-premium .invoice-public-page .color-pink {
    color: var(--pp-acc) !important;
}

/* Public Traveler Information form (travelerInformationPublicForm.vue): "Is this you?" Yes/No as
   the new look's pills. !important beats common.css's bg-pink / color-white */
html.pie-premium .travelerinfo_public_form .btn:is(.btn-yes, .btn-no) {
    min-width: 72px;
    height: 32px;
    margin: 0 0 0 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font: 13px/32px var(--pp-sans);
    -webkit-text-stroke: .35px currentColor;
    vertical-align: middle;
}

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

html.pie-premium .travelerinfo_public_form .btn.btn-yes:is(:hover, :focus) {
    background-color: color-mix(in srgb, var(--pp-acc) 88%, #000) !important;
}

html.pie-premium .travelerinfo_public_form .btn.btn-no {
    background: #fff;
    color: var(--pp-ink);
    box-shadow: inset 0 0 0 1px var(--pp-line-2), 0 6px 16px -10px rgba(30, 40, 32, .25);
}

html.pie-premium .travelerinfo_public_form .btn.btn-no:is(:hover, :focus) {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-ink);
}

html.pie-premium .travelerinfo_public_form .btn:is(.btn-yes, .btn-no):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--pp-acc-soft), 0 0 0 1px var(--pp-acc);
}

/* "We recognize your email" popup after that Yes (customClass email_verify): the cancel button is
   bg-black/color-white and the text has common.css's 24px title font; use the new look's popup */
html.pie-premium .sweet-alert.email_verify .sa-button-container .btn.cancel {
    background-color: #fff !important;
    color: var(--pp-ink) !important;
}

html.pie-premium .sweet-alert.email_verify .sa-button-container .btn.cancel:is(:hover, :focus) {
    background-color: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}

html.pie-premium .sweet-alert.email_verify :is(.title-font-swal, .text-font-swal) {
    font: inherit;
}

/* View Invoice (v3/invoice_show.vue): title, then the actions, then × at the far right on every
   page (the planner showed the buttons straight after the title) */
html.pie-premium .pp-shell #invoice_show_modal .modal-header > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

html.pie-premium .pp-shell #invoice_show_modal .modal-header > .container > .modal-title {
    margin: 0;
    color: var(--pp-ink);
    font: 20px var(--pp-bold);
}

html.pie-premium .pp-shell #invoice_show_modal .modal-header > .container > .pull-right:not(.btn-close) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    order: 2;
    float: none;
    margin-left: auto;
}

html.pie-premium .pp-shell #invoice_show_modal .modal-header > .container > .btn-close {
    order: 3;
    float: none;
    margin: 0 0 0 8px !important;
}

html.pie-premium .pp-shell #invoice_show_modal .modal-header .pull-right > .btn {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell #invoice_show_modal .modal-header .pull-right > .btn.btn-black {
    background: var(--pp-ink);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

/* Payments on the invoice (each_payment_details.vue): Delete Payment / Add Refund / Unapply
   Payment as visible secondary pills (they were white on white), never Magenta on click */
html.pie-premium .pp-shell #invoice_show_modal.modal .modal-content .modal-body .text-end > .btn.btn-primary-outline {
    height: 34px !important;
    margin: 0 0 0 6px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 999px;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink) !important;
    box-shadow: inset 0 0 0 1px var(--pp-line-2) !important;
    font: 13px var(--pp-sans) !important;
    -webkit-text-stroke: .3px currentColor;
    letter-spacing: 0;
}

html.pie-premium .pp-shell #invoice_show_modal.modal .modal-content .modal-body .text-end > .btn.btn-primary-outline:is(:hover, :focus, :active) {
    border: 0 !important;
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
    color: var(--pp-acc) !important;
    box-shadow: inset 0 0 0 1px var(--pp-acc-line) !important;
}

/* Send Invoice (sendInvoice.vue): "Send via" then an Email / SMS switch on one line, the same on
   Accounting and the planner */
html.pie-premium .pp-shell #invoice_send_modal .send-form-via > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

html.pie-premium .pp-shell #invoice_send_modal .send-form-via > .row > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0 !important;
}

html.pie-premium .pp-shell #invoice_send_modal .send-form-via > .row > .col-md-2 {
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
    white-space: nowrap;
}

html.pie-premium .pp-shell #invoice_send_modal .send-form-via ul {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    list-style: none;
}

html.pie-premium .pp-shell #invoice_send_modal .send-form-via ul > li {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent !important;
    color: var(--pp-ink-3) !important;
    font: 13px var(--pp-sans);
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell #invoice_send_modal .send-form-via ul > li[style*="display: none"] {
    display: none !important;
}

html.pie-premium .pp-shell #invoice_send_modal .send-form-via ul > li.active {
    background: var(--pp-ink) !important;
    color: #fff !important;
    font-family: var(--pp-bold);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}

html.pie-premium .pp-shell #invoice_send_modal .send-form-via ul > li i {
    margin: 0;
    color: inherit;
    font-size: 14px;
}

/* Table row icons (Action gear and other icon links): template1.css paints the hovered icon
   itself Magenta, so the link colour never reached it. The accent on hover, in every table */
html.pie-premium .pp-shell .vuegood-table-info .custom-table table.vgt-table td.vgt-left-align a:hover i {
    color: var(--pp-acc);
}

/* Mobile menu button (floating hamburger, ≤915px): Bordeaux, not template1.css's Magenta */
html.pie-premium .pp-shell .mobile-leftmenu #mobile_left_menu {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    color: #fff;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

/* Images tab: Pixabay / Unsplash source switch (segmented, like the design's tabs) and Unsplash credits */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-src {
    display: flex;
    gap: 4px;
    margin: 0 0 10px;
    padding: 4px;
    border-radius: 999px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-src button {
    flex: 1 1 0;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-src button:hover {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-src button.on {
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .08), 0 4px 10px -6px rgba(30, 40, 32, .3);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-cap a {
    color: #fff;
    text-decoration: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-cap a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-credit {
    margin: 10px 2px 0;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-credit a {
    color: var(--pp-ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Images tab skeleton: the shimmer (.pp-sk) in the shapes of the photo tiles and the pick squares */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-skel {
    pointer-events: none;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-grid.pp-tci-skel > .pp-sk {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tci-skel .pp-tci-pickrow > .pp-sk {
    aspect-ratio: 1;
    border-radius: 10px;
}

/* ==========================================================================
   Floating "Ask Copilot ⌘J" launcher (PremiumHeader.vue), the design's .cp-fab: bottom right on
   every new-look page, hidden while the P.AI chat is open (docked or floating)
   ========================================================================== */
html.pie-premium .pp-shell .pp-cpfab {
    position: fixed;
    z-index: 35;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px 0 10px;
    border: 0;
    border-radius: 26px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -18px rgba(20, 24, 20, .35), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
    letter-spacing: 0;
    transition: transform .15s, box-shadow .15s;
}

html.pie-premium .pp-shell .pp-cpfab:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 44px -18px rgba(20, 24, 20, .4), 0 0 0 1px var(--pp-acc-line);
}

html.pie-premium .pp-shell .pp-cpfab:focus-visible {
    outline: 2px solid var(--pp-acc);
    outline-offset: 3px;
}

html.pie-premium .pp-shell .pp-cpfab-orb {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, var(--pp-acc), #ff6aa8, #8a6bff, var(--pp-acc));
    box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--pp-acc) 70%, transparent);
}

html.pie-premium .pp-shell .pp-cpfab-orb::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

html.pie-premium .pp-shell .pp-cpfab kbd {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--pp-panel-2);
    box-shadow: none;
    color: var(--pp-ink-3);
    font: 11px var(--pp-sans);
}

html.pie-premium body:is(.ai-chat-docked, :has(.chat-details)) .pp-shell .pp-cpfab {
    display: none;
}

/* Phones: the orb alone, so it never covers a row's buttons */
@media (max-width: 640px) {
    html.pie-premium .pp-shell .pp-cpfab {
        right: 16px;
        bottom: 16px;
        padding: 0 9px;
    }

    html.pie-premium .pp-shell .pp-cpfab :is(.pp-cpfab-t, kbd) {
        display: none;
    }
}

/* Trip content "Book" tab (PremiumTripContent.vue): a full-width button on its own row under
   Reservations | Information | Images, dark while its panel is open */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library):has(> .pp-tcb-tab) {
    flex-wrap: wrap;
    row-gap: 8px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.pp-tcb-tab {
    flex: 1 0 100%;
    gap: 8px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--pp-line);
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold) !important;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.pp-tcb-tab::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--pp-i-cart) center / contain no-repeat;
    mask: var(--pp-i-cart) center / contain no-repeat;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.pp-tcb-tab:hover {
    box-shadow: 0 0 0 1px var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section ul.new-tab:not(.new-tab-library) li.pp-tcb-tab.active {
    background: var(--pp-ink) !important;
    color: #fff !important;
}

/* Like Images: while Book is open the whole column scrolls, so no row is cut off under the panel's end */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside:has(.pp-tcb-panel.open) {
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line-2) transparent;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .drag-rightside:has(.pp-tcb-panel.open) :is(.drag-component-wrapper, .drag-component-wrapper > .col-lg-12, .daily-inerary, #collapseOne, #collapseOne > .pp-tcb-panel) {
    flex: none;
}

/* Book panel: the day's TravelPlanit choices as rows in one white card, Booking PCC above */
html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-panel {
    display: grid;
    gap: 10px;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-pcc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0 4px;
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-pcc b {
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-pcc select {
    min-width: 0;
    max-width: 60%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-list {
    overflow: hidden;
    padding: 4px 0;
    border: 1px solid rgba(60, 60, 80, .1);
    border-radius: 20px;
    background: #fff;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 0;
    background: none;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-row:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-row > i:first-child {
    flex: none;
    width: 18px;
    color: var(--pp-ink-3);
    font-size: 16px;
    text-align: center;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-row > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .reservation-rightside-section .pp-tcb-row > .pp-ic {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--pp-ink-3);
}

/* ==========================================================================
   P.AI chat (AIChatBox.vue, shared with the classic look) in the design's Copilot panel style:
   a floating white card with an accent wash, the gradient orb, quiet header buttons, the trip
   context as a chip, suggestions as rows above a gradient-ring input, and calm bubbles.
   New look only; every P.AI control and behaviour stays.
   ========================================================================== */
html.pie-premium {
    /* Docked drawer: a 352px card with 12px around it, as in the design */
    --pai-drawer-w: 376px;
}

html.pie-premium .chat-details .chat-box {
    border-radius: 26px;
    box-shadow: 0 30px 70px -26px rgba(30, 40, 32, .35), 0 0 0 1px rgba(60, 60, 80, .06);
    font-family: var(--pp-sans);
}

@media (min-width: 1200px) {
    html.pie-premium body.ai-chat-docked .chat-details .chat-box {
        top: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: calc(var(--pai-drawer-w) - 24px) !important;
        border: 0;
        border-radius: 26px;
        box-shadow: 0 30px 70px -26px rgba(30, 40, 32, .35), 0 0 0 1px rgba(60, 60, 80, .06);
    }
}

html.pie-premium .chat-details .chat-box .chatbox-container {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pp-acc) 7%, transparent), transparent 240px), #fff;
}

html.pie-premium .chat-details .chat-box :is(strong, b) {
    font-family: var(--pp-bold);
}

/* Header: orb, title over status, round quiet buttons */
html.pie-premium .chat-details .chat-header,
html.pie-premium body.ai-chat-docked .chat-details .chat-header {
    padding: 16px 12px 12px 18px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink);
}

html.pie-premium .chat-details .chat-header__left {
    gap: 10px;
}

html.pie-premium .chat-details .chat-header__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, var(--pp-acc), #ff6aa8, #8a6bff, var(--pp-acc));
    box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--pp-acc) 70%, transparent);
}

html.pie-premium .chat-details .chat-header__avatar img {
    display: none;
}

html.pie-premium .chat-details .chat-header__avatar::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

html.pie-premium .chat-details .chat-header__title {
    gap: 6px;
    color: var(--pp-ink);
    font: 15px/1.4 var(--pp-bold);
}

html.pie-premium .chat-details .chat-header__title .ai-beta {
    padding: 1px 7px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 10.5px/16px var(--pp-bold);
    letter-spacing: .04em;
}

html.pie-premium .chat-details .chat-header__status {
    color: var(--pp-ink-3);
    font: 12px/18.6px var(--pp-sans);
}

html.pie-premium .chat-details :is(.chat-header__icon-btn, .chat-header__close) {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pp-ink-3);
}

html.pie-premium .chat-details :is(.chat-header__icon-btn, .chat-header__close):hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

/* Trip context ("Paris · Nov 7 - Nov 12"): a quiet chip under the header, like "Working on: …" */
html.pie-premium .chat-details .chat-context-badge {
    align-self: flex-start;
    margin: 0 16px 6px 60px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 12px var(--pp-sans);
}

html.pie-premium .chat-details .chat-context-badge svg {
    color: var(--pp-acc);
}

/* Messages */
html.pie-premium .chat-details .chat-messages {
    padding: 4px 16px 16px;
    background: transparent;
}

html.pie-premium .chat-details .chat-welcome,
html.pie-premium .chat-details .chat-welcome__header,
html.pie-premium .chat-details .chat-welcome__header-text {
    align-items: flex-start;
    text-align: left;
}

html.pie-premium .chat-details .chat-welcome__title {
    color: var(--pp-ink);
    font: 16px/24.8px var(--pp-bold);
}

html.pie-premium .chat-details .chat-welcome__subtitle {
    color: var(--pp-ink-3);
    font: 13px/20px var(--pp-sans);
}

html.pie-premium .chat-details .chat-bubble--ai .chat-bubble__content {
    border: 0;
    border-radius: 16px 16px 16px 6px;
    background: #fff;
    box-shadow: 0 0 0 .5px rgba(60, 60, 80, .12), 0 1px 2px rgba(30, 38, 32, .04);
    color: var(--pp-ink-2);
}

html.pie-premium .chat-details .chat-bubble--user .chat-bubble__content {
    border: 0;
    border-radius: 16px 16px 6px 16px;
    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;
}

html.pie-premium .chat-details .chat-bubble__avatar {
    background: conic-gradient(from 200deg, var(--pp-acc), #ff6aa8, #8a6bff, var(--pp-acc));
}

/* Input area: suggestions first (as the design's "Suggested" rows), then the input, the note, credits */
html.pie-premium .chat-details .chat-input-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 0;
    background: transparent;
}

html.pie-premium .chat-details .chat-input-area > .chat-welcome__suggestions {
    order: -1;
}

html.pie-premium .chat-details .chat-welcome__suggestions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
}

html.pie-premium .chat-details .chat-welcome__suggestions::before {
    content: "Suggested for you";
    margin: 0 0 2px 2px;
    color: var(--pp-muted);
    font: 11.5px var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .chat-details .chat-welcome__suggestion {
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 14px;
    background: var(--pp-panel-2);
    box-shadow: none;
    color: var(--pp-ink-2);
    font: 13px/20px var(--pp-sans);
    text-align: left;
}

html.pie-premium .chat-details .chat-welcome__suggestion:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
    transform: none;
}

html.pie-premium .chat-details .chat-welcome__suggestion-icon {
    display: none;
}

html.pie-premium .chat-details .chat-welcome__suggestion::after {
    content: "→";
    flex: none;
    margin-left: 8px;
    color: var(--pp-muted);
}

html.pie-premium .chat-details .chat-input-area__wrapper {
    min-height: 48px;
    padding: 5px 5px 5px 8px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, var(--pp-acc), #ff6aa8 55%, #8a6bff) border-box;
    box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .3);
}

html.pie-premium .chat-details .chat-input-area__wrapper:focus-within {
    box-shadow: 0 0 0 3px var(--pp-acc-soft), 0 6px 18px -14px rgba(0, 0, 0, .3);
}

html.pie-premium .chat-details .chat-input-area__input {
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .chat-details .chat-input-area__input::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .chat-details :is(.chat-input-area__newchat, .chat-input-area__attach) {
    color: var(--pp-ink-3);
}

html.pie-premium .chat-details :is(.chat-input-area__newchat, .chat-input-area__attach):hover {
    color: var(--pp-acc);
}

html.pie-premium .chat-details .chat-input-area__send {
    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);
}

html.pie-premium .chat-details .chat-input-area__disclaimer {
    margin: 0;
    color: var(--pp-muted);
    font: 11.5px/1.5 var(--pp-sans);
}

html.pie-premium .chat-details .chat-token-usage {
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium .chat-details .chat-token-usage__label {
    color: var(--pp-ink-2);
    font: 12px var(--pp-sans);
}

html.pie-premium .chat-details :is(.chat-token-usage__count, .chat-token-usage__history) {
    color: var(--pp-acc);
}

html.pie-premium .chat-details .chat-token-usage__fill {
    background: var(--pp-acc);
}

html.pie-premium .chat-details .chat-token-usage__detail {
    color: var(--pp-ink-3);
    font: 12px var(--pp-sans);
}

/* Docked P.AI: the top bar ends where the card begins (the design squeezes it with the page) */
@media (min-width: 1200px) {
    html.pie-premium body.ai-chat-docked .pp-shell .header-wrapper {
        right: var(--pai-drawer-w) !important;
    }
}

/* Five controls share the 324px pill: tighter gaps and 32px icon buttons so Send stays inside the ring */
html.pie-premium .chat-details .chat-input-area__wrapper {
    gap: 2px;
}

html.pie-premium .chat-details .chat-input-area__input {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 6px;
}

html.pie-premium .chat-details :is(.chat-input-area__newchat, .chat-input-area__attach) {
    flex: none;
    width: 32px;
    height: 32px;
}

/* Docked P.AI leaves the top bar about 230px narrower: Ask AI goes (the chat is open), Classic look
   shows its icon, and the trial notice keeps only its Upgrade pill */
@media (min-width: 1200px) {
    html.pie-premium body.ai-chat-docked .pp-shell .pp-top .pp-ask,
    html.pie-premium body.ai-chat-docked .pp-shell .pp-top .pp-look-lbl {
        display: none;
    }

    html.pie-premium body.ai-chat-docked .pp-shell .pp-top .trial-upgrade .trial-upgrade-wrapper {
        padding: 4px;
        font-size: 0;
    }

    html.pie-premium body.ai-chat-docked .pp-shell .pp-top .trial-upgrade .upgrade-btn {
        margin-left: 0 !important;
    }
}

/* The same compact top bar whenever the bar itself is narrow, whatever the window: the open trip
   panel takes ~340px, so at 1046px UPGRADE and the avatar ran off the right edge */
html.pie-premium .pp-shell .header-wrapper:has(> .pp-top) {
    container: pp-top-bar / inline-size;
}

@media (min-width: 916px) {
    @container pp-top-bar (max-width: 820px) {
        html.pie-premium .pp-shell .pp-top .pp-ask,
        html.pie-premium .pp-shell .pp-top .pp-look-lbl {
            display: none;
        }

        html.pie-premium .pp-shell .pp-top .trial-upgrade .trial-upgrade-wrapper {
            padding: 4px;
            font-size: 0;
        }

        html.pie-premium .pp-shell .pp-top .trial-upgrade .upgrade-btn {
            margin-left: 0 !important;
        }
    }
}

/* Floating P.AI (not docked): a card 12px in from the window's corner, like the design.
   At 768px and below AIChatBox.vue makes it full screen: square corners there */
@media (min-width: 769px) {
    html.pie-premium body:not(.ai-chat-docked) .chat-details .chat-box {
        right: 12px;
        bottom: 12px;
        max-height: calc(100vh - 24px);
    }
}

@media (max-width: 768px) {
    html.pie-premium .chat-details .chat-box {
        border-radius: 0;
    }
}

/* ==========================================================================
   TravelPlanit shop drawer (TravelPlanitDrawer.vue, opened from a day's or the Trip content
   "Book"): the design's side-panel header, Bordeaux instead of the TravelPlanit pink.
   Restyle only; the iframe, resize, collapse and close work as before.
   ========================================================================== */
html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-panel {
    background: var(--pp-panel);
    box-shadow: -24px 0 48px -20px rgba(20, 24, 20, .35), -1px 0 0 var(--pp-line);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-header {
    height: 64px;
    padding: 0 14px 0 20px;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-title {
    gap: 10px;
    color: var(--pp-ink);
    font: 16px var(--pp-bold);
    letter-spacing: -.005em;
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-title i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-size: 16px;
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-header-actions {
    gap: 2px;
}

html.pie-premium .pp-shell .tp-shop-drawer :is(.tp-shop-icon-btn, .tp-shop-close, .tp-shop-rail-close) {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--pp-ink-3);
    font-size: 14px;
}

html.pie-premium .pp-shell .tp-shop-drawer :is(.tp-shop-icon-btn, .tp-shop-close, .tp-shop-rail-close):hover:not(:disabled) {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-tip::after {
    border-radius: 8px;
    background: var(--pp-ink);
    font: 12px var(--pp-sans);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-tip::before {
    border-bottom-color: var(--pp-ink);
}

html.pie-premium .pp-shell .tp-shop-drawer :is(.tp-shop-body, .tp-shop-loader) {
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-loader {
    color: var(--pp-ink-3);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--pp-line);
    border-top-color: var(--pp-acc);
}

/* Resize edge and the collapsed side tab */
html.pie-premium .pp-shell .tp-shop-drawer:is(.tp-shop-drawer--resizing) .tp-shop-resizer,
html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-resizer:hover {
    background: var(--pp-acc-soft);
}

html.pie-premium .pp-shell .tp-shop-drawer:is(.tp-shop-drawer--resizing) .tp-shop-resizer-grip,
html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-resizer:hover .tp-shop-resizer-grip {
    background: var(--pp-acc);
}

html.pie-premium .pp-shell .tp-shop-drawer.tp-shop-drawer--collapsed .tp-shop-panel {
    border-left: 3px solid var(--pp-acc);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-rail-open {
    border-radius: 12px;
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .tp-shop-drawer .tp-shop-rail-open:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .tp-shop-drawer :is(.tp-shop-rail-open > i, .tp-shop-rail-chevron) {
    color: var(--pp-acc);
}

/* Itinerary toolbar sticks 12px under the fixed top bar while the page scrolls (desktop). The Trip
   content panel sticks under it (--pp-itb-below: 80px + the 54px bar + 12px). A page-coloured copy
   of the bar 12px above it hides the day cards that pass between the two bars. */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner {
        --pp-itb-below: 146px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-itb.attached {
        position: sticky;
        top: 80px;
        box-shadow: var(--pp-shadow), 0 -12px 0 0 var(--pp-bg);
    }
}

/* ≤1100px the toolbar wraps onto a second line: the panel starts lower */
@media (min-width: 916px) and (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner {
        --pp-itb-below: 196px;
    }
}

/* ==========================================================================
   Trip content "Book" → Hotels (PremiumHotelShop.vue): search form, then live-priced hotel cards
   in one white card list, like the category rows. A card opens to show taxes, meals and
   cancellation.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .pp-hs {
    display: grid;
    gap: 10px;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-head b {
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-head small {
    overflow: hidden;
    color: var(--pp-ink-3);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-back {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-back:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .pp-hs .pp-ic {
    width: 15px;
    height: 15px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-form {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(60, 60, 80, .1);
    border-radius: 20px;
    background: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-f {
    display: grid;
    gap: 1px;
    min-width: 0;
    margin: 0;
    padding: 6px 10px 7px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    cursor: text;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-f:focus-within {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-f small {
    color: var(--pp-muted);
    font: 11px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-f :is(input, select) {
    width: 100%;
    min-width: 0;
    height: 20px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
}

/* Check-in / Check-out: the date, then × (clears it) and the calendar icon, both clickable */
html.pie-premium .pp-shell.pp-planner .pp-hs-f:has(> .pp-hs-date) {
    cursor: default;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-date {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-date input[type="date"] {
    flex: 1 1 auto;
    cursor: default;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-date input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-clear {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--pp-muted);
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-clear:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-clear .pp-ic {
    width: 14px;
    height: 14px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    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);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-go:disabled {
    opacity: .55;
    cursor: default;
}

html.pie-premium .pp-shell.pp-planner :is(.pp-hs-hint, .pp-hs-meta, .pp-hs-msg) {
    margin: 0;
    padding: 0 4px;
    color: var(--pp-ink-3);
    font-size: 12.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-msg:not(.soft) {
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #c0262d 8%, #fff);
    color: #9b1c22;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-list {
    overflow: hidden;
    border: 1px solid rgba(60, 60, 80, .1);
    border-radius: 20px;
    background: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px 10px;
    width: 100%;
    padding: 12px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: none;
    color: var(--pp-ink);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-card:last-child {
    border-bottom: 0;
}

html.pie-premium .pp-shell.pp-planner button.pp-hs-card:hover,
html.pie-premium .pp-shell.pp-planner .pp-hs-card.open {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-img {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-main {
    display: grid;
    gap: 1px;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-name {
    overflow: hidden;
    font: 13.5px/1.3 var(--pp-bold);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-stars {
    color: #c79a2b;
    font-size: 11px;
    letter-spacing: 1px;
}

html.pie-premium .pp-shell.pp-planner :is(.pp-hs-addr, .pp-hs-room) {
    overflow: hidden;
    color: var(--pp-ink-3);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-price {
    display: grid;
    justify-items: end;
    gap: 1px;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-price b {
    font: 14px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-price small {
    color: var(--pp-ink-3);
    font-size: 11.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-more {
    display: grid;
    grid-column: 2 / -1;
    gap: 3px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--pp-line-2);
    color: var(--pp-ink-2);
    font-size: 12px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-more > span {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-more em {
    color: var(--pp-ink-3);
    font-style: normal;
}

/* Loading: three grey cards */
html.pie-premium .pp-shell.pp-planner .pp-hs-skel span,
html.pie-premium .pp-shell.pp-planner .pp-hs-skel i {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--pp-panel-2), var(--pp-hover), var(--pp-panel-2));
    background-size: 200% 100%;
    animation: pp-hs-shine 1.2s linear infinite;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-skel span {
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-skel div {
    display: grid;
    grid-column: 2 / -1;
    gap: 8px;
    padding-top: 6px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-skel i {
    height: 10px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-skel i + i {
    width: 60%;
}

@keyframes pp-hs-shine {
    to { background-position: -200% 0; }
}

/* Book → Hotels: a result card can be dragged onto a day (PremiumHotelShop.vue) */
html.pie-premium .pp-shell.pp-planner .pp-hs-card.pp-hs-drag {
    cursor: grab;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-card.pp-hs-drag:active {
    cursor: grabbing;
}

/* Book → Hotels: destination type-ahead, sort / filters, "no rate" cards and Load more (PremiumHotelShop.vue) */
html.pie-premium .pp-shell.pp-planner .pp-hs-dest {
    position: relative;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 30;
    display: grid;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -18px rgba(20, 24, 20, .35);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug > small {
    padding: 6px 8px 2px;
    color: var(--pp-muted);
    font: 10.5px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--pp-ink);
    text-align: left;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug button:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug button > .pp-ic {
    flex: none;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug button span {
    display: grid;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug b {
    overflow: hidden;
    font: 13px var(--pp-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sug em {
    overflow: hidden;
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-sans);
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-tools {
    display: grid;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 4px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sort small {
    flex: none;
    width: 40px;
    color: var(--pp-ink-3);
    font-size: 12.5px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-sort select {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-chips button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-chips button em {
    color: var(--pp-muted);
    font-size: 11px;
    font-style: normal;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-chips button.on {
    border-color: var(--pp-ink);
    background: var(--pp-ink);
    color: #fff;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-chips button.on em {
    color: rgba(255, 255, 255, .7);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-price.none small {
    color: var(--pp-muted);
    font-size: 11.5px;
    line-height: 1.3;
    text-align: right;
}

html.pie-premium .pp-shell.pp-planner .pp-hs-more-btn {
    height: 36px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .pp-hs-more-btn:hover:not(:disabled) {
    background: var(--pp-hover);
}

/* ==========================================================================
   Page skeleton (PremiumPageSkeleton.vue, Dashboard + Checklists shells): a page head, tab bar and
   list card in shimmer over the content column while a page first loads. The page mounts under it,
   so classic layout code still measures real sizes. The spinner overlay is hidden meanwhile.
   ========================================================================== */
html.pie-premium.pp-skel-on #fullPageLoader {
    display: none !important;
}

html.pie-premium.pp-skel-on .pp-shell .crm-panel {
    position: relative;
}

html.pie-premium .pp-shell .pp-page-skel {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 8;
    min-height: calc(100vh - 88px);
    padding: 0 12px 32px;
    background: var(--pp-bg);
    pointer-events: none;
}

html.pie-premium .pp-shell .pp-page-skel .pp-sk {
    display: block;
    height: 12px;
    border-radius: 7px;
    background: linear-gradient(90deg, #dedbd4 30%, #ebe9e4 50%, #dedbd4 70%);
    background-size: 300% 100%;
    animation: pp-shimmer 1.4s ease-in-out infinite;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-card .pp-sk {
    background-image: linear-gradient(90deg, #eceef2 30%, #f6f7f9 50%, #eceef2 70%);
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 22px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-titles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-eyebrow {
    width: 84px;
    height: 10px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-title {
    width: min(280px, 70%);
    height: 30px;
    border-radius: 9px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-sub {
    width: min(380px, 90%);
    height: 13px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-btn {
    width: 120px;
    height: 40px;
    border-radius: 999px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-btn-acc {
    background: color-mix(in srgb, var(--pp-acc) 22%, #e9e7e2);
    animation: none;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-tabs {
    display: inline-flex;
    gap: 6px;
    max-width: 100%;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-tab {
    width: 96px;
    height: 32px;
    border-radius: 999px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-card {
    border-radius: var(--pp-r-card);
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-table {
    overflow: hidden;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-search {
    width: min(320px, 50%);
    height: 36px;
    border-radius: 10px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-chip {
    width: 96px;
    height: 34px;
    border-radius: 999px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr 1fr .8fr;
    align-items: center;
    gap: 24px;
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-row:last-child {
    border-bottom: 0;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-row > .pp-sk:nth-child(2n) {
    width: 70%;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-th {
    height: 44px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-th > .pp-sk {
    width: 55%;
    height: 10px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 104px;
    padding: 18px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-label {
    width: 45%;
    height: 11px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-value {
    width: 55%;
    height: 26px;
    border-radius: 8px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-panel {
    padding: 18px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-dot {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 10px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-text {
    flex: 1 1 auto;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-end {
    flex: 0 0 64px;
}

/* Side bar stand-in: the same floating card as .left-sidebar.pp-side (Shell cards); gone once
   the real one shows */
html.pie-premium .pp-shell .pp-page-skel .pp-ps-side {
    position: fixed;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    width: calc(var(--pp-side) - 12px);
    height: calc(100vh - 24px);
    padding: 14px 12px 12px;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-page-skel .pp-ps-side {
    width: calc(var(--pp-side-mini) - 12px);
    padding: 14px 10px 12px;
    align-items: center;
}

html.pie-premium .pp-shell:has(.pp-side-vue:not([style*="display: none"])) .pp-page-skel .pp-ps-side {
    display: none;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 10px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-mark {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 9px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-word {
    width: 110px;
    height: 16px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-create {
    width: 100%;
    height: 42px;
    margin: 12px 0 14px;
    border-radius: 12px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    margin: 4px 0;
    padding: 0 12px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-icon {
    flex: 0 0 18px;
    height: 18px;
    border-radius: 6px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-name {
    width: 60%;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-nav:nth-child(3n) .pp-ps-name {
    width: 45%;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-nav:nth-child(3n+1) .pp-ps-name {
    width: 72%;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px 10px 4px;
}

html.pie-premium .pp-shell .pp-page-skel .pp-ps-avatar {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-page-skel .pp-ps-me {
    padding: 12px 0 4px;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-page-skel :is(.pp-ps-word, .pp-ps-name) {
    display: none;
}

html.pie-premium .pp-shell .control-panel-left:not(.open) .pp-page-skel .pp-ps-create {
    width: 46px;
    margin-top: 44px;
}

@media (max-width: 1100px) {
    html.pie-premium .pp-shell .pp-page-skel .pp-ps-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell .pp-page-skel {
        padding: 0 16px 24px;
    }

    html.pie-premium .pp-shell .pp-page-skel .pp-ps-side {
        display: none;
    }

    html.pie-premium .pp-shell .pp-page-skel .pp-ps-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    html.pie-premium .pp-shell .pp-page-skel .pp-ps-row {
        grid-template-columns: 2fr 1fr 1fr;
    }

    html.pie-premium .pp-shell .pp-page-skel .pp-ps-row > .pp-sk:nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell .pp-page-skel .pp-ps-head {
        flex-direction: column;
        align-items: stretch;
    }

    html.pie-premium .pp-shell .pp-page-skel .pp-ps-tab:nth-child(n+3),
    html.pie-premium .pp-shell .pp-page-skel .pp-ps-chip {
        display: none;
    }

    html.pie-premium .pp-shell .pp-page-skel .pp-ps-search {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.pie-premium .pp-shell .pp-page-skel .pp-sk {
        animation: none;
    }
}

/* ==========================================================================
   Account menu (PremiumHeader.vue, avatar): the design's account drawer as a dropdown — muted
   ID/usertype/role block, 38px rows with line icons, soft hover, Bordeaux on hover instead of the
   classic purple
   ========================================================================== */
html.pie-premium .pp-shell {
    --pp-i-gear: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M12%203v2.5M12%2018.5V21M3%2012h2.5M18.5%2012H21M5.6%205.6l1.8%201.8M16.6%2016.6l1.8%201.8M5.6%2018.4l1.8-1.8M16.6%207.4l1.8-1.8'/%3E%3C/svg%3E");
    --pp-i-help: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9.5%209.5a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.9-1%201.6v.4M12%2017h.01'/%3E%3C/svg%3E");
    --pp-i-brush: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%203l3%203-8%208-3-3zM10%2011c-2.2%200-4%201.6-4%203.6%200%201.4-.8%202.6-2%203.4%203.2%201%207.2.2%208.4-2.2.6-1.2.4-2.6-.4-3.4'/%3E%3C/svg%3E");
    --pp-i-logout: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h3M16%208l4%204-4%204M20%2012H10'/%3E%3C/svg%3E");
}

html.pie-premium .pp-shell .pp-ic-gear { --pp-i: var(--pp-i-gear); }
html.pie-premium .pp-shell .pp-ic-help { --pp-i: var(--pp-i-help); }
html.pie-premium .pp-shell .pp-ic-brush { --pp-i: var(--pp-i-brush); }
html.pie-premium .pp-shell .pp-ic-logout { --pp-i: var(--pp-i-logout); }

html.pie-premium .pp-shell .pp-org .user-dropdown {
    min-width: 280px;
    padding: 8px;
    border-radius: 16px;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .pp-org .user-dropdown .item {
    padding: 0 12px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .pp-org .user-dropdown .item.user-id {
    padding-top: 8px;
    padding-bottom: 4px;
    font-family: var(--pp-bold);
    font-size: 14px;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-org .user-dropdown .item.user-type:has(+ .dropdown-divider) {
    padding-bottom: 8px;
}

html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid var(--pp-line);
    opacity: 1;
}

html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-family: var(--pp-sans);
    font-size: 13.5px;
    letter-spacing: 0;
    color: var(--pp-ink-2);
    background: transparent;
}

html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item .pp-ic {
    color: var(--pp-ink-3);
}

/* !important beats template1.css's classic purple hover (.header .user-dropdown .dropdown-item:hover) */
html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item:is(:hover, :focus-visible) {
    background: var(--pp-hover);
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item:is(:hover, :focus-visible) .pp-ic {
    color: var(--pp-acc);
}

/* Pressed: the shared Bordeaux fill (.dropdown-item:active above) with white text */
html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item:is(:active, .active),
html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item:is(:active, .active) .pp-ic {
    color: #fff !important;
}

html.pie-premium .pp-shell .pp-org .user-dropdown .dropdown-item .badge {
    margin-left: auto !important;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--pp-bold);
    font-size: 11px;
    letter-spacing: 0;
}

/* Page skeleton: section loaders (showCustomLoading → blockUI, z-index 9) would sit on top of it */
html.pie-premium.pp-skel-on .pp-shell .crm-panel .blockUI {
    display: none !important;
}

/* ==========================================================================
   Checkboxes, switches and the time picker on every page (QA: checklists / task pop-ups)
   ========================================================================== */
/* Custom checkboxes: the design's 5px-rounded box, Bordeaux when ticked (template1.css forces
   black, common.css green, both !important or more specific), and the tick drawn as a centred
   icon. common.css draws it as a rotated border placed in pixels, so it sat off centre in every
   box size the pages use; the !important geometry overrides those page offsets on purpose */
html.pie-premium .pp-shell .custom-checkbox .checkmark {
    border: 1.5px solid var(--pp-line-2);
    border-radius: 5px;
    background-color: var(--pp-panel);
}

html.pie-premium .pp-shell .custom-checkbox .checkmark.error {
    border-color: #b4232c;
}

html.pie-premium .pp-shell .custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    border-color: var(--pp-acc) !important;
    background-color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell .custom-checkbox .checkmark::after {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
    transform: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207.5'/%3E%3C/svg%3E") center / 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Native checkboxes / radios and Bootstrap .form-check-input: Bordeaux, not blue */
html.pie-premium .pp-shell :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--pp-acc);
}

html.pie-premium .pp-shell .form-check-input:checked {
    border-color: var(--pp-acc);
    background-color: var(--pp-acc);
}

html.pie-premium .pp-shell .form-check-input:focus {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* vue2-timepicker: dashboard.css paints the focused field and the picked hour / minute Magenta
   (#A20090, !important) */
html.pie-premium .pp-shell .vue__time-picker input.display-time:focus {
    border-color: var(--pp-acc) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell .vue__time-picker .dropdown ul li:not([disabled]).active,
html.pie-premium .pp-shell .vue__time-picker .dropdown ul li:not([disabled]).active:hover {
    background-color: var(--pp-acc) !important;
    color: #fff;
}

html.pie-premium .pp-shell .vue__time-picker .dropdown ul li:not([disabled]):not(.active):hover {
    background-color: var(--pp-acc-soft);
    color: var(--pp-acc);
}

/* Task pop-ups on every page (tasks/TaskFormModal.vue, checklist/task_form.vue): the Task
   Reminder on/off switch as the design's 34px switch (the planner's recipe), no green knob */
html.pie-premium .pp-shell .update-task-modal .modal-body .checkbox-toggle input + label::before {
    top: 0;
    width: 34px;
    height: 20px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell .update-task-modal .modal-body .checkbox-toggle input + label::after,
html.pie-premium .pp-shell .update-task-modal .modal-body .checkbox-toggle input + label:hover::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);
}

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

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

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

html.pie-premium .pp-shell .update-task-modal .modal-body .checkbox-toggle.on-off-switch :is(.left-off, .right-on) {
    display: none;
}

/* ---------- Header search (PremiumSearchBar.vue): the ⌘K bar is the input, results drop down under it ---------- */
html.pie-premium .pp-shell .pp-gsearch {
    position: relative;
    display: flex;
    flex: 0 1 520px;
    min-width: 150px;
}

html.pie-premium .pp-shell .pp-gsearch .pp-kbd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: text;
}

html.pie-premium .pp-shell .pp-gsearch-open .pp-kbd::before {
    opacity: 1;
}

html.pie-premium .pp-shell .pp-gsearch .pp-kbd input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
    -webkit-appearance: none;
}

html.pie-premium .pp-shell .pp-gsearch .pp-kbd input[type=search]::placeholder {
    color: var(--pp-muted);
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell .pp-gsearch .pp-kbd input[type=search]::-webkit-search-cancel-button {
    display: none;
}

html.pie-premium .pp-shell .pp-gsearch-spin {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pp-acc-line);
    border-top-color: var(--pp-acc);
    border-radius: 50%;
    animation: pp-gsearch-spin .7s linear infinite;
}

@keyframes pp-gsearch-spin {
    to {
        transform: rotate(360deg);
    }
}

html.pie-premium .pp-shell .pp-gsearch-x {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--pp-ink-3);
    font-size: 11px;
    cursor: pointer;
}

html.pie-premium .pp-shell .pp-gsearch-x:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .pp-gsearch-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max(100%, min(560px, 100vw - 32px));
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line), var(--pp-shadow-2);
    overflow: hidden;
    z-index: 1060;
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell .pp-gsearch-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-3);
    font-size: 13px;
}

html.pie-premium .pp-shell .pp-gsearch-opt .custom-checkbox {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
}

html.pie-premium .pp-shell .pp-gsearch-list {
    max-height: min(460px, 100vh - 160px);
    overflow-y: auto;
    padding-bottom: 6px;
}

html.pie-premium .pp-shell .pp-gsearch-cat-head {
    display: block;
    padding: 14px 18px 6px;
    color: var(--pp-ink-3);
    font: 11.5px/1.4 var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell .pp-gsearch-cat ul {
    margin: 0;
    padding: 0 8px;
    list-style: none;
}

html.pie-premium .pp-shell .pp-gsearch-cat li a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--pp-ink-2);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
}

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

html.pie-premium .pp-shell .pp-gsearch-cat li a > i {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-size: 15px;
}

html.pie-premium .pp-shell .pp-gsearch-txt {
    min-width: 0;
}

html.pie-premium .pp-shell .pp-gsearch-txt small {
    display: block;
    color: var(--pp-muted);
    font-size: 12px;
}

html.pie-premium .pp-shell .pp-gsearch-none {
    padding: 22px 18px;
    color: var(--pp-muted);
    font-size: 13.5px;
    text-align: center;
}

/* phones: the bar is a 42px icon; tapping it opens the field and results across the top */
@media (max-width: 760px) {
    html.pie-premium .pp-shell .pp-gsearch {
        flex: none;
        min-width: 0;
        width: 42px;
    }

    html.pie-premium .pp-shell .pp-gsearch:not(.pp-gsearch-open) .pp-kbd input[type=search] {
        display: none;
    }

    html.pie-premium .pp-shell .pp-gsearch-open .pp-kbd {
        position: fixed;
        top: 13px;
        left: 12px;
        right: 12px;
        width: auto;
        z-index: 1061;
        justify-content: flex-start;
    }

    html.pie-premium .pp-shell .pp-gsearch-open .pp-gsearch-pop {
        position: fixed;
        top: 63px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* ---------- Planner → Contacts & travelers (TripTravelerInfo_new.vue + TripContacts.vue): one aligned toolbar ---------- */
/* same id as the Trip information card, whose padding: 0 !important rule this must beat */
html.pie-premium .pp-shell.pp-planner #trip_traveler_info_v3_planner.traveler-tab-details:has(> .traveler-filter) {
    padding: 20px 24px 24px !important;
}

/* status filter, counts and Export on one centred row */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0 0 12px;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter > div {
    flex: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter > div:first-child {
    width: 240px;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter .noof-traveler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 40px;
    margin: 0;
    line-height: 1;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter .export-options {
    margin: 0 !important;
}

/* Import / Copy form links / Send forms / Send Message: same height, even gap */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0 !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info > *,
html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info .copy-links > .btn {
    margin: 0;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info :is(.import-travelers, .btn) {
    height: 36px;
    margin: 0;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info .copy-links {
    position: relative;
}

/* template1.css paints the Import label/icon and the traveler names the legacy magenta (#A20090) */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info .import-travelers span {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info .import-travelers:hover span {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info .import-travelers i {
    color: var(--pp-acc) !important;
}

/* the icon-font glyphs set their own magenta on ::before */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .planner-travelers-info i::before {
    color: inherit !important;
}

/* only the spans template1.css made magenta: names, counts, links; dropdown values and the AI chip keep their own colour */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details .trip_traveler_row td span:not(.v-select *, [class*="ai-"], [class*="ai-"] *) {
    color: var(--pp-acc);
}

/* Section titles with their "+ Add" link underneath */
html.pie-premium .pp-shell.pp-planner .traveler-tab-details:has(> .traveler-filter) .section-title {
    margin: 0 0 2px !important;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details:has(> .traveler-filter) .add-traveler {
    display: inline-block;
    margin-bottom: 8px;
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details:has(> .traveler-filter) .nontraveler-contacts {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .traveler-tab-details:has(> .traveler-filter) .nontraveler-contacts .color-gray {
    color: var(--pp-muted);
    font-size: 12.5px;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #trip_traveler_info_v3_planner.traveler-tab-details:has(> .traveler-filter) {
        padding: 16px !important;
    }

    html.pie-premium .pp-shell.pp-planner .traveler-tab-details > .traveler-filter > div:first-child {
        width: 100%;
    }
}

/* ==========================================================================
   Planner — Move Content popup (ReservationModal.vue #reservationModal): the day labels
   (Information / Pre / Day N) as Bordeaux soft chips instead of template1.css's #A20090 block.
   ========================================================================== */
html.pie-premium .pp-shell .reservation-modal .reservation-preview h6 {
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--pp-acc-line);
    border-radius: 8px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font: 13px/1.4 var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell .reservation-modal .reservation-preview > div > .d-flex > .d-flex > span {
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

/* ==========================================================================
   Planner — Information heading edit field (TripPlannerBookingList_new.vue): the classic
   white box with the PIE Magenta #A20090 border becomes the new-look field (line border,
   Bordeaux focus ring), sized to the day title next to it.
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner #planner_booking .information-title.is-editing input {
    height: 34px;
    min-width: 220px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    box-shadow: none;
    color: var(--pp-ink);
    font: 15.5px/1.35 var(--pp-sans);
    letter-spacing: 0;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .information-title.is-editing input:focus {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .information-title.is-editing input::placeholder {
    color: var(--pp-muted);
    font-weight: 400;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .information-title.is-editing::after {
    margin-top: 4px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .information-title-limit {
    color: var(--pp-acc) !important;
    font: 12px var(--pp-sans);
}

/* ---------- Planner → day notes (TripPlannerBookingList_new.vue): full-width card, label left, actions right ---------- */
html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section:has(.day-note-card) {
    flex: 1 1 100%;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-notes-list {
    width: 100%;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card {
    display: block;
    width: 100%;
    padding: 12px 16px !important;
    border: 1px solid var(--pp-line) !important; /* template1.css sets border: 0 !important */
    border-radius: 14px;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-2);
    font: 13.5px/1.55 var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card + .day-note-card {
    margin-top: 10px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-note {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-bottom: 6px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-notes-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    padding: 0 !important;
    background: transparent !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-notes-info,
html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-notes-info span {
    color: var(--pp-ink-3) !important;
    font: 11.5px var(--pp-bold) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-notes-info i {
    padding: 0 !important;
    color: var(--pp-acc);
    font-size: 14px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-note > span.booking-photos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-note > span.booking-photos i {
    margin: 0 !important;
    font-size: 13px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .day-note > span.booking-photos:hover {
    text-decoration: underline;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .desc_span {
    min-width: 0;
    color: var(--pp-ink-2);
    overflow-wrap: anywhere;
}

/* the note's own HTML: no stray top/bottom margins inside the card */
html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .desc_span > :first-child {
    margin-top: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .di-day-note-view-section .day-note-card .desc_span > :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   "Select Image" popup (DiGlobalImageUpload.vue #DiGlobalImgModal_cropper + the Unsplash
   picker inside it). Hosted once in App.vue, outside .pp-shell, so it is scoped to the page
   having the new-look shell. Classic PIE Magenta (#a20090 / #ff005e / --theme-color) becomes
   the design's popup: 22px card, segmented tab row, Bordeaux search button, ink chips.
   ========================================================================== */
html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper {
    --theme-color: var(--pp-acc);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .modal-header {
    align-items: center;
    padding: 20px 22px 8px;
    border: 0;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .modal-title {
    color: var(--pp-ink);
    font: 20px var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .modal-header .btn-close {
    width: 38px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .modal-header .btn-close:hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .modal-body {
    padding: 8px 22px 22px;
}

/* Tab row: one soft capsule holding the source tabs (segmented) and the search field */
html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs.uploadlinks {
    position: relative;
    align-items: center;
    gap: 2px;
    min-height: 48px;
    padding: 4px;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel-2);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .nav-link {
    height: 38px;
    margin: 0;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 10px;
    background: transparent;
    color: var(--pp-ink-3);
    font: 13.5px/38px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .nav-link:hover {
    background: rgba(255, 255, 255, .72);
    color: var(--pp-ink);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .nav-link.active {
    border: 0 !important;
    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 body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .nav-link .divider_upload {
    display: none;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .divider_upload {
    height: 20px;
    margin: 0 8px;
    background: var(--pp-line-2);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs :is(.pixabay_search_bar, .unsplash_search_bar) {
    align-items: center;
    border: 0 !important;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .api-img-search-field {
    height: 38px;
    padding: 0 84px 0 4px;
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
    outline: 0;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .api-img-search-field::placeholder {
    color: var(--pp-muted);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .search_close {
    top: 50%;
    right: 58px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--pp-muted);
    font-size: 14px;
    line-height: 14px;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .search_close:hover {
    color: var(--pp-ink);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .search-icon {
    display: grid;
    place-items: center;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 38px;
    border-radius: 10px;
    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-size: 18px;
    line-height: 1;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .search-icon:hover {
    background-color: #63142c;
}

/* Unsplash picker: chips, dropdowns and the orientation toggle as the design's 32px pills */
html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-toolbar {
    gap: 12px 16px;
    margin-bottom: 14px;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper :is(.unsplash-chip, .unsplash-select, .unsplash-orientation) {
    height: 32px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background-color: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 12.5px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-chip {
    padding: 0 13px;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-chip:hover {
    border-color: var(--pp-acc-line);
    background-color: var(--pp-hover);
    color: var(--pp-ink);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-chip.active {
    border-color: var(--pp-ink);
    background-color: var(--pp-ink);
    box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
    color: #fff;
    font-family: var(--pp-bold);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-select {
    padding: 0 32px 0 14px;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-select:hover {
    border-color: var(--pp-acc-line);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper :is(.unsplash-chip:focus-visible, .unsplash-select:focus, .unsplash-orientation button:focus-visible) {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-orientation button + button {
    border-left-color: var(--pp-line-2);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-orientation button.active {
    background-color: var(--pp-ink);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-shape {
    border-color: var(--pp-ink-3);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-orientation button.active .unsplash-shape {
    border-color: #fff;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper :is(.unsplash-result-count, .unsplash-footer, .upload_img_total) {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .unsplash-footer a {
    color: var(--pp-acc);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .api-img-list img {
    border-radius: 10px;
}

/* Pixabay orientation toggle */
html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .tab-pane .upload_img_orientation .orientation.active {
    border-color: var(--pp-ink);
    background-color: var(--pp-ink);
}

/* Upload tab: Reset / Cancel / Add as the design's 40px pill buttons */
html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .crop-actions {
    border-top-color: var(--pp-line);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .crop-actions .btn {
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

/* template1.css gives .btn-primary-outline a pink #D692CA border with !important */
html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .crop-actions .btn-primary-outline {
    border: 1px solid var(--pp-line) !important;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    color: var(--pp-ink);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .crop-actions .btn-primary-outline:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .crop-actions .btn-primary {
    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;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .crop-actions .btn-primary:hover {
    background-color: #63142c;
}

html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pie_upload_section label {
    border: 2px dashed var(--pp-line-2);
    border-radius: 14px;
    color: var(--pp-ink-3);
}

@media (max-width: 640px) {
    html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .modal-body {
        padding: 8px 16px 16px;
    }

    html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs.uploadlinks {
        flex-wrap: wrap;
    }

    /* The search field drops to its own row; keep its × and search button on that row */
    html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs :is(.pixabay_search_bar, .unsplash_search_bar) {
        position: relative;
        flex: 1 1 100%;
        width: 100%;
    }

    html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs :is(.pixabay_search_bar, .unsplash_search_bar) .divider_upload {
        display: none;
    }

    html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .api-img-search-field {
        padding-left: 10px;
    }

    html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .search-icon {
        top: 0;
        right: 0;
    }

    html.pie-premium body:has(.pp-shell) #DiGlobalImgModal_cropper .pixabay_tabs .nav-tabs .search_close {
        right: 56px;
    }
}

/* ---------- Planner → day note editor (TripPlannerBookingList_new.vue .description_note): full-width
   card like the day-note cards, soft toolbar, 34px pill buttons (Close, then Save) ---------- */
html.pie-premium .pp-shell.pp-planner #planner_booking .description_note {
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0;
    margin: 4px 0 12px !important;
    padding: 10px;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -12px rgba(30, 40, 32, .25);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note:focus-within {
    border-color: var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note .ck.ck-editor__top .ck-toolbar {
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note .ck.ck-toolbar .ck-button {
    border-radius: 8px;
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note .ck.ck-toolbar .ck-button:not(.ck-disabled):hover,
html.pie-premium .pp-shell.pp-planner #planner_booking .description_note .ck.ck-toolbar .ck-button.ck-on {
    background: var(--pp-hover);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note .ck.ck-toolbar .ck-toolbar__separator {
    background: var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note .ck.ck-editor__main > .ck-editor__editable {
    min-height: 120px;
    margin-top: 6px;
    padding: 4px 12px;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--pp-panel) !important;
    box-shadow: none !important;
    color: var(--pp-ink-2);
    font: 14px/1.55 var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note > .text-end {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px !important;
    padding-top: 10px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note > .text-end .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 76px;
    margin: 0 !important;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 999px;
    font: 13px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note > .text-end .btn.btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note > .text-end .btn.btn-primary-outline {
    order: -1;
    background: #fff !important;
    color: var(--pp-ink) !important;
    box-shadow: 0 0 0 1px var(--pp-line-2);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .description_note > .text-end .btn.btn-primary-outline:hover {
    background: var(--pp-hover) !important;
}

/* Planner banner actions render before the money strip (PremiumPlannerIndex .pp-fin-host), so opening
   the strip no longer pushes Preview/Share down onto it. The lift drops by the closed money line's
   height + margins (38 - 58 + 32 = 12px; 641–1100px: 35 - 109 + 76 = 2px) to keep the same spot.
   Desktop: -59px centres the 40px buttons on the 38px closed money line (-66px sat them 7px high). */
@media (min-width: 1101px) {
    html.pie-premium .pp-shell.pp-planner .pp-bacts > * {
        top: -59px;
    }
}

@media (min-width: 641px) and (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner .pp-bacts > * {
        top: -60px;
    }
}

/* Phones: the actions are in the flow, so keep them under the money line as before */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-host {
        display: flex;
        flex-direction: column;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-host > .pp-bacts {
        order: 1;
    }
}

/* ==========================================================================
   Planner — banner status menu (bootstrap-select in TripHeader_new.vue): the classic full-colour
   rows become the Trips list's status menu, a white card whose rows carry the agency colour as a
   dot (--pp-st, moved off the inline background by PremiumPlannerIndex.vue)
   ========================================================================== */
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu {
    min-width: 200px !important;
    margin-top: 6px !important;
    padding: 6px !important;
    border: 0;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu .inner {
    overflow-x: hidden;
    border: 0;
    box-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    background: transparent !important;
    color: var(--pp-ink-2) !important;
    font: 13.5px var(--pp-sans);
    letter-spacing: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-st, var(--pp-muted));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-st, var(--pp-muted)) 22%, transparent);
}

/* Pastel agency colours: deepen the dot as the Trips list pills do */
@supports (color: oklch(from red l c h)) {
    html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item[style*="--pp-st"]::before {
        background: oklch(from var(--pp-st) 0.62 clamp(0.1, calc(c * 1.4), 0.18) h);
    }
}

/* Saved in capitals ("ON HOLD"); read as "On hold", like the pill */
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item .text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: lowercase;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item .text::first-letter {
    text-transform: uppercase;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item:is(:hover, :focus) {
    background: var(--pp-hover) !important;
    color: var(--pp-ink) !important;
    outline: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li:is(.selected, .active) .dropdown-item,
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item:is(.selected, .active) {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select .dropdown-menu li .dropdown-item .check-mark {
    display: none;
}

/* ---------- Client itinerary popup (TravelItineraryPopup.vue #travelItineraryModel + TiContentConfig.vue):
   title left and pill actions right, preview on a soft panel, settings sidebar as a white card ---------- */
html.pie-premium .pp-shell #travelItineraryModel .modal-content {
    overflow: hidden;
    padding: 0;
    border-radius: 22px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #travelItineraryModel .modal-header.travel-itinerary-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 20px 16px 24px;
    border-bottom: 1px solid var(--pp-line) !important;
    border-radius: 0;
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .modal-title {
    order: -1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 16px 0 0;
    overflow: hidden;
    color: var(--pp-ink);
    font: 20px/1.25 var(--pp-bold);
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .gray_light_pills {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    height: 36px;
    margin: 0;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .gray_light_pills i {
    margin: 0;
    color: var(--pp-acc);
    font-size: 15px;
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .gray_light_pills:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header #share_button {
    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;
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header #share_button i {
    color: #fff;
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header #share_button:hover {
    background: color-mix(in srgb, var(--pp-acc) 88%, #000);
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .ti-share-btn-disabled {
    opacity: .5;
    pointer-events: none;
}

html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .btn-close {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

html.pie-premium .pp-shell #travelItineraryModel .modal-body.ti-modal-content {
    padding: 16px;
    border-radius: 0;
    background: var(--pp-panel-2);
    box-shadow: none;
}

/* Settings sidebar */
html.pie-premium .pp-shell #travelItineraryModel .ti-sidebar-col {
    padding: 0 8px 0 0;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion {
    padding: 14px;
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line), 0 6px 16px -12px rgba(30, 40, 32, .25);
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .copy_link {
    float: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .copy_link #header_share_link_li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    border-radius: 999px;
    background: var(--pp-acc-soft);
    box-shadow: inset 0 0 0 1px var(--pp-acc-line);
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
    cursor: pointer;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .copy_link #header_share_link_li:hover {
    background: color-mix(in srgb, var(--pp-acc) 12%, #fff);
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .copy_link #header_share_link_li i {
    color: inherit;
    font-size: 15px;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .pb-3 {
    padding-bottom: 0 !important;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .pb-3 > div > .d-flex {
    min-height: 44px;
    margin: 0 !important;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .pb-3 > div > .d-flex > p {
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .pb-3 .checkbox-toggle {
    margin-right: 0 !important;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .pb-3 button.copy_link {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 6px 0 0 !important;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .pb-3 button.copy_link:hover {
    background: var(--pp-hover);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .pb-3 button.copy_link i {
    font-size: 15px;
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tiles {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    background: var(--pp-panel);
    cursor: pointer;
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tile:hover {
    border-color: var(--pp-line-2);
    background: var(--pp-hover);
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tile .tile-icon {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pp-acc-soft);
    box-shadow: none;
    color: var(--pp-acc);
    font-size: 16px;
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tile .tile-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tile .tile-label {
    overflow: hidden;
    color: var(--pp-ink);
    font: 13.5px/1.3 var(--pp-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tile .tile-caption {
    color: var(--pp-muted);
    font: 12px/1.35 var(--pp-sans);
}

html.pie-premium .pp-shell #travelItineraryModel .trip-sidebar-tile .tile-arrow {
    color: var(--pp-ink-3);
    font-size: 16px;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .dropdown_pie_dashboard {
    margin-top: 12px !important;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_accordion > .dropdown_pie_dashboard > .accordion-item {
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_content_heading_content {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--pp-panel-2);
    box-shadow: none;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_content_heading_content .accordion-button {
    gap: 8px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell #travelItineraryModel #ti_content_heading_content .accordion-button::after {
    display: none;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_content_heading_content .accordion-button i:first-child {
    margin: 0 !important;
    color: var(--pp-acc);
    font-size: 15px;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_content_heading_content .sub-angle {
    margin-left: auto;
    color: var(--pp-ink-3);
}

/* Preview column: the client page sits on the soft panel */
html.pie-premium .pp-shell #travelItineraryModel .ti-content-col {
    padding: 0 0 0 8px;
}

html.pie-premium .pp-shell #travelItineraryModel #pdf_scroll_area > .row > div > .pdf-scroll-area {
    padding: 0 4px !important;
}

@media (max-width: 991px) {
    html.pie-premium .pp-shell #travelItineraryModel .ti-sidebar-col,
    html.pie-premium .pp-shell #travelItineraryModel .ti-content-col {
        padding: 0;
    }

    html.pie-premium .pp-shell #travelItineraryModel .ti-sidebar-col {
        margin-bottom: 12px;
    }
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell #travelItineraryModel .modal-header.travel-itinerary-header {
        flex-wrap: wrap;
        padding: 14px 14px 12px 16px;
    }

    html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .modal-title {
        order: -2;
        flex-basis: calc(100% - 50px);
        margin-right: 0;
        font-size: 18px;
    }

    html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .btn-close {
        order: -1;
    }

    html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .gray_light_pills {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0 12px;
    }

    html.pie-premium .pp-shell #travelItineraryModel .modal-body.ti-modal-content {
        padding: 12px;
    }
}

/* ---------- Client itinerary popup → Content section (TiContentConfig.vue): design picker as selectable
   rows, layout row with a pill button, pill search, accent Expand all ---------- */
html.pie-premium .pp-shell #travelItineraryModel #ti_content_collapse_content > .accordion-body {
    padding: 12px 0 0 !important;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div {
    padding: 0 !important;
    color: var(--pp-ink-2);
    font: 13.5px/1.4 var(--pp-sans);
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div:first-child > div:first-child:not(.d-flex) {
    margin: 0 0 6px;
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0 0 4px !important;
    padding: 8px 10px 8px 40px;
    border-radius: 10px;
    cursor: pointer;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn:has(input:checked) {
    background: var(--pp-acc-soft);
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn label {
    margin: 0;
    color: var(--pp-ink);
    font: 13.5px/1.35 var(--pp-sans);
    cursor: pointer;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn:has(input:checked) label {
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn label a {
    color: var(--pp-acc) !important;
    font: 12px var(--pp-sans) !important;
    white-space: nowrap;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn input[type=radio],
html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn .checkmark {
    top: 50%;
    left: 12px;
    width: 18px;
    height: 18px;
    margin: 0;
    transform: translateY(-50%);
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn .checkmark {
    border: 1.5px solid var(--pp-line-2);
    border-radius: 50%;
    background: #fff;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn input[type=radio]:checked ~ .checkmark {
    border: 5px solid var(--pp-acc);
    background: #fff;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .custome-radiobtn .checkmark::after {
    display: none !important;
}

/* Sub-options (Classic modern cover toggle, premium PDF design) sit indented under their design */
html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .ps-3 {
    padding-left: 12px !important;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div .leftside-config-name {
    color: var(--pp-ink-3);
    font: 12.5px/1.4 var(--pp-sans);
}

/* Select layout */
html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div > .d-flex.justify-content-between {
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div > .d-flex.justify-content-between > div {
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div > .d-flex.justify-content-between > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    height: 32px;
    margin: 0 !important;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--pp-ink) !important;
    font: 12.5px var(--pp-bold) !important;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div > .d-flex.justify-content-between > .btn:hover {
    background: var(--pp-hover) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #travelItineraryModel #ti_content_collapse_content hr {
    margin: 0 !important;
    border-color: var(--pp-line);
    opacity: 1;
}

/* Search and Expand all */
html.pie-premium .pp-shell #travelItineraryModel .ti-content-search {
    height: 36px;
    margin: 12px 0 8px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: #fff;
}

html.pie-premium .pp-shell #travelItineraryModel .ti-content-search:focus-within {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .pp-shell #travelItineraryModel .ti-content-search-icon {
    color: var(--pp-ink-3);
    font-size: 13px;
    line-height: 1;
}

html.pie-premium .pp-shell #travelItineraryModel .ti-content-search-input {
    height: 34px;
    padding: 0 8px;
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell #travelItineraryModel .ti-content-search-input::placeholder {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell #travelItineraryModel .ti-content-search-clear {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell #travelItineraryModel .ti-toggle-all-link-row {
    margin: 0 0 6px;
    padding: 0 4px;
}

html.pie-premium .pp-shell #travelItineraryModel .ti-toggle-all-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pp-acc);
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell #travelItineraryModel .ti-toggle-all-link:hover {
    text-decoration: none;
    opacity: .8;
}

/* ==========================================================================
   Itinerary settings — Travelers popup (TiContentConfig.vue #travelersPopupModal around
   TiTravelers.vue): the design's popup card, 48px fields, the sync switch as a pill, the
   empty state as a soft dashed box, footer button on the right
   ========================================================================== */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-content {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-header {
    align-items: center;
    padding: 20px 22px 6px;
    border: 0;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-title {
    color: var(--pp-ink);
    font: 20px var(--pp-bold);
    letter-spacing: -.015em;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-header .btn-close {
    width: 38px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 10px;
    background-size: 12px;
    opacity: .55;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-header .btn-close:hover {
    background-color: var(--pp-panel-2);
    opacity: 1;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-body {
    padding: 6px 22px 20px;
}

/* Heading: "Travelers  [0]" with the hint under it */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .panel-heading > .row:first-child > .form-group {
    width: 100%;
    margin-bottom: 14px;
}

/* The link carries Bootstrap's .d-block (display: block !important) */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .panel-heading > .row:first-child a {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    color: var(--pp-ink);
    font: 15px var(--pp-bold);
    text-decoration: none;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .traveler-count {
    display: inline-grid;
    place-items: center;
    float: none !important;
    min-width: 22px;
    height: 22px;
    margin: 0;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 11.5px/22px var(--pp-bold);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .small-text {
    flex-basis: 100%;
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

/* Field row: two pickers and the sync pill on one line, wrapping on narrow screens */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .panel-heading > .row + .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .panel-heading > .row + .row > .form-group {
    flex: 0 1 260px;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .panel-heading > .row + .row > .form-group:last-child {
    flex: 1 1 320px;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .form-floating .v-select .vs__dropdown-toggle {
    min-height: 48px;
    padding: 16px 10px 2px 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .form-floating .v-select.vs--open .vs__dropdown-toggle {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .form-floating .v-select :is(.vs__selected, .vs__search, .vs__search::placeholder) {
    color: var(--pp-ink);
    font: 14px var(--pp-sans);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .form-floating .v-select .vs__open-indicator {
    fill: var(--pp-ink-3);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .form-floating .ffl-label {
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .v-select .vs__dropdown-menu {
    padding: 6px;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .v-select .vs__dropdown-option {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .v-select .vs__dropdown-option--highlight {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

/* Sync with travelers: a 40px pill with a status dot (green while on) */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-sync-reservation-on-off span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-sync-reservation-on-off span::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-muted);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-sync-reservation-on-off span:hover {
    border-color: var(--pp-acc-line);
    color: var(--pp-ink);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-sync-reservation-on-off span.active-sync-ti-traveler {
    border-color: #bfe3cc;
    background: #eaf6ee;
    color: #1d6b3d;
    font-family: var(--pp-bold);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-sync-reservation-on-off span.active-sync-ti-traveler::before {
    background: #1f9d55;
    box-shadow: 0 0 0 3px rgba(31, 157, 85, .18);
}

/* ⋯ menu: round icon button, white card on hover */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-traveler-action {
    margin-left: 6px;
    padding: 0 !important;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-traveler-action > i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--pp-ink-3);
    font-size: 16px !important;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-traveler-action:hover > i {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-traveler-action .ti-traveler-action-list {
    top: 40px;
    right: 0;
    padding: 6px;
    border-radius: 12px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-traveler-action .ti-traveler-action-list::before {
    display: none;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-traveler-action .ti-traveler-action-list li a {
    padding: 0 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 13.5px/34px var(--pp-sans);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-traveler-action .ti-traveler-action-list li a:hover {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

/* Empty state */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue #ti_traveller_details > .color-nine {
    margin-top: 20px !important;
    padding: 28px 16px;
    border: 1px dashed var(--pp-line-2);
    border-radius: 14px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 13.5px var(--pp-sans) !important;
    text-align: center;
}

/* Traveler list */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .trip-traveler-table-section {
    margin-top: 18px;
    padding: 0;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .trip-traveler-table {
    margin: 0;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .trip-traveler-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .trip-traveler-table td {
    height: 52px;
    padding: 0 14px;
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    vertical-align: middle;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .trip-traveler-table tbody tr:last-child td {
    border-bottom: 0;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .trip-traveler-table tbody tr:hover td {
    background: var(--pp-hover);
}

/* Footer */
html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-footer {
    justify-content: flex-end !important;
    margin: 0;
    padding: 14px 22px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-footer .btn {
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
    letter-spacing: 0;
}

html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-footer .btn:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}

@media (max-width: 640px) {
    html.pie-premium body:has(.pp-shell) #travelersPopupModal .modal-body {
        padding: 6px 16px 16px;
    }

    html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .panel-heading > .row + .row > .form-group {
        flex-basis: 100%;
    }

    html.pie-premium body:has(.pp-shell) #travelersPopupModal .ti-travelers-vue .ti-sync-reservation-on-off span {
        white-space: normal;
    }
}

/* TI sub-header advisor / partner initials (customusers.css, publicpage.css paint them hot pink
   #FF005E): the new look's Bordeaux accent, like its other initials avatars */
html.pie-premium body:has(.pp-shell) .ti-sub-header .ti-cover-header-user-img,
html.pie-premium body:has(.pp-shell) .ti-sub-header .ti-cover-header-user-img span {
    background-color: var(--pp-acc);
}

/* Planner banner: the live trip countdown (TripCountdown.vue, compact) on the top row, beside
   Change cover, in the same glass */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    margin: 0;
    border: 0;
    background: rgba(17, 12, 14, .58);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
    font-family: var(--pp-sans);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-num {
    font-family: var(--pp-bold);
    font-weight: 700;
}

/* Room inside the glass: the numbers and labels sat right against its edges */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown.trip-cd-compact {
    border-radius: 13px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-units {
    gap: 0 14px;
    padding: 8px 16px 8px 18px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-label {
    margin-top: 3px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-until {
    margin: 9px 0;
    padding: 0 18px 0 16px;
}

/* Phones: the top row is short of room, so the countdown drops its "Until your trip" end */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-until {
        display: none;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-units {
        gap: 0 10px;
        padding: 6px 12px;
    }

    html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-unit {
        flex: none;
    }
}

/* The countdown's room depends on the banner's width, not the window's (the trip panel can take
   300px of a wide window), so these steps use a container query on the banner. Phones (≤640px)
   have their own layout below. */
html.pie-premium .pp-shell.pp-planner .trip-header .trip-banner {
    container: pp-banner / inline-size;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-unit {
    flex: none;
}

@media (min-width: 641px) {
    /* Narrow banner: the full countdown ran under Change cover, so both go compact as on phones
       (no "Until your trip", Change cover as its camera icon) */
    @container pp-banner (max-width: 800px) {
        html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-until,
        html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover .cover-text {
            display: none;
        }

        html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-units {
            gap: 0 10px;
            padding: 6px 12px;
        }

        html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
            padding: 0 10px;
        }

        /* Change cover is laid over the row's right end: keep the countdown clear of its icon */
        html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown {
            margin-right: 46px;
        }
    }

    /* Narrower still: the countdown doesn't fit beside the code and status (and the bottom row is
       full with the money line and actions), so it sits on the right beside the title and dates */
    @container pp-banner (max-width: 735px) {
        html.pie-premium .pp-shell.pp-planner .trip-banner :is(h1.trip_name, h1.mb-1),
        html.pie-premium .pp-shell.pp-planner .trip-banner .planner_detail > .d-flex {
            grid-column: 1 / 3;
            min-width: 0;
        }

        html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown {
            grid-row: 2 / span 2;
            grid-column: 3;
            align-self: center;
            justify-self: end;
            margin-right: 0;
        }
    }
}

/* Phones: the code, status, countdown and Change cover don't fit on one line (the units were squeezed
   to nothing and the countdown covered Change cover), so the countdown takes the empty second row */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Banner glass on bright cover photos: the light white glass (.14–.16) washed out over sky, stone
   and sand, so the controls laid on the photo share the countdown's darker glass. Share keeps its
   solid white; the money line and actions only sit on the photo from 641px up. */
html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover,
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle {
    background: rgba(17, 12, 14, .58) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover:hover,
html.pie-premium .pp-shell.pp-planner .trip-banner #trip_status_class .bootstrap-select > .dropdown-toggle:hover {
    background: rgba(17, 12, 14, .72) !important;
}

@media (min-width: 641px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-line,
    html.pie-premium .pp-shell.pp-planner .pp-bacts .pp-bact:not(.pri) {
        border: 0;
        background: rgba(17, 12, 14, .58);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
        color: #fff;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line:not(:disabled):hover,
    html.pie-premium .pp-shell.pp-planner .pp-fin-line.on,
    html.pie-premium .pp-shell.pp-planner .pp-bacts .pp-bact:not(.pri):hover,
    html.pie-premium .pp-shell.pp-planner .pp-bacts .pp-bact.on:not(.pri) {
        background: rgba(17, 12, 14, .72);
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line em {
        background: rgba(255, 255, 255, .2);
    }
}

/* Itinerary settings modal (ItinerarySettingsModal.vue, My Account + planner): new-UI switches.
   common.css forces a green knob on disabled (View) switches with !important, so the knob does too */
html.pie-premium .pp-shell #itinerarySettingModal .checkbox-toggle.on-off-switch input + label {
    width: 34px;
    height: 20px;
    padding: 0;
}

html.pie-premium .pp-shell #itinerarySettingModal .checkbox-toggle input + label::before,
html.pie-premium .pp-shell #itinerarySettingModal .checkbox-toggle input:disabled + label::before {
    top: 0;
    width: 34px;
    height: 20px;
    border: 0;
    border-radius: 10px;
    background: var(--pp-line-2);
}

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

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

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

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

/* Itinerary settings modal: Language row. Same labelled select tile as My Account → Default
   Itinerary Language (the "Language" text beside it repeated the tile's own label) */
html.pie-premium .pp-shell #itinerarySettingModal .itinerary-settings-myacc > .d-flex:has(.language-dropdown-input) {
    margin-top: 16px !important;
    padding-top: 16px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell #itinerarySettingModal .itinerary-settings-myacc > .d-flex:has(.language-dropdown-input) > .me-1 {
    display: none;
}

html.pie-premium .pp-shell #itinerarySettingModal .itinerary-settings-myacc > .d-flex:has(.language-dropdown-input) > div[style] {
    width: 280px !important;
    max-width: 100%;
}

html.pie-premium .pp-shell #itinerarySettingModal .language-dropdown-input > 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 #itinerarySettingModal .language-dropdown-input > select.form-control:hover:not(:disabled) {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell #itinerarySettingModal .language-dropdown-input > 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 #itinerarySettingModal .language-dropdown-input > select.form-control:disabled {
    color: var(--pp-ink-3);
    cursor: default;
}

html.pie-premium .pp-shell #itinerarySettingModal .language-dropdown-input > .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;
}

/* Banner ID chip matches the status pill beside it: same 30px glass pill and type size */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-code {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 12, 14, .58) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    font-size: 12.5px;
    line-height: 30px;
    letter-spacing: .04em;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Client itinerary popup header: Share / Preview / Send Update to Client stay on the left, as in the
   classic look, with the itinerary name after them (the phone layout keeps the name on its own row) */
@media (min-width: 641px) {
    html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header .modal-title {
        order: 0;
        margin: 0 0 0 16px;
    }
}

/* ── Share with others (TiTripShare.vue #share_trip_dialogue_ti) ──
   Classic: green active tab (#00c853), flat grey 3px tabs, purple hint text, green radios,
   lowercase "cancel". New look: segmented tab capsule, accent hints and radios, form fields
   as the other planner popups. */
html.pie-premium .pp-shell #share_trip_dialogue_ti .modal-header {
    padding: 22px 26px 6px;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .modal-body {
    padding: 12px 26px 20px;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .pdf_share_link > .header_share_ul:not(.w-100) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px;
    border-radius: 999px;
    background: var(--pp-panel-2);
    box-shadow: inset 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .header_share_ul .header_share_link_li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pp-ink-3);
    font-family: var(--pp-sans);
    font-size: 13.5px;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .header_share_ul .header_share_link_li:hover {
    background: var(--pp-panel);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .header_share_ul .header_share_link_li.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 #share_trip_dialogue_ti .modal-dialog .modal-body .header_share_ul .header_share_link_li i {
    display: inline-block;
    float: none;
    color: var(--pp-acc);
    font-size: 16px;
    line-height: 1;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .modal-dialog .modal-body .header_share_ul .header_share_link_li.active i {
    color: #fff;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .header_share_link_li .pie-icon-thin-0640_security_lock_protected {
    float: none;
    margin-left: 2px;
    font-size: 12px;
}

/* PDF tab: "Open PDF" link */
html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .pdf_share_link .header_share_ul .planner_di {
    width: auto;
    padding: 0;
    background: transparent;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .pdf_share_link .header_share_ul .planner_di a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line-2);
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    font-size: 13px;
    text-decoration: none;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .pdf_share_link .header_share_ul .planner_di a:hover {
    background: var(--pp-acc-soft);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .modal-dialog .modal-body .planner_di a i {
    padding: 0 !important;
    color: var(--pp-acc);
    font-size: 15px;
}

/* Section heading + helper text */
html.pie-premium .pp-shell #share_trip_dialogue_ti #header_type {
    margin-bottom: 6px;
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    font-size: 17px !important;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section #header_type_markup {
    color: var(--pp-ink-3);
    font-size: 13px;
    line-height: 1.6;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section .no-js-flex > span {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--pp-ink-2);
    font-family: var(--pp-bold);
    font-size: 12.5px !important;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section .email-group .email-text {
    height: 44px;
    padding: 0 14px !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel) !important;
    box-shadow: none;
    color: var(--pp-ink);
    font-size: 13.5px !important;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section .email-group .email-text:focus {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti #suggestion_email {
    margin-top: -6px;
    color: var(--pp-ink-3) !important;
    font-size: 12.5px !important;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section #suggestion_email span {
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
    font-size: 12.5px;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section .no-js-flex > p {
    margin-top: 6px;
    color: var(--pp-ink-3);
    font-size: 12px;
}

/* Note editor: same card as the planner day note */
html.pie-premium .pp-shell #share_trip_dialogue_ti .no-js-flex .ck.ck-editor {
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid var(--pp-line-2);
    border-radius: 12px;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .no-js-flex .ck.ck-editor:focus-within {
    border-color: var(--pp-acc-line);
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .no-js-flex .ck.ck-editor .ck-toolbar {
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    border-radius: 0 !important;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .no-js-flex .ck.ck-editor .ck-editor__editable {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* "Select and send to contact persons…" + Travelers / Client Contacts */
html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section h4 {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--pp-line);
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-size: 15px;
    line-height: 1.35;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section h4 span {
    display: inline-block;
    margin-top: 4px;
    color: var(--pp-ink-3);
    font-family: var(--pp-sans);
    font-size: 12.5px;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .select_info_section h4.fs-14 {
    margin: 14px 0 8px;
    padding-top: 0;
    border-top: 0;
    color: var(--pp-ink-3);
    font-size: 11.5px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .custom-checkbox label {
    color: var(--pp-ink-2);
    font-size: 13.5px;
}

/* PDF options radios: accent ring instead of the classic green dot */
html.pie-premium .pp-shell #share_trip_dialogue_ti .custome-radiobtn label {
    color: var(--pp-ink-2) !important;
    font-size: 13px !important;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .custome-radiobtn .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--pp-line-2);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .custome-radiobtn input[type=radio]:checked ~ .checkmark {
    border: 5px solid var(--pp-acc);
    background: var(--pp-panel);
}

html.pie-premium .pp-shell #share_trip_dialogue_ti .custome-radiobtn input[type=radio]:checked ~ .checkmark::after {
    display: none;
}

/* Footer: "cancel" is lowercase in the markup */
html.pie-premium .pp-shell #share_trip_dialogue_ti .modal-footer .btn {
    text-transform: capitalize !important;
}

/* The email field's empty floating-label holder adds a 24px line under the input */
html.pie-premium .pp-shell #share_trip_dialogue_ti .email-group > .pie_flex_label:not(:has(> *)) {
    display: none;
}

html.pie-premium .pp-shell #share_trip_dialogue_ti #error_message_div > div {
    border-radius: 10px !important;
    background: var(--pp-panel-2) !important;
    color: var(--pp-ink-3);
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell #share_trip_dialogue_ti .modal-header {
        padding: 18px 16px 4px;
    }

    html.pie-premium .pp-shell #share_trip_dialogue_ti .modal-body {
        padding: 10px 16px 16px;
    }

    html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .pdf_share_link > .header_share_ul:not(.w-100) {
        width: 100%;
        border-radius: 18px;
    }

    html.pie-premium .pp-shell #share_trip_dialogue_ti .send-form-via .header_share_ul .header_share_link_li {
        flex: 1 1 calc(33.333% - 4px);
        padding: 0 10px;
    }
}

/* Planner banner → date edit (TripHeader_new.vue .trip-dates-selection): the two date pickers
   showed as blank white boxes (white banner text on a white field). Same dark glass as the
   ID chip, white date. */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .form-group {
    position: relative;
    padding: 0;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .vdp-datepicker .form-control {
    width: 124px;
    height: 34px;
    min-height: 34px;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 10px !important;
    background: rgba(17, 12, 14, .42) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none !important;
    color: #fff !important;
    font-family: var(--pp-bold);
    font-size: 13.5px;
    text-indent: 0;
    text-align: left !important;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .vdp-datepicker .form-control::placeholder {
    color: rgba(255, 255, 255, .72);
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .vdp-datepicker .form-control:hover {
    background: rgba(17, 12, 14, .55) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .vdp-datepicker .form-control:focus {
    border-color: rgba(255, 255, 255, .7) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important;
}

/* The banner already shows a calendar before the dates; the field's own icon lost its icon
   font to the banner type rule and drew an empty box, and it is decorative only */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .form-group > .icon {
    display: none;
}

/* The calendar that opens under a field stays a light card */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .vdp-datepicker__calendar {
    z-index: 30;
    overflow: hidden;
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px;
    box-shadow: 0 18px 40px -18px rgba(20, 16, 18, .45);
    color: var(--pp-ink);
    font-family: var(--pp-sans);
    text-shadow: none;
}

@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .trip-banner .trip-dates-selection .vdp-datepicker .form-control {
        width: 112px;
    }
}

/* Planner banner → title edit pencil (TripHeader_new.vue .planner-edit-icon .title_edit): the
   "h1 *" Interstate rule above also replaced the icon font, so on hover only the classic white
   40% circle showed with no pencil. Keep the icon font; dark glass button with a white pencil. */
html.pie-premium .pp-shell.pp-planner .trip-banner h1 .planner-edit-icon i[class*="pie-icon-"] {
    font-family: 'picos_thin' !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner h1 .planner-edit-icon {
    display: inline-flex;
    align-items: center;
    width: 32px;
    height: 32px;
}

html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name:hover .planner-edit-icon .title_edit {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(17, 12, 14, .42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-shadow: none;
}

html.pie-premium .pp-shell.pp-planner .trip-banner h1.trip_name .planner-edit-icon .title_edit:hover {
    background: rgba(17, 12, 14, .6);
}

/* The date line forces white, inherited type and nowrap on every child (":is(.trip-header-date …) *"),
   so the calendar under a date chip had white text and all its day cells on one clipped line.
   Give the calendar back the shared light-calendar look (pie-premium "vdp-datepicker__calendar"). */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar {
    padding: 8px;
    white-space: normal;
    font: 13px/1.4 var(--pp-sans) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar * {
    color: var(--pp-ink-2) !important;
    font: inherit !important;
    white-space: normal;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar header span {
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar .cell.day-header {
    color: var(--pp-ink-3) !important;
    font-size: 11.5px !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar .cell.disabled {
    color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar .cell:not(.blank):not(.disabled):is(.day, .month, .year):hover {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar .cell.selected,
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-header-date .trip-dates-selection .vdp-datepicker__calendar .cell.selected:hover {
    color: #fff !important;
}

/* Planner while the user session loads (PremiumPlannerIndex.vue .pp-rail-skel / .pp-tp-skel): the
   loaded layout's places — rail mark, trip rail or side bar card, content column — so nothing jumps
   when the app rail and the trip side bar arrive */
@media (min-width: 916px) {
    html.pie-premium .pp-shell.pp-planner:has(> .pp-rail-skel) .pp-planner-brand {
        left: 0;
        width: 64px;
        justify-content: center;
    }

    html.pie-premium .pp-shell.pp-planner:has(> .pp-rail-skel) .pp-planner-brand .pp-w {
        display: none;
    }

    html.pie-premium .pp-shell.pp-planner:has(> .pp-rail-skel) .pp-tp-rail {
        top: 14px;
        left: 76px;
    }

    html.pie-premium .pp-shell.pp-planner:not(.pp-tp-open):has(> .pp-rail-skel) .trip-planner-compact .page-content {
        padding-left: 136px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open:has(> .pp-rail-skel) .trip-planner-compact .page-content {
        padding-left: 340px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel {
        position: fixed;
        z-index: 7;
        top: 14px;
        bottom: 14px;
        left: 76px;
        width: 264px;
        padding: 14px;
        overflow: hidden;
        border-radius: 22px;
        background: var(--pp-panel);
        box-shadow: var(--pp-shadow);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--pp-line);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-cover {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-name {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 7px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-name > .pp-sk {
        width: 80%;
        height: 12px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-name > .pp-sk + .pp-sk {
        width: 55%;
        height: 9px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        padding: 16px 4px;
        border-bottom: 1px solid var(--pp-line);
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-ico {
        width: 18px;
        height: 18px;
        border-radius: 6px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-label {
        width: 110px;
        height: 12px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-end {
        width: 14px;
        height: 12px;
        margin-left: auto;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-tile {
        width: 100%;
        height: 50px;
        border-radius: 12px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-tp-skel-end + .pp-tp-skel-tile {
        margin-top: 6px;
    }
}

@media (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .pp-tp-skel {
        display: none;
    }
}

/* App footer colours: the purple swoosh (template1.css footer-background.png) and the pink/purple
   logo image become the new look's Bordeaux. The swoosh keeps its glossy shading: the same image
   on a layer behind the content, hue-shifted and darkened. The logo is the side bar's P tile and
   wordmark; the classic image stays in the link, visually hidden, for its alt text. */
html.pie-premium .pp-shell .pie_footer {
    position: relative;
    isolation: isolate;
    background-image: none;
}

html.pie-premium .pp-shell .pie_footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: url(/static/img/footer-background.png) bottom right / 55% 110% no-repeat;
    filter: hue-rotate(35deg) saturate(.9) brightness(.7);
    pointer-events: none;
}

html.pie-premium .pp-shell .pie_footer .footer-logo li a:has(> img) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

html.pie-premium .pp-shell .pie_footer .footer-logo li a:has(> img)::before {
    content: "P";
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pp-acc);
    color: #fff;
    font: 20px var(--pp-bold);
}

html.pie-premium .pp-shell .pie_footer .footer-logo li a:has(> img)::after {
    content: "PlanitEasy";
    color: var(--pp-ink);
    font: 24px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell .pie_footer .footer-logo li a > img {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Information cards on a day with a time (TripPlannerBookingList_new.vue): the time row used to be
   lifted into the top-right corner with the details toggle, where it covered the ⋯ (Edit / Delete)
   and its classic white pill ran over the card border. The time now sits in the card's flow,
   right of the title and left of the ⋯ / details buttons, as plain text. */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 40px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 > .d-flex.align-items-baseline {
    flex: 1 1 auto;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 > .d-flex.justify-content-between,
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 > .d-flex.justify-content-between:has(> .ms-auto) {
    position: static;
    flex: 0 0 auto;
}

/* The details toggle keeps its corner spot beside the ⋯ */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 > .d-flex.justify-content-between > .ms-auto {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0 !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .booking-date-time {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font: 14px/1.4 var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .booking-date-time .time_section {
    gap: 6px;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .booking-date-time .pie-icon-thin-0026_time_watch_clock {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .booking-date-time .fs-11 {
    color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .booking-date-time .fs-12 {
    margin-top: 2px;
    color: var(--pp-ink-3);
    font-size: 12.5px !important;
}

/* Phones: the time drops under the title instead of squeezing it */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 {
        flex-wrap: wrap;
        gap: 6px;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 > .d-flex.justify-content-between {
        flex-basis: 100%;
    }

    html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .booking-date-time {
        white-space: normal;
    }
}

/* Information cards: ⋯ and the details toggle centred on the card's first row (the 40px icon at
   top 14px), not pinned 12px from the top; a fixed offset, so they stay put when details expand */
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list > div > .dropdown-toggle,
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list .my-1 > .d-flex.justify-content-between:has(> .ms-auto),
html.pie-premium .pp-shell.pp-planner #planner_booking .event-booking-list:has(.booking-date-time) .my-1 > .d-flex.justify-content-between > .ms-auto {
    top: 18px;
}

/* Planner toolbar: the Sabre import button shows Sabre's own red S in a ring (PremiumItineraryToolbar.vue),
   so it no longer reads as a second flights button */
html.pie-premium .pp-shell.pp-planner .pp-itb-imp .pp-itb-sabre {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border: 1.3px solid #e20000;
    border-radius: 50%;
}

html.pie-premium .pp-shell.pp-planner .pp-itb-imp .pp-itb-sabre img {
    display: block;
    width: 6px;
    height: auto;
}

/* ==========================================================================
   Planner — responsive fixes from the frontend audit (2026-10-31)
   ========================================================================== */

/* Banner countdown: each unit as wide as its label, so DAYS HOURS MINUTES SECONDS never run into
   each other when the banner is narrow (the shared 1fr columns shrank below the label width) */
html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-units {
    grid-template-columns: repeat(4, auto);
}

/* Tablet (641–1100px): the money strip's bottom margin collapsed through its empty host and left a
   76px band above the tiles; the same 32px as desktop */
@media (min-width: 641px) and (max-width: 1100px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-line {
        margin-bottom: 32px;
    }
}

/* Narrow desktop (916–1199px): the open trip panel floats over the page as a card instead of taking
   276px from it, which left the day cards ~200px wide with their meal buttons cut off */
@media (min-width: 916px) and (max-width: 1199px) {
    html.pie-premium .pp-shell.pp-planner.pp-tp-open:has(.pp-app-rail):has(.trip-planner-compact) .header-wrapper {
        left: 136px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open:has(.pp-app-rail) .trip-planner-compact .page-content {
        padding-left: 136px;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar {
        z-index: 1035;
    }

    html.pie-premium .pp-shell.pp-planner.pp-tp-open .planner-left-sidebar .left-sidebar-wrapper {
        box-shadow: 0 24px 60px -20px rgba(20, 20, 24, .45), 0 0 0 1px var(--pp-line);
    }

    /* Short of room beside the status: the countdown drops "Until your trip", as on phones */
    html.pie-premium .pp-shell.pp-planner.pp-tp-open .trip-banner .trip-countdown .trip-cd-until {
        display: none;
    }
}

@media (max-width: 915px) {
    /* Classic mobile CSS pins Change cover at top 10px / right 15px, under the countdown; keep it in
       its own cell of the banner's top row */
    html.pie-premium .pp-shell.pp-planner .trip-banner .change-cover {
        position: static;
    }
}

@media (min-width: 641px) and (max-width: 915px) {
    html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown .trip-cd-until {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Phones: the countdown takes the empty row under the chips, so the top row keeps code, status
       and the camera button */
    html.pie-premium .pp-shell.pp-planner .trip-banner .trip-countdown {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: start;
    }

    /* Dates and destination wrap onto two lines here; the "·" between them would start the second */
    html.pie-premium .pp-shell.pp-planner .trip-banner .trip_destination::after {
        display: none;
    }
}

/* Trip information keeps Update in a 65px sticky bar at the bottom of the window; the floating
   Ask Copilot button sat on top of it and took the click. Lift the button above the bar while that
   section is open */
html.pie-premium .pp-shell.pp-planner:has(.tab-pane.active #trip_traveler_info_v3_planner > .me-5) .pp-cpfab {
    bottom: 88px;
}

/* ==========================================================================
   404 page (/page_not_found, /pie_page_not_found) — sits outside .pp-shell
   ========================================================================== */
html.pie-premium body:has(.page_not_found) {
    background: var(--pp-bg);
}

html.pie-premium .page_not_found {
    background: var(--pp-bg);
}

html.pie-premium .page_not_found .icon_404,
html.pie-premium .page_not_found .icon_404 i {
    color: var(--pp-acc) !important; /* beats .color-pink !important */
}

html.pie-premium .page_not_found .lead {
    color: var(--pp-ink) !important;
}

html.pie-premium .page_not_found .bck-btn .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    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);
    color: #fff;
    font-family: var(--pp-bold);
    font-size: 13.5px;
    letter-spacing: 0;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}

html.pie-premium .page_not_found .bck-btn .btn.btn-primary:hover,
html.pie-premium .page_not_found .bck-btn .btn.btn-primary:focus {
    background: color-mix(in srgb, var(--pp-acc) 88%, #000);
    color: #fff;
}

/* ==========================================================================
   Reorderable photo tiles (v-attachment-sortable, App.vue): photos the same size in an even grid,
   a small white position number and move handle inside each photo's corners, Bordeaux accents.
   ========================================================================== */
html.pie-premium .pp-shell .attachment-sortable-tiles.grid-photo-name {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
}

html.pie-premium .pp-shell .attachment-sortable-tiles.grid-photo-name > * {
    flex: none;
    width: 78px !important;
    height: 60px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    overflow: hidden;
}

html.pie-premium .pp-shell .attachment-sortable-tiles.grid-photo-name > * > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 10px;
    object-fit: cover;
}

html.pie-premium .pp-shell :is(.attachment-sortable-enabled, .attachment-sortable-numbered).attachment-sortable-tiles > *::before {
    top: 5px;
    left: 5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    color: var(--pp-ink);
    font: 10.5px/18px var(--pp-bold);
}

html.pie-premium .pp-shell .attachment-sortable-tiles.grid-photo-name.attachment-sortable-enabled > *::after {
    right: 5px;
    bottom: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .94);
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .attachment-sortable-enabled > *:hover::after {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .attachment-sortable-enabled > .attachment-sortable-ghost {
    background: var(--pp-acc-soft);
    outline-color: var(--pp-acc);
}

html.pie-premium .pp-shell .attachment-sort-hint {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell .attachment-sort-hint .pie-icon-drag-and-drop {
    color: var(--pp-acc);
}

/* ==========================================================================
   Tag pickers (vue-multiselect, e.g. Reservation / Place Tags): the new look's soft Bordeaux pill
   instead of the library's bright green. Page stylesheets that style their own pickers still win.
   ========================================================================== */
html.pie-premium .pp-shell .multiselect__tag {
    border-radius: 6px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell .multiselect__tag-icon::after {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .multiselect__tag-icon:is(:hover, :focus) {
    background: transparent;
}

html.pie-premium .pp-shell .multiselect__tag-icon:is(:hover, :focus)::after {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .multiselect__option--highlight,
html.pie-premium .pp-shell .multiselect__option--highlight::after {
    background: var(--pp-panel-2);
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .multiselect__option--selected,
html.pie-premium .pp-shell .multiselect__option--selected.multiselect__option--highlight,
html.pie-premium .pp-shell .multiselect__option--selected.multiselect__option--highlight::after {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

/* ==========================================================================
   Planner banner on phones (≤640px): the money line under the photo as three even columns (label
   over value), not a line that wrapped Profit onto its own row; Emails / Preview / Share share
   the full width equally instead of hugging the right edge.
   ========================================================================== */
@media (max-width: 640px) {
    html.pie-premium .pp-shell.pp-planner .pp-fin-line {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        align-items: center;
        width: 100%;
        padding: 8px 10px 8px 4px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line > span {
        display: block;
        min-width: 0;
        padding: 0 8px 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line > span small {
        display: block;
        margin: 0 0 2px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-fin-line > span em {
        margin-left: 4px;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts > * {
        min-width: 0;
    }

    html.pie-premium .pp-shell.pp-planner .pp-bacts .pp-bact {
        width: 100%;
        justify-content: center;
        padding: 0 8px;
    }
}

/* Small phones: the top bar's eight buttons plus 8px gaps came to ~392px, so the avatar was cut off
   at 390px; tighter gaps keep it in */
@media (max-width: 420px) {
    html.pie-premium .pp-shell .header.pp-top {
        gap: 4px;
    }
}