/* New look (html.pie-premium) — full reservation popup.
   Owned by one session at a time; see .claude/skills/pie-new-ui/SKILL.md.
   Every selector starts with: html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) */

/* ==========================================================================
   Full reservation popup ("View More" in BookingPopupIC_new.vue) — the design's big popup
   (planner.js bigHTML, planner.css .bigpop): 1280 × 820 (the design is 1180; the classic forms need ~760px of content width), header with the type icon, eyebrow,
   title and status pills; numbered sections | section content in soft cards | right rail.

   PremiumReservationFullView.vue adds the header parts, the rail (.pp-bp-rail: summary, the
   popup's own status fields and type switch moved in, the library choice) and "Next: <section>".
   The quick popup (.reservation-popup-compact) keeps the rules in pie-premium.css.
   ========================================================================== */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) {
    /* The design's lighter card tone for every soft card in here (sections, flight legs, rail, read-only fields) */
    --pp-panel-2: #faf8f6;
    width: min(1280px, calc(100vw - 32px));
    max-width: none;
    height: min(820px, calc(100vh - 48px));
    margin: 24px auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-content {
    height: 100%;
    max-height: none;
}

/* Header: type icon, "Spa reservation · Day 4 · Tue, Nov 10", the title, then the status pills */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-header {
    flex: none;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-header > .modal-title {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
    font-size: 18px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-ttl {
    min-width: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-ttl > small {
    display: block;
    overflow: hidden;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-ttl > h2 {
    overflow: hidden;
    margin: 2px 0 0;
    color: var(--pp-ink);
    font: 19px/1.25 var(--pp-bold);
    letter-spacing: -.015em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-st {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 7px;
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-sup {
    color: var(--pp-muted);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-sup b {
    color: var(--pp-ink-2);
    font-family: var(--pp-sans);
    font-weight: normal;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-sup.ok b {
    color: var(--pp-ok);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) :is(.pp-bp-pill, .pp-bp-sup)[hidden] {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-help-videos {
    margin-left: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-help-videos .head {
    margin: 0 !important;
}

/* Body: sections 210px | content | rail 300px, each scrolling on its own */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-body {
    flex: 1;
    display: flex;
    min-height: 0 !important;
    overflow: hidden;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-body > div:has(> .booking-popup-tab) {
    flex: 1;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 300px;
    min-width: 0;
    min-height: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row {
    display: contents;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > :is(.col-lg-2, .col-lg-10) {
    grid-row: 1;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    overflow: auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > .col-lg-2 {
    grid-column: 1;
    padding: 14px 10px;
    border-right: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > .col-lg-10 {
    grid-column: 2;
    padding: 18px 22px 30px;
}

/* Section nav: the base look is in pie-premium.css; here it loses its own line and sticky offset */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab .nav-pills {
    position: static;
    top: auto;
    padding: 0;
    border: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab .nav-pills {
    width: 100%;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab .nav-pills .nav-link {
    width: 100%;
    overflow: visible;
    white-space: normal;
    cursor: pointer;
}

/* Section title, then "Purple input fields are required." as the design's muted line under it */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .d-flex:has(> .bookingform-popup-right-title) {
    display: block !important;
    margin-bottom: 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .d-flex:has(> .bookingform-popup-right-title) > :is(.tab-title, .bookingform-popup-title) {
    display: block !important;
    margin: 0 !important;
    color: var(--pp-ink);
    font: 18px var(--pp-bold);
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .d-flex > .bookingform-popup-right-title {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    background: none !important;
    color: var(--pp-muted) !important;
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .d-flex > .bookingform-popup-right-title > i {
    display: none;
}

/* Soft cards (.bg-g): each accordion group is its header + the collapse body that follows it */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .card.accordion-item {
    margin: 12px 0 0 !important;
    border: 0 !important;
    border-radius: 16px;
    background: var(--pp-panel-2);
    box-shadow: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .card.accordion-item > .card-header {
    padding: 14px 16px;
    border: 0;
    background: transparent;
}

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

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .card.accordion-item:has(+ .parent-card-body:is(.show, .collapsing)) {
    border-radius: 16px 16px 0 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .card.accordion-item + .parent-card-body {
    margin-bottom: 0;
    padding: 0 16px 14px;
    border-radius: 0 0 16px 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .card.accordion-item + .parent-card-body > .row:first-child {
    margin-top: 0 !important;
}

/* Fields: one 10px gap across and down (the design's .qrow / .bg-g gap). Each tab mixes
   .form-group margins, Bootstrap gutters and mb-* / mt-* classes. A field row has no margin of its
   own and each field sits 10px under whatever is above it (a heading, the row before, a wrapped
   line), so headings never touch their fields and rows never double the gap. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row:has(> * > :is(.form-floating, .vue__time-picker), > * > .form-group > :is(.form-floating, .vue__time-picker), > .form-group > label + :is(input, .form-control, .v-select), > * > .sticky-input, > .form-group > .sticky-input) {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row > :is(:has(> :is(.form-floating, .vue__time-picker, .sticky-input)), :has(> .form-group > :is(.form-floating, .vue__time-picker, .sticky-input))),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row > .form-group:has(> label + :is(input, .form-control, .v-select)),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row > * > .form-group:has(> :is(.form-floating, .vue__time-picker, .sticky-input)),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row > * > :is(.form-floating, .form-group > .form-floating) {
    margin-bottom: 0 !important;
}

/* Read-only totals (.sticky-input: Price Per Person, Expected commission, Total profit…): a caption
   and a value floated right, or a caption outside the box, collided once the column got narrower.
   Same shape as a floating field: small caption top-left, the value under it, a second value
   (e.g. the commission %) on the right. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .sticky-input.form-control {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: auto;
    min-height: 48px;
    padding: 22px 14px 6px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .sticky-input.form-control > label {
    float: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .sticky-input.form-control > .sticky-label,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .form-group:has(> .sticky-input) > .sticky-input + label {
    position: absolute;
    top: 6px;
    left: 14px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pp-ink-3) !important;
    font: 11.5px/16px var(--pp-bold) !important;
    pointer-events: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .form-group:has(> .sticky-input) {
    position: relative;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .form-group:has(> .sticky-input) > .sticky-input + label {
    left: calc(var(--bs-gutter-x, 10px) * .5 + 14px);
}

/* A heading label right above its field (Note from Advisor in GeneralInfo.vue / AdvisorNoteField.vue):
   it sat flush on the field before it and 3px into its own */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content label:not(.ffl-label):has(+ .form-floating) {
    display: block;
    margin: 14px 0 6px !important;
}

/* Price Type / Measurement Unit / Currency / Rate Type / Exchange rate (PriceSection_new.vue): their
   col-xxl-2 classes follow the window, not the section, and cut the values to "Total Pri…" on a
   wide screen. Each takes the room the section has, and the row wraps when it runs out. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row:has(> .price_exchange_rate) > .form-group {
    flex: 1 1 150px;
    width: auto;
    max-width: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row:has(> .price_exchange_rate) > .price_exchange_rate {
    flex: 1 1 240px;
    margin-top: var(--bs-gutter-y) !important;
}

/* Start / End (Date, Time, Timezone, Day #) in half-width blocks: thirds of a half left the date
   under its calendar icon. The fields share the block evenly and wrap two to a line. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .col-md-6 > .row:has(.vdp-datepicker) > .form-group {
    flex: 1 1 140px;
    width: auto;
    max-width: none;
}

/* ==========================================================================
   Rooms (HotelRoom_new.vue, #planner-tab-8): the design's Rooms group (.bg-g with .bg-row lines).
   The room types table sits in a soft card with each room on a white row; the totals table under
   it is a summary strip; the stacked margins under the title (24 + 14 + 15px) are one 12px gap.
   ========================================================================== */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > .tab-title {
    margin-bottom: 12px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > .rooms-imp-notice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px !important;
    padding: 4px 10px;
    border-radius: 8px;
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > .rooms-imp-notice + div {
    clear: both;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue :is(.room-type-wrapper, .price-per-room-total-section) > .table-responsive {
    margin: 0 !important;
    padding: 4px 8px 8px;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

/* Each room type is its own soft card; without a gap two of them read as one block */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue [id^="room_type_section_"] + [id^="room_type_section_"] {
    margin-top: 12px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types {
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0 6px;
    background: transparent;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types :is(th, td) {
    padding: 8px 10px;
    border: 0 !important;
    background: transparent;
    box-shadow: none;
    vertical-align: middle;
    white-space: nowrap;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types th {
    padding-bottom: 2px;
    color: var(--pp-ink-3);
    font: 12px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types td {
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types td:first-child {
    border-radius: 10px 0 0 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types td:last-child {
    border-radius: 0 10px 10px 0;
}

/* Sized to its date (MM/DD/YYYY): a wider input left a gap after Arr. and Dep. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types td .vdp-datepicker input {
    width: 11ch;
    min-width: 0;
    padding: 0;
    border: 0 !important;
    background: transparent;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

@supports (field-sizing: content) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr.room-types-row td .vdp-datepicker input {
        width: auto;
        field-sizing: content;
    }
}

/* Room type rows: the table fills the card, so its spare width goes to the last (chevron) column
   instead of being shared out by column width. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper table.room-types tr:not(.edit-room-type-section) > :is(th, td):not(:last-child) {
    width: 1px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper table.room-types tr:not(.edit-room-type-section) > :is(th, td):last-child:not(:first-child) {
    text-align: right;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types td :is(.booked_icon, .close-icon) {
    margin-left: 6px;
    color: var(--pp-ink-3) !important;
}

/* Totals: a strip of small captions over bold values, the amount on the right */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .price-per-room-total-section table.room-types td {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .price-per-room-total-section table.room-types :is(th, td):last-child {
    text-align: right;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue a.new-room {
    display: inline-flex;
    margin: 12px 0;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-bold);
}

/* A room type opened (its rooms: Room 1 with Conf. ID and Status, then + Add Room): each room is a
   white rounded card on the same soft background, the links on the design's accent */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .js-room-type-body {
    margin: 8px 0 0 !important;
    padding: 8px;
    border-radius: 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .js-room-type-body .accordion > .card {
    margin: 0 0 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .js-room-type-body .accordion > .card > .card-body {
    padding: 10px 12px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .js-room-type-body .card-body > .position-relative > .row {
    align-items: center;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .js-room-type-body .card-body > .position-relative > .row > .col-lg-2:first-child > span {
    padding: 0 !important;
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue :is(a.add-link, a.new-room) {
    display: inline-flex;
    margin: 4px 0 0;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue a.new-room {
    margin: 12px 0;
}

/* Expanded room type: its rooms (and + Add Room) continue the room type's card instead of
   starting a second card under it. Bootstrap animates the .collapse height, so the spacing sits on
   its children: padding or margin on the .collapse itself makes the open/close jump. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper:has(> .collapse:is(.show, .collapsing)) > .table-responsive {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper > .collapse {
    margin-top: 0 !important;
    padding: 0;
    border-radius: 0 0 16px 16px;
    background: var(--pp-panel-2);
}

/* While it animates Bootstrap sets overflow: hidden, which keeps the rooms' margins inside; once
   open they collapsed through it and the panel snapped 14px shorter. flow-root keeps them inside
   in both states. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper > .collapse.show {
    display: flow-root;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper > .collapse > .js-room-type-body {
    margin: 0 !important;
    padding: 0 8px;
    border-radius: 0;
    background: transparent;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper > .collapse > div:not(.js-room-type-body) {
    padding: 0 14px 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper > .collapse > div:not(.js-room-type-body) > a.add-link {
    margin: 0;
}

/* No + Add Room (hidden by the agency's custom settings): the last room keeps the card's bottom
   padding instead */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .room-type-wrapper > .collapse > .js-room-type-body:last-child {
    padding-bottom: 2px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue .price-per-room-total-section + .row {
    margin-top: 16px !important;
}

/* A room type in edit mode: its ten columns plus the full-width (colspan) description and photos
   rows made the table wider than the tab, so the whole card scrolled sideways. The table becomes a
   form card instead: Delete / Save / Add Price on top, the fields in a wrapping grid, each carrying
   its column's caption (the header row is hidden), then the description editor and the photos.
   The cruise Cabins step (CruiseCabin_new.vue, rows #cruise_edit_room_type_N) has the same ten
   columns, so every rule matches both ids (:is(…)); only the captions differ. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types:has(tr.edit-room-type-section.pp-editing) {
    display: block;
    width: 100% !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types:has(tr.edit-room-type-section.pp-editing) > tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types:has(tr.edit-room-type-section.pp-editing) > tbody > tr:first-child:has(> th) {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr.edit-room-type-section:not([style*="display: none"]) {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr.edit-room-type-section:not([style*="display: none"]) > td {
    display: block;
    width: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    text-align: left !important;
    white-space: normal;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]):not([style*="display: none"]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 12px 12px;
    align-items: end;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) > td:first-child {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 6px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .room-type-action-btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: #fff !important;
    color: var(--pp-ink) !important;
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .room-type-action-btn:hover {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

/* Save is the row's primary action (the design's primary pill, small) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .room-type-action-btn[title^="Save"] {
    border-color: transparent;
    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:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .room-type-action-btn[title^="Save"]:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), color-mix(in srgb, var(--pp-acc) 88%, #000) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) > td:not(:first-child) {
    min-width: 0;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) > td:not(:first-child)::before {
    display: block;
    margin-bottom: 4px;
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(2)::before { content: "Cat."; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(3)::before { content: "Type"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(4)::before { content: "Avail."; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(5)::before { content: "Arr."; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(6)::before { content: "Dep."; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(7)::before { content: "Nights"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(8)::before { content: "Total"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(9)::before { content: "$ type"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(10)::before { content: "Price"; }

/* $ type is plain text: give it the fields' height so the row lines up */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) > td:nth-child(9) {
    line-height: 36px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) > td:nth-child(9)::before {
    line-height: normal;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .vdp-datepicker {
    position: relative;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) :is(.form-control.small-input, .vdp-datepicker input) {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
    box-shadow: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .vdp-datepicker input {
    padding-right: 28px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .vdp-datepicker .vdp-datepicker__clear-button {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .form-control.small-input:is([readonly], :disabled) {
    background: var(--pp-panel-2);
    color: var(--pp-ink-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr:is([id^="edit_room_type_"], [id^="cruise_edit_room_type_"]) .form-control.small-input.hide {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="edit_room_type_"] > td:nth-child(4) .form-control.small-input {
    width: calc(100% - 34px) !important;
    margin-right: 4px;
}

/* Description and photos rows: full width, the caption and Write sparkle on one line */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="room_type_description_div_"] > td :is(.label-ui, label) {
    margin: 0 8px 6px 0;
    color: var(--pp-ink);
    font: 13px var(--pp-bold);
}

/* Cruise cabin types (CruiseCabin_new.vue) share the form card above; their columns are named for cabins */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(2)::before { content: "Cat."; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(3)::before { content: "Name"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(4)::before { content: "Cabins"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(5)::before { content: "Start"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(6)::before { content: "End"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(7)::before { content: "Nights"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(8)::before { content: "Total"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(9)::before { content: "$ type"; }
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr[id^="cruise_edit_room_type_"] > td:nth-child(10)::before { content: "Price"; }

/* Cabin Type Photos (CabinTypePhotos.vue): a saved photo without an s3url renders an empty
   .gallery-col, which showed as a stack of blank grey bars under the drop zone */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue [id^="cabin_type_photo_section_"] .gallery-grid > .gallery-col:not(:has(> *)) {
    display: none;
}

/* "Add New Cabin Type" / room type picker: the design's menu, opening upward because it is the
   last field in the step and the footer clipped a menu that dropped down */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > div > div > .row.g-2 > .form-group > .form-floating > .v-select .vs__dropdown-menu {
    top: auto;
    bottom: calc(100% + 4px);
    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:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > div > div > .row.g-2 > .form-group > .form-floating > .v-select .vs__dropdown-option {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    white-space: normal;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > div > div > .row.g-2 > .form-group > .form-floating > .v-select .vs__dropdown-option--highlight {
    background: var(--pp-hover);
    color: var(--pp-ink);
}

/* Commission fields in Payment & commissions (PaymentDetailsV2.vue .price-per-room-total-commission-section):
   each quarter-width field was followed by an empty full-width column that only broke the line and
   added its own margins (one field per line, ~30-60px apart). The empty columns go; the fields sit
   two to a line with the usual 10px gap. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .price-per-room-total-commission-section > .form-group:not(:has(*)),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .price-per-room-total-commission-section > .row > .form-group:not(:has(*)) {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .price-per-room-total-commission-section > .col-lg-3.form-group,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .price-per-room-total-commission-section > .row > .col-lg-3.form-group {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
}

/* Phones: CKEditor's hidden toolbar tooltips (.ck-tooltip) hang past the editor's right edge and
   made the section scroll sideways */
@media (max-width: 640px) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content {
        overflow-x: clip;
    }
}

/* Below Bootstrap's lg the Advisor Commission box drops under the commission fields: keep the 10px gap */
@media (max-width: 991.98px) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .col-lg-5:has(> .advisor-commission-payment) {
        margin-top: 10px;
    }
}

/* Sub-headings inside a section: one style, the design's group heading (.bg-g > header b: 14.5px bold
   ink), 20px above and 8px to the fields under it. The classic ones were 16-20px light grey, the
   Commission Splits one purple, with 16-86px gaps. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content :is(
    .commissions-payment,
    .paying-supplier > span.d-block,
    .flight-subtitle,
    .booking-payment-details-v2 label.pt-4:not(.sticky-input > label),
    .booking-info-vue div.fs-6:not(:has(*)),
    .booking-info-vue .row > .col-lg-2:not(:has(*)),
    .card-body > h5,
    .tags-multi-select label,
    .price-section-vue > .tab-title
) {
    display: block;
    margin: 20px 0 8px !important;
    padding: 0 !important;
    color: var(--pp-ink) !important;
    font: 14.5px/1.3 var(--pp-bold) !important;
    letter-spacing: 0;
}

/* "Confirmation ID" is a grid column: it keeps the column's inner padding (lining up with the fields)
   and the full width, so it never wraps */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .fs-6 > .row.g-2:has(> .col-lg-2) {
    --bs-gutter-x: 10px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .fs-6 > .row.g-2 > .col-lg-2.col-lg-2:not(:has(*)) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-inline: calc(var(--bs-gutter-x, 10px) * .5) !important;
}

/* Client approved (BookingInfo.vue): its fields were thirds of the width with the last third empty;
   two fields share each line across the whole section */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row > .col-lg-4 {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row > .col-lg-4:has(> .custom-checkbox) {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
}

/* The heading's own wrapper and row added 16 + 8px around it */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .fs-6:has(> .row > .col-lg-2),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .fs-6 > .row.g-2:has(> .col-lg-2) {
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .fs-6 > .row.g-2 > .col-lg-2.col-lg-2:not(:has(*)) {
    padding-inline: 0 !important;
}

/* "Includes" (ps-2) lines up with the other headings */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row.mt-2 label.ps-2 {
    padding-left: 0 !important;
}

/* Additional information starts 16px under Confirmed By / Contact(s) at Supplier */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .selection-reset ~ .row.mt-2 {
    margin-top: 16px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row.g-2.mb-3 {
    margin-bottom: 0 !important;
}

/* Includes sits in two nested rows: they line up with the section edge, not 12px in */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row.mt-2 > .col-md-12 > .row {
    margin-inline: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row.mt-2 > .col-md-12 > .row > .col-md-12 {
    padding-inline: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row.mt-2 {
    margin-top: 12px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .row.mt-2 :is(.form-group, .col-md-12) {
    margin-bottom: 0 !important;
}

/* Display in all client itineraries / Sync with client itinerary travelers: one line, an even gap */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .pie_radio_btn {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 16px 0 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .pie_radio_btn > .custome-radiobtn {
    margin: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .pie_radio_btn + hr {
    margin: 16px 0 !important;
    border-color: var(--pp-line);
    opacity: 1;
}

/* Show / Hide more information: the eye icon, a gap, the label */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-info-vue .selection-reset {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    color: var(--pp-acc) !important;
    font: 13px var(--pp-bold) !important;
}

/* Deadlines & terms: Company and Client are the design's soft cards, the heading at the top */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #planner-tab-5 .card {
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--pp-panel-2);
    box-shadow: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #planner-tab-5 .card > .card-body {
    padding: 14px 16px 16px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content #planner-tab-5 .card-body > h5:first-child,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .card-body > h5:first-child {
    margin-top: 0 !important;
}

/* "Payment" opens its section: no gap above it; "Who is paying the supplier?" is its muted helper line */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .booking-payment-details-v2 .row > .col-lg-6.form-group.paying-supplier > span.mb-0.d-block {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .paying-supplier > label.ffl-label {
    position: static;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pp-muted) !important;
    font: 12.5px var(--pp-sans) !important;
    transform: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row:has(> .paying-supplier),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .paying-supplier {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row:has(> .paying-supplier) + .row {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .row:has(> .paying-supplier) + .row > [class*="col-"],
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content div:has(> .row > .paying-supplier) + .row > [class*="col-"] {
    margin: 10px 0 0 !important;
}

/* "or" between Commission (%) and Commission (Amount) (PriceSection_new.vue): it hangs 15px past its
   field, which the classic 24px gutter had room for; the field keeps that room itself */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .form-group:has(> .position-absolute.end-0.top-0) {
    padding-right: 30px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .form-group > .position-absolute.end-0.top-0 {
    margin-right: 0 !important;
    padding-right: 8px !important;
}

/* Flights: the leg card (.destination_box, a grid in pie-premium.css) sized its one column to its
   widest content (the airline lookup), pushing every leg past the section's right edge */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box {
    grid-template-columns: minmax(0, 1fr);
}

/* The flight lookup card (FlightInfo_new.vue .typeahead-result) opens under the Flight ID field,
   at least 360px wide so both airports fit (it spills over the Airline field beside it) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .suggestions_parent > .typeahead-result:not(.no_suggestion) {
    min-width: 360px !important;
}

/* …drawn as the design's flight card (planner.css .qfl): airline and flight number, departure code,
   city and time | a line with the plane | arrival on the right, then the source line */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .suggestions_parent > .typeahead-result:not(.no_suggestion) {
    max-height: 340px;
    margin-top: 6px;
    padding: 0;
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line), 0 18px 40px -18px rgba(17, 17, 26, .35);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_main_wrapper {
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--pp-line);
    background: var(--pp-panel);
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_main_wrapper:last-child {
    border-bottom: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_main_wrapper:hover {
    background: var(--pp-hover);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_search_wrraper {
    display: grid;
    gap: 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_name {
    margin: 0;
    color: var(--pp-ink);
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(48px, 96px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result :is(.flight_arrive, .flight_departure) {
    display: grid;
    gap: 4px;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_departure {
    justify-items: end;
    text-align: right;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .destination_name {
    display: grid;
    gap: 2px;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .airport_code {
    color: var(--pp-ink);
    font: 22px/1.1 var(--pp-bold);
    letter-spacing: -.02em;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .airport_name {
    overflow: hidden;
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_time_wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_icon {
    display: inline-flex;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--pp-acc);
    font-size: 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_icon > i {
    width: auto;
    height: auto;
    margin: 0;
    float: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--pp-acc);
    line-height: 1;
    font-size: 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_departure .flight_time_wrapper {
    justify-content: flex-end;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result :is(.airport_code, .airport_name, .flight_time, .flight_icon) {
    flex: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_time {
    margin: 0;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-bold);
}

/* The plane between the two airports, on the design's accent line */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight-icons {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight-icons::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--pp-line-2), var(--pp-acc), var(--pp-line-2));
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight-icons > i {
    position: relative;
    width: auto !important;
    float: none;
    padding: 0 4px;
    background: var(--pp-panel);
    color: var(--pp-acc);
    font-size: 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_main_wrapper:hover .flight-icons > i {
    background: var(--pp-hover);
}

/* "Showing local airport times" · "Powered by FlightStats" */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_search_wrraper > div:last-child {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .typeahead-result .flight_search_wrraper > div:last-child > small {
    float: none !important;
    color: var(--pp-muted);
    font: 12px var(--pp-sans);
}

/* "Fetching Flights…" / "No Results Found" under the field */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .suggestions_parent > .typeahead-result.no_suggestion {
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 0 0 1px var(--pp-line), 0 18px 40px -18px rgba(17, 17, 26, .35);
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
}

/* Rail (.bg-rail): summary, the popup's status fields, its type switch, the library choice */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail {
    grid-template-columns: minmax(0, 1fr);
    grid-column: 3;
    grid-row: 1;
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 0;
    padding: 14px;
    overflow: auto;
    border-left: 1px solid var(--pp-line);
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) :is(.pp-bp-card, .pp-bp-rail > .booking-popup-header) {
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0;
    border-radius: 14px;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-card[hidden] {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-card > small {
    color: var(--pp-muted);
    font: 11px var(--pp-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-sum > b {
    color: var(--pp-ink);
    font: 14px/1.3 var(--pp-bold);
    overflow-wrap: anywhere;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-sum > span {
    color: var(--pp-ink-3);
    font: 12.5px/1.45 var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-sum > span[hidden] {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--pp-ink-3);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-kv b {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-weight: normal;
    text-align: right;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-kv b[data-tone="due"] {
    color: #b3261e;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-kv b[data-tone="ok"] {
    color: var(--pp-ok);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-kv b[data-tone="mu"] {
    color: var(--pp-muted);
    font-family: var(--pp-sans);
}

/* The popup's own blocks in the rail: one field per line */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 8px;
    margin: 0;
    row-gap: 8px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .row > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .row > :not(:has(*)) {
    display: none;
}

/* Status selects: the same line as the Trip field, a shade darker on hover.
   A required field the popup marks red (.redborder) keeps its border. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .v-select:not(.redborder):not(.vs--open) > .vs__dropdown-toggle {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .v-select:not(.redborder):not(.vs--open):hover > .vs__dropdown-toggle {
    border-color: var(--pp-muted) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .d-flex.justify-content-end {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 8px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .d-flex.justify-content-end > :not(:has(*)) {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .btn-pink {
    float: none !important;
    margin: 0 !important;
}

/* A long type name (e.g. "Coach Charter - LDC (Long Distance Coach)") wraps inside the rail instead
   of stretching it past the popup's edge */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header :is(.row, .row > *, .dropdown, .form-floating) {
    min-width: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .booking-sub-category-dropdown > .btn.dropdown-toggle {
    max-width: 100%;
    height: auto;
    min-height: 38px;
    padding-block: 6px;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .booking-sub-category-dropdown > .btn.dropdown-toggle > i {
    flex: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .booking-sub-category-dropdown > .dropdown-menu {
    max-width: 100%;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail > .booking-popup-header .booking-sub-category-dropdown > .dropdown-menu .dropdown-item {
    white-space: normal;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail .reservation-customisation-button {
    width: 100%;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail .bookingform-popup-right-title {
    margin: 6px 0 0;
}

/* Library choice: the design's radios; they drive the footer's own (hidden here) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--pp-ink-2);
    font: 13.5px var(--pp-sans);
    text-align: left;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-radio .rd {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--pp-line-2);
    border-radius: 50%;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-radio.on .rd {
    border: 5px solid var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-radio:focus-visible {
    outline: 2px solid var(--pp-acc-line);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Footer: Reset on the left, then Next: <section>, Close, Save */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact):has(.pp-bp-lib:not([hidden])) .modal-footer .pie_radio_btn > .custome-radiobtn {
    display: none !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-footer {
    flex: none;
}

/* Hidden on the last section, and always in the quick popup (the shared footer .btn rule in
   pie-premium.css is .modal:is(#bookingPopupModal, .modal) … .btn, so this repeats the id) */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .booking-popup .modal-footer .popup-footer .btn.pp-bp-next[hidden],
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .modal-footer .popup-footer .btn.pp-bp-next {
    display: none !important;
}

/* The quick popup never shows the full view's header parts */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .modal-header > :is(.pp-bp-ic, .pp-bp-ttl, .pp-bp-st) {
    display: none !important;
}

/* Places group (GeneralInfo.vue): the design's "Title & place" card (.bg-g .qf) — the category
   name as a muted line, white 14px fields with a hairline border, Note from Advisor as a group heading */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #place-info-general > .flight-tags {
    margin-top: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #place-info-general > .flight-tags > .form-group {
    color: var(--pp-muted);
    font: 12.5px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #place-info-general > .flight-tags > .form-group > .form-floating {
    margin-top: 6px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) :is(#booking_title, #place-info-general .form-floating > .form-control) {
    border-color: var(--pp-line-2) !important;
    border-radius: 14px !important;
    background: #fff !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) :is(#booking_title, #place-info-general .form-floating > .form-control):focus {
    border-color: color-mix(in srgb, var(--pp-acc) 55%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-acc) 16%, transparent) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #place-info-general .form-group > div > label:has(+ .form-floating > [id^="advisor_note"]) {
    display: block;
    margin: 4px 0 8px;
    color: var(--pp-ink);
    font: 14.5px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #place-info-general .form-group > div:has(> .form-floating > [id^="advisor_note"]) > small {
    color: var(--pp-muted) !important;
    font: 12px var(--pp-sans);
}

/* Picked place (PlaceBox.vue): the same white card as PlaceBoxNew's (.new-place-box in
   pie-premium.css) — photo left, details stacked, radio + bin top-right, no row lines */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel_location_detail {
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px !important;
    background: #fff;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel-image {
    flex: none;
    align-self: stretch;
    width: 112px !important;
    min-height: 96px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel-image > img {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel-image .library-img-count {
    border-radius: 8px;
    color: var(--pp-ink-2);
    font: 12px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel-info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel-info > .row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    height: 100%;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel-info > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel_block {
    display: grid;
    gap: 1px;
    padding-right: 64px;
}

/* Phone / website rows sit beside the corner supplier button, so they stop short of it */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel_block > li:nth-child(n+4) {
    margin-right: 64px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel-info :is(.hotel_block, .remove_hotel) > li {
    min-width: 0;
    overflow: hidden;
    border: 0 !important;
    color: var(--pp-ink-3);
    font: 12.5px/18px var(--pp-sans);
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel_block > li.hotel-name {
    margin-bottom: 1px;
    color: var(--pp-ink);
    font: 14px/20px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .hotel_block a {
    border: 0 !important;
    color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .suppliers {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: auto !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .suppliers .btnaddtosuppliers {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    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 .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.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 .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .suppliers p {
    justify-content: flex-start;
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .custome-radiobtn {
    top: 14px !important;
    right: 48px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .remove_hotel {
    top: 8px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.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 .booking-popup:not(.reservation-popup-compact) .popup-hotel-content:not(.new-place-box) .remove_hotel > li:first-child:hover {
    background: var(--pp-panel-2);
    color: var(--pp-acc);
}

/* ≤1100: the rail goes under the content, and the body scrolls as one */
@media (max-width: 1100px) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-body {
        display: block;
        overflow: auto;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-body > div:has(> .booking-popup-tab) {
        grid-template-columns: 180px minmax(0, 1fr);
        align-items: start;
        min-height: 100%;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > :is(.col-lg-2, .col-lg-10),
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail {
        min-height: auto;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > :is(.col-lg-2, .col-lg-10) {
        grid-row: 1 / span 2;
        overflow: visible;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > .col-lg-10 {
        grid-row: 1;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > .col-lg-2 {
        align-self: stretch;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab .nav-pills {
        position: sticky;
        top: 0;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail {
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        overflow: visible;
        border-top: 1px solid var(--pp-line);
        border-left: 0;
    }
}

/* ≤640: one column, the sections become a row that scrolls sideways */
@media (max-width: 640px) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) {
        height: calc(100vh - 32px);
        margin: 16px auto;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-header {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-ttl {
        flex: 1;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-st {
        order: 5;
        width: 100%;
        margin-left: 0;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-help-videos {
        display: none;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .modal-body > div:has(> .booking-popup-tab) {
        grid-template-columns: minmax(0, 1fr);
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > .col-lg-2 {
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
        padding: 8px 12px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--pp-line);
        background: var(--pp-panel);
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab .nav-pills .nav-link {
        flex: none;
        width: auto;
        white-space: nowrap;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .booking-popup-tab > .row > .col-lg-10 {
        grid-column: 1;
        grid-row: 2;
        padding: 16px;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .pp-bp-rail {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Flight: room between the title's notice ("…use the flight title…") and the first leg card */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .form-group:has(> .form-floating > #booking_title) > .rooms-imp-notice {
    margin-bottom: 14px;
}

/* Flight legs (FlightInfo_new.vue): "Remove" as a quiet pill on the right, "Flight info" as the
   white card pie-premium gives it (the section-card rule above must not flatten it), its open body
   as a white card under it, "+ Add Flight" as the accent pill */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight_box .flight_close {
    justify-content: flex-end;
    margin: 0 0 8px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight_box .flight_close > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--pp-ink-3) !important;
    font: 12.5px var(--pp-bold);
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight_box .flight_close > span:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight_box .flight_close > span > i {
    color: inherit !important;
    font-size: 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight-booking-details .card.accordion-item {
    margin: 0 !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px !important;
    background: #fff;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight-booking-details .card.accordion-item > .card-header {
    padding: 12px 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight-booking-details .card.accordion-item > .card-header .accordion-button {
    color: var(--pp-ink);
    font: 14px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight_box > .card-body[id^="flight-info_"] {
    margin-top: 8px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .flight_box > .card-body[id^="flight-info_"] > .bg-white {
    border: 1px solid var(--pp-line);
    border-radius: 12px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .add-flight {
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .add-flight .flt-booking-btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-acc);
    font: 13px var(--pp-bold);
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .destination_box .add-flight .flt-booking-btn:hover {
    background: color-mix(in srgb, var(--pp-acc) 14%, #fff);
}

/* Found flight summary (FlightInfo_new.vue "Flight info:" row): logo, code chip and actions on
   one line, route + date under them. Classic is a nowrap block with floated icons, which wrapped */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .accordion-button:has(> .details-wrapper) {
    align-items: center;
    gap: 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .accordion-button > b {
    flex: none;
    color: var(--pp-ink-3);
    font: 12.5px var(--pp-sans);
    white-space: nowrap;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    list-style: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li {
    float: none !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li:has(> img) {
    display: flex;
    align-items: center;
    width: auto !important; /* inline width: 50px */
    height: 28px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li > img {
    width: auto;
    max-width: 64px;
    max-height: 24px;
    object-fit: contain;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li.flight-id {
    margin-right: auto;
    padding: 4px 8px !important;
    border-radius: 6px;
    background: var(--pp-panel-2);
    color: var(--pp-ink);
    font: 12px var(--pp-bold);
    letter-spacing: .03em;
}

/* Route + times + date: own line under the logo row */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li:not(.remove-btn):not(.flight-id):not(:has(> img)) {
    order: 10;
    flex: 1 1 100%;
    min-width: 0;
    color: var(--pp-ink-2);
    font: 13.5px/1.45 var(--pp-sans);
}

/* Actions: refresh, edit, delete (classic floats reverse the DOM order) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li.remove-btn {
    order: 7;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li.remove-btn:has(> .pie-icon-thin-0002_write_pencil_new_edit) {
    order: 6;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li.remove-btn:has(> :is(.pie-icon-thin-0142_rotate_sync, .fa-spinner)) {
    order: 5;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li.remove-btn > i {
    display: grid !important;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--pp-line);
    border-radius: 8px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink-3) !important;
    font-size: 14px;
    line-height: 1;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li.remove-btn > i:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .flight-booking-details .details-wrapper > li.remove-btn > .pie-icon-thin-0056_bin_trash_recycle_delete_garbage_empty:hover {
    background: #fef3f2 !important;
    color: #b42318 !important;
}

/* Rooms − / + stepper on every room row (pie-premium.css only recolours the quick-add one) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-room-stepper .ic-step-btn {
    background: var(--pp-panel);
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-room-stepper .ic-step-btn:not(:disabled) {
    border-color: var(--pp-acc-line) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-room-stepper .ic-step-btn:disabled {
    border-color: color-mix(in srgb, var(--pp-acc) 20%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--pp-acc) 35%, transparent);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-room-stepper .ic-step-btn:not(:disabled):hover {
    background: var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-room-stepper .ic-step-label {
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-room-stepper .ic-step-label b {
    color: var(--pp-ink);
}

/* ==========================================================================
   Price calculators' fee blocks (Cushion, Processing Fee… in RoomTypePricePopUp.vue and its
   .markup-amount siblings), after PremiumFeeToggle.vue made each %/amount pair one input with a
   %/$ switch. The bordered table, the 24px indent and the inner "%"/"Amount" caption go.
   A block 300px or wider is one field like "Other fee": name and info on the left, the value on
   the right, the switch inside the field's end, the green dot inside its start. A narrower block
   (the reservation popup's Proposal price columns are ~150-170px) has no room for all of that in
   one line, so name, info and switch sit on a line above a full-width input.
   ========================================================================== */
html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) {
    container: pp-fee / inline-size;
    padding-left: 4px !important;
}

html.pie-premium .modal.show .markup-amount > table:has(> tbody[data-pp-fees]) {
    margin: 0 !important;
    border: 0 !important;
    background: transparent;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] {
    grid-template-columns: minmax(0, 1fr);
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not(.pp-fee-off) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee] > * {
    pointer-events: auto;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee] > span:not(.pp-ms) {
    display: inline-flex;
    color: var(--pp-ink-3);
    font-size: 13px;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee] > .pp-ms {
    margin-left: auto;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not([data-pp-fee]) > .fl-label {
    display: none;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not([data-pp-fee]) > input.form-control {
    height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 10px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 14px var(--pp-sans);
    box-shadow: none;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not([data-pp-fee]) > input.form-control:focus {
    border-color: var(--pp-acc-line) !important;
}

html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) > .base_fare_currency {
    margin-top: 2px;
}

/* Narrow: name and info on a line (after the green dot, when the block has one), the input under
   it with the switch inside its end */
html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) > .green-dot {
    top: 14px;
    left: 4px !important;
    z-index: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] {
    position: relative;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
    justify-content: flex-start;
    gap: 6px;
    position: static !important;
    min-height: 28px;
    padding: 0 0 6px !important;
    color: var(--pp-ink) !important;
    font: 14px/1.25 var(--pp-sans);
}

html.pie-premium .modal.show .markup-amount:has(> .green-dot) > table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
    padding-left: 24px !important;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee] > .pp-ms {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 1;
}

html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not([data-pp-fee]) > input.form-control {
    padding-right: 76px !important;
}

/* Wide: the name and switch lie over the input's start and end */
@container pp-fee (min-width: 300px) {
    html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) > .green-dot {
        top: 25px;
        left: 18px !important;
    }

    html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not(.pp-fee-off) {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee],
    html.pie-premium .modal.show .markup-amount:has(> .green-dot) > table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
        position: relative !important;
        z-index: 1;
        min-height: 0;
        height: 50px;
        padding: 0 8px 0 34px !important;
        font: 15px var(--pp-sans);
        pointer-events: none;
    }

    html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee] > .pp-ms {
        position: static;
    }

    html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not([data-pp-fee]) > input.form-control {
        height: 50px !important;
        padding: 0 84px 0 45% !important;
    }
}

/* "Delete" and the converted amount under a fee share one line; a long amount wraps instead of
   running under "Delete" (both used to be positioned over each other) */
html.pie-premium .modal.show .itinerary-price-box .position-relative:has(> .markup-delete) {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

html.pie-premium .modal.show .itinerary-price-box .position-relative > .markup-delete {
    position: static !important;
    flex: none;
}

html.pie-premium .modal.show .itinerary-price-box .position-relative:has(> .markup-delete) > .base_fare_currency {
    min-width: 0;
    padding-right: 0 !important;
    overflow-wrap: anywhere;
}

/* Place photos (Photos.vue .grid-photo-name tiles): the reservation files rule in pie-premium.css
   made each photo's bin a 26px box in the flow, always showing and crowding the move icon. The bin
   sits on the photo's top-right corner instead (number top-left, move icon bottom-right) and shows
   on hover, as in the classic look; touch screens always show it. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid.grid-photo-name > .gallery-col {
    position: relative;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid.grid-photo-name > .gallery-col > .pdf_document_bottom_share {
    position: static;
    display: block;
    flex: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid.grid-photo-name > .gallery-col > .pdf_document_bottom_share > .delete_uploaded_image {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: auto;
    left: auto;
    z-index: 4;
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    color: var(--pp-ink-2);
    font-size: 12px;
    line-height: 1;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid.grid-photo-name > .gallery-col:is(:hover, :focus-within) > .pdf_document_bottom_share > .delete_uploaded_image {
    display: inline-grid;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid.grid-photo-name > .gallery-col > .pdf_document_bottom_share > .delete_uploaded_image:hover {
    background: #fff;
    color: var(--pp-acc);
}

@media (hover: none) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid.grid-photo-name > .gallery-col > .pdf_document_bottom_share > .delete_uploaded_image {
        display: inline-grid;
    }
}

/* Uploaded photos (tour / activity API photos land here too), the Pixabay / Cloud Storage,
   supplier and library photos (the other Photos.vue grids, no .grid-photo-name) and the cruise
   day / cabin type / room type photos (CruiseDayPhotos.vue, CabinTypePhotos.vue, RoomTypePhotos.vue):
   the reservation files rule in pie-premium.css made them a list of full-width rows with the bin
   far from the photo. They are the same 78x60 tiles as the place photos above: number top-left,
   move icon bottom-right, bin top-right on hover */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

/* CruiseDayPhotos.vue loops over every day's saved photos and leaves an empty .gallery-col for
   each one of another day; they showed as blank grey bars under the drop zone */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col:empty {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col {
    position: relative;
    flex: none;
    width: 78px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    overflow: hidden;
    background: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > img {
    display: block;
    flex: none;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 10px;
    object-fit: cover;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share {
    position: static;
    display: block;
    flex: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share > .image-name {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share > .delete_uploaded_image {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 4;
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    color: var(--pp-ink-2);
    font-size: 12px;
    line-height: 1;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col:is(:hover, :focus-within) > .pdf_document_bottom_share > .delete_uploaded_image {
    display: inline-grid;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share > .delete_uploaded_image:hover {
    background: #fff;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid.attachment-sortable-enabled:not(.grid-photo-name) > .gallery-col::after {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 3;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    color: var(--pp-ink-3);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

@media (hover: none) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share > .delete_uploaded_image {
        display: inline-grid;
    }
}

/* Hotel / Restaurant details (HotelInfo_new.vue) in the full view: Search and the reservation
   title were quarter-width columns (~170px) and cut the title off; they take the whole width,
   like the title in the other categories */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-info-vue > .row > .col-lg-3.form-group {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* Place photos under the place card (HotelInfo_new.vue / GeneralInfo.vue .photos-section-select):
   each photo was a full-width row with its bin on the far right. They wrap as 78x60 tiles with
   the bin on the top-right corner on hover (as the Documents & photos tiles), and "All" is a
   small pill after them */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .photos-section-select {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .photos-section-select > .gallery-grid {
    display: flex !important;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
    margin: 0 !important;
}

/* One row showing six tiles (6 x 78px + 5 x 8px gaps); the rest scroll sideways instead of
   adding rows under the place card (as the Photos tab, pie-premium.css) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .photos-section-select > .gallery-grid {
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 508px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px !important;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid > .gallery-grid-photo {
    position: relative;
    display: block !important;
    flex: none;
    width: 78px;
    height: 60px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    overflow: hidden;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid > .gallery-grid-photo > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px !important;
    object-fit: cover;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid > .gallery-grid-photo > .pdf_document_bottom_share {
    position: static;
    display: block;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid > .gallery-grid-photo > .pdf_document_bottom_share > .delete_uploaded_image {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: auto;
    left: auto;
    z-index: 4;
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    color: var(--pp-ink-2);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid > .gallery-grid-photo:is(:hover, :focus-within) > .pdf_document_bottom_share > .delete_uploaded_image {
    display: inline-grid;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid > .gallery-grid-photo > .pdf_document_bottom_share > .delete_uploaded_image:hover {
    background: #fff;
    color: var(--pp-acc);
}

@media (hover: none) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .gallery-grid > .gallery-grid-photo > .pdf_document_bottom_share > .delete_uploaded_image {
        display: inline-grid;
    }
}

/* "All" (HotelInfo_new.vue) and "Remove all photos" (GeneralInfo.vue): inline grey / blue text
   and borders, now the popup's soft pill */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.photos-section-select > span.pt-2, .remove-photos-btn) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: none !important;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pp-hover);
    color: var(--pp-ink-2) !important;
    font: 12.5px var(--pp-bold) !important;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.photos-section-select > span.pt-2, .remove-photos-btn):hover {
    background: var(--pp-acc-soft);
    color: var(--pp-acc) !important;
}

/* Documents & photos in the full view (Documents.vue / Photos.vue): the classic solid boxes with
   18px light grey text; the same soft dashed drop zones as the compact view (pie-premium.css
   .pp-qp-uploads) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .documents_upload {
    height: auto;
    min-height: 0;
    padding: 14px 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 .booking-popup:not(.reservation-popup-compact) .tab-content .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 .booking-popup:not(.reservation-popup-compact) .tab-content .documents_upload .upload_icon {
    height: auto;
    min-height: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .documents_upload .add-photo-wrapper i {
    margin-bottom: 4px;
    color: var(--pp-acc);
    font-size: 18px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .documents_upload .add-photo-wrapper span {
    color: var(--pp-ink-3);
    font: 12.5px/1.35 var(--pp-sans) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .documents_upload :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);
}

/* Leftover classic colours in the popup: PIE Magenta (#A20090) on the Booking / flight heading
   arrows, the Start / End Date headings and their Hide times box (TransportInfo_new.vue), Browse
   Cruiseline and the inline edit pencil; pink (#FF005E) on "Visible to Client!" and the required
   notes; blue on Remove and the time zone. All follow the Bordeaux accent / ink. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.flight-header h5 > i, .browse-cruiselines-link, .booking-inline-edit-icon, .flight_close) {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .browse-cruiselines-link {
    font: 13px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.upload-text-visible, .rooms-imp-notice, .rooms-imp-notice i) {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    color: var(--pp-ink);
    font: 14.5px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--pp-ink);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle .fa-calendar {
    margin: 0;
    color: var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle > .pull-right {
    float: none;
    color: var(--pp-acc);
    font: 12.5px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle > .custom-checkbox {
    color: var(--pp-ink-2);
    font: 13px var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle > .custom-checkbox > label {
    color: var(--pp-ink-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle > .custom-checkbox .checkmark {
    border-color: var(--pp-line-2);
    border-radius: 5px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .subtitle > .custom-checkbox input:checked ~ .checkmark {
    border-color: var(--pp-acc);
    background-color: var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vs__selected {
    color: var(--pp-ink);
}

/* Cruise passengers (TransportationTravelers.vue): Cabin # / Cabin Name / Confirmation fields were
   tall pills under bold black captions; the popup's 40px fields with small grey captions, and the
   Loyalty Program caption lines up with the others */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .row.g-2 > .form-group > label.form-label {
    margin-bottom: 4px;
    padding-left: 0 !important;
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-sans);
    -webkit-text-stroke: .2px currentColor;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .row.g-2 > .form-group > label.form-label + input.form-control {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13.5px var(--pp-sans);
    box-shadow: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .row.g-2 > .form-group > label.form-label + input.form-control:focus {
    border-color: var(--pp-acc);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

/* template1.css paints these PIE Magenta with !important inside .booking-popup-new-ic (the Start /
   End Date headings, the price box's Reset / links, the travellers' headings) and dashboard.css
   paints the Booking heading blue; the popup id outranks both */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .transport_box .subtitle > span:first-child {
    color: var(--pp-ink) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .transport_box .subtitle > :is(.pull-right:not(.custom-checkbox), .pull-right:not(.custom-checkbox) b),
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.itinerary-price-box .color-blue span, .room_book_form .color-blue, .vertical-divider button.color-blue) {
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .transport_box .subtitle > .custom-checkbox,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .transport_box .subtitle > .custom-checkbox :is(input, .checkmark) {
    color: var(--pp-ink-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.add-travelers-modal h5.color-blue, .parent-card-body h5.color-blue, .destination_box .flight-header h5) {
    color: var(--pp-ink) !important;
}

/* Flight Proposal: the notice under Reservation Title ("This Reservation title does not display in
   the daily itinerary…", FlightBookingForm) was the classic pink strip with no radius; the design's
   soft accent notice instead, as wide as the field, the caution icon in the accent and the text in ink */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .form-group:has(> .form-floating > #booking_title) > .rooms-imp-notice {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 8px !important;
    padding: 10px 12px;
    border: 1px solid var(--pp-acc-line);
    border-radius: 10px;
    background: var(--pp-acc-soft);
    color: var(--pp-ink-2) !important;
    font: 12.5px/1.45 var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .form-group:has(> .form-floating > #booking_title) > .rooms-imp-notice > i {
    flex: none;
    margin: 2px 0 0 !important;
    color: var(--pp-acc) !important;
    font-size: 14px;
}

/* The other notices ("Required for commission tracking", "Add prices for each room category.")
   lose the classic pink for the accent tint */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .rooms-imp-notice {
    border-radius: 8px;
    background: var(--pp-acc-soft);
}

/* Rooms › Room › Record Payment Transaction Details (PaymentDetailsV2.vue): Payment Status and Paid By
   sat in col-md-2 (102px), clipping their captions and values ("Gu…", "Pai…"); half the row each, so
   the long choices ("Paid by Company (Your Company) to Supplier") fit too */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) [id^="collapse-booking-form-price-payment-details-"] .accordion-body > .row > .col-md-2.form-group:has(> .form-floating > .v-select) {
    flex: 0 0 auto;
    width: max(50%, 200px);
    max-width: 100%;
    margin-bottom: 10px;
}

/* Cruise Cabins step (CruiseCabin_new.vue): a stray <hr> and a 20px "Cabins" line with a bed icon
   above the content; the section title every other step uses, at the top */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section > hr {
    display: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section > .bold.fs-5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px !important;
    color: var(--pp-ink);
    font: 18px var(--pp-bold) !important;
    letter-spacing: -.01em;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section > .bold.fs-5 > i {
    color: var(--pp-ink-3);
    font-size: 16px !important;
}

/* Cruise / transport Proposal › Date and time (TransportInfo_new.vue): "Start Date" / "End Date" are
   group sub-headings over their field rows — 18px above (the mt-4 24px left End Date floating between
   two rows), 8px to the fields, the calendar icon muted, Hide times on the same line, centred */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .transport_box .subtitle {
    min-height: 22px;
    margin: 18px 0 8px !important;
    padding: 0 2px;
    font: 13.5px var(--pp-bold);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .transport_box .subtitle .fa-calendar {
    color: var(--pp-ink-3);
    font-size: 13px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .transport_box .subtitle > .custom-checkbox {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin: 0;
}

/* Cruise Cabins, a saved cabin type (its listing row): CruiseCabin_new.vue fixes the eleven column
   widths in % (table-layout: fixed), so Delete / Edit spilled over Category and the headings ran
   into each other in the popup's ~700px. Columns size to their content instead (the table scrolls
   sideways inside its card when it must), the name wraps, and Delete / Edit are small secondary pills. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section .room-type-wrapper table.room-types:not(:has(tr.edit-room-type-section.pp-editing)) {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section .room-type-wrapper table.room-types tr:not(.edit-room-type-section) > :is(th, td) {
    padding-right: 8px;
    padding-left: 8px;
    white-space: nowrap;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section .room-type-wrapper table.room-types tr:not(.edit-room-type-section) > td.table-title {
    min-width: 120px;
    max-width: 220px;
    white-space: normal;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section tr[id^="cruise_display_room_type_"] .room-type-action-btn {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin: 0 4px 0 0 !important;
    padding: 0 10px;
    border: 1px solid var(--pp-line-2);
    border-radius: 999px;
    background: #fff !important;
    color: var(--pp-ink) !important;
    font: 12px var(--pp-bold);
    letter-spacing: 0;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) #cruise_room_type_section tr[id^="cruise_display_room_type_"] .room-type-action-btn:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}

/* Room type row (hotel and cruise) while its table is still a table (the form-card rules above
   need :has()): the Cat. / Category select keeps room for its name ("Single", "Interior") instead
   of clipping to "Si", and Delete / Save / Edit Price stay on one line */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr.edit-room-type-section select.form-control.small-input {
    min-width: 104px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue table.room-types tr.edit-room-type-section > td:first-child {
    white-space: nowrap;
}

/* Time pickers need room for hours, minutes and AM/PM in narrow reservation columns. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vue__time-picker .dropdown {
    top: calc(100% + 4px);
    width: 210px;
    height: 200px;
    max-width: calc(100vw - 48px);
    z-index: 20;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow-2);
    font: 14px/1.4 var(--pp-sans);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vue__time-picker .dropdown.drop-up {
    top: auto;
    bottom: calc(100% + 4px);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vue__time-picker .dropdown .select-list {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vue__time-picker .dropdown .select-list > ul {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .vue__time-picker .dropdown .select-list > ul > li {
    display: block;
    width: auto;
    margin: 0;
    padding: 8px 4px;
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
}

/* The cabin picker can sit at the top of the step: open below, not above the scroll area. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .cruise-cabin-type-select .vs__dropdown-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 0;
    width: 100%;
    min-width: 0;
    max-height: min(280px, 40vh);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .cruise-cabin-type-select .vs__dropdown-menu .vs__dropdown-option {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Quick reservation popup — audit fixes
   ========================================================================== */
/* Type pills: still one row that scrolls sideways (pie-premium.css), but with a thin visible
   scrollbar instead of none, so the types past the right edge (Transportation has 15) can be
   found and reached with a mouse. PremiumHotelPopupExtras.vue scrolls the chosen type into view. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line-2) transparent;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu::-webkit-scrollbar {
    display: block;
    height: 6px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .booking-sub-category-dropdown > .dropdown-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--pp-line-2);
}

/* Reservation Status list: its options were 5px wider than the list, which drew a sideways
   scrollbar (with arrows) under them */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .quick-booking-status .vs__dropdown-menu {
    overflow-x: hidden;
}

/* Hotel "Create / Edit room type" forms: Cancel and Save room type kept the classic 16px,
   letter-spaced, light buttons (and the edit form's Save its old #A20090). Same type and
   colours as the popup footer's Close / Save, one step smaller as they act on the sub-form. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.ic-quick-add, .ic-inline-edit-shell) .ic-quick-save-row .btn:is(.ic-quick-add-btn, .ic-quick-cancel-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 0;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font: 13px 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 :is(.ic-quick-add, .ic-inline-edit-shell) .ic-quick-save-row .ic-quick-cancel-btn {
    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 :is(.ic-quick-add, .ic-inline-edit-shell) .ic-quick-save-row .ic-quick-cancel-btn:hover {
    border-color: var(--pp-ink-3) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.ic-quick-add, .ic-inline-edit-shell) .ic-quick-save-row .ic-quick-add-btn {
    border: 1px solid var(--pp-acc) !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.ic-quick-add, .ic-inline-edit-shell) .ic-quick-save-row .ic-quick-add-btn:hover {
    filter: brightness(.92);
}

/* Their "Description" / "Photos" labels were 16px light, bigger than every other heading in the popup */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.ic-quick-add, .ic-inline-edit-shell) label.label-ui {
    font: 13px var(--pp-sans) !important;
    -webkit-text-stroke: .3px currentColor;
    color: var(--pp-ink) !important;
}

/* Phones and narrow windows (same 760px break as pie-premium.css). Its one-column rules for the
   compact popup were overruled by later !important desktop grids (whose :not(:has()) also out-ranks
   them), so on a phone the form stayed in two ~150px columns (Search field 33px wide) and
   Reservation Status was squeezed to ~40px at the right edge. Here (doubled id to out-rank those):
   header tab and Reservation Status on their own rows, the form in one column, and Passengers /
   Price summary after the fields instead of beside them. */
@media (max-width: 760px) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .booking-popup-header > .row {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 10px;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .booking-popup-header .quick-booking-status {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100%;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* the header tab keeps row 1; the type pills move below Reservation Status */
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .booking-popup-header .booking-sub-category-dropdown > .dropdown-menu {
        grid-row: 3 !important;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .search-location .col-12:is(:has(> .ic-inline-rooms), :has(.quick-travelers)) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .search-location .col-12:is(:has(> .ic-inline-rooms), :has(.quick-travelers)) > *,
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .search-location .col-12:has(.quick-travelers) > .row:is(:nth-child(2), :nth-child(3)):has(.vdp-datepicker) > [class*="col-"] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal#bookingPopupModal .reservation-popup-compact .search-location .col-12:has(.quick-travelers) > :is(.row:has(.quick-travelers), .pp-psum) {
        order: 30 !important;
    }
}

/* Full view (Cruise, Hotel …): "Add New Cabin Type" / room type picker. The rule above opens it upward;
   PremiumHotelPopupExtras.vue sets data-pp-drop="down" when there is no room above the field (it is the
   first thing in the step), where the menu was cut off by the top of the popup. Options with a long name
   also drew a sideways scrollbar under the list. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > div > div > .row.g-2 > .form-group > .form-floating > .v-select[data-pp-drop="down"] .vs__dropdown-menu {
    top: calc(100% + 4px);
    bottom: auto;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .hotel-room-vue > div > div > .row.g-2 > .form-group > .form-floating > .v-select .vs__dropdown-menu {
    overflow-x: hidden;
}

/* Time picker (vue2-timepicker) in the full view's "Date and time" card: the card clips its content
   (overflow: hidden), so the hours / minutes / AM-PM lists, which hang below the field, were cut off at
   the card's bottom edge. Let the card show them while a list is open. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .card:has(.vue__time-picker .time-picker-overlay) {
    overflow: visible;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .vue__time-picker .dropdown {
    border-radius: 10px;
    box-shadow: var(--pp-shadow-2), 0 0 0 1px var(--pp-line);
    overflow: hidden;
}

/* Section nav: the number sits dead-centre in its circle (the font shorthand reset line-height to
   "normal", which pushed the digit off the middle of the 22px disc) */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup-tab .nav-pills .nav-link::before {
    box-sizing: border-box;
    padding: 0;
    line-height: 1;
    text-align: center;
}

/* Tag pickers (Reservation / Place Tags): placeholder and tags centred in the 50px field. The
   classic rules give the field padding-top 17px (for a floating label) and the placeholder a 4px
   top margin, so the text sat low. Floating-label pickers keep their own offsets. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup .multiselect:not(:is(.form-floating, .ffl-wrapper, .fl-floated, .ffl-floated) .multiselect) .multiselect__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 40px 4px 12px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup .multiselect:not(:is(.form-floating, .ffl-wrapper, .fl-floated, .ffl-floated) .multiselect) .multiselect__tags .multiselect__placeholder {
    margin: 0;
    padding: 0;
    line-height: 20px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup .multiselect:not(:is(.form-floating, .ffl-wrapper, .fl-floated, .ffl-floated) .multiselect) .multiselect__tags .multiselect__tag {
    margin: 3px 8px 3px 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup .multiselect:not(:is(.form-floating, .ffl-wrapper, .fl-floated, .ffl-floated) .multiselect).multiselect--active .multiselect__tags .multiselect__input {
    flex: 1 1 60px;
    width: auto;
    min-width: 60px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
}

/* Places (Activity / Dining): the floated label sat 5px under the top edge of the field */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup .tab-content .form-floating:has(> :is(#general_places, #restaurant_search)) > .ffl-label {
    top: 8px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup .tab-content .form-floating:has(> :is(#general_places, #restaurant_search)) > .form-control {
    padding-top: 22px;
    padding-bottom: 6px;
}

/* Library button: pie-premium.css gives .library-action-col .btn `display: inline-flex !important`,
   which beat v-show's inline display:none, so an existing reservation (disableLibraryBtn) still
   showed Library. Respect v-show again. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .library-action-col .btn[style*="display: none"],
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .reservation-popup-compact .library-action-col .btn[style*="display: none"] {
    display: none !important;
}

/* ...and when that hidden Library button is the column's only button (editing an existing
   reservation; pp-lib-off is bound in BookingPopupIC_new.vue with the button's v-show test), drop the whole column so "Search place" takes the full row like the fields below
   it, instead of leaving the empty column and the row gap on the right. */
html.pie-premium .pp-shell:not(.pp-classic) .modal:is(#bookingPopupModal, .modal) .library-action-col.pp-lib-off {
    display: none !important;
}

/* ==========================================================================
   QA pass (2026-11-05): price fields, cancellation popup, booked-date calendar, search lists,
   tag pickers and the image picker. Every rule is new-look only.
   ========================================================================== */

/* 1. Price section fee fields (Tax, Management Fee, Markup, Cushion, Processing Fee…). The
   "label inside the input" layout reserves 45% + 84px of the field, which left no room for the
   value in the reservation popup's three narrow price columns. When a fee block is narrower
   than 340px it stacks instead: name and %/$ switch on one line, the full-width input under it. */
html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) {
    container-type: inline-size;
}

@container (max-width: 340px) {
    html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
        grid-row: 1;
        flex-wrap: wrap;
        height: auto;
        min-height: 30px;
        padding: 0 0 6px 26px !important;
        font-size: 14px;
        line-height: 1.3;
        pointer-events: auto;
    }

    html.pie-premium .modal.show .markup-amount:not(:has(> .green-dot)) > table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
        padding-left: 0 !important;
    }

    html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not([data-pp-fee]):not(.pp-fee-off) {
        grid-row: 2;
    }

    html.pie-premium .modal.show .markup-amount > table > tbody[data-pp-fees] > tr > td:not([data-pp-fee]) > input.form-control {
        height: 44px !important;
        padding: 0 12px !important;
        text-align: right;
    }

    html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) > .green-dot {
        top: 15px;
        left: 4px !important;
    }
}

/* 2. Reservation cancellation popup: "Record as Cancelled" is the main action, so it is the filled
   Bordeaux button (the planner's footer rule made every outline button white); the refund links
   were #A20090. */
html.pie-premium .pp-shell #bookingCancellationPrePopUpModal .modal-footer > .btn[data-bs-dismiss="modal"]:not(:first-child) {
    border: 1px solid 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);
}

html.pie-premium .pp-shell #bookingCancellationPrePopUpModal .modal-footer > .btn[data-bs-dismiss="modal"]:not(:first-child):hover {
    background: color-mix(in srgb, var(--pp-acc) 88%, #000) !important;
}

html.pie-premium .modal:is(#bookingCancellationPrePopUpModal, #bookingCancellationPopUpModal) :is(.add-record-refund, .add-payment-invoice) :is(span, i) {
    color: var(--pp-acc) !important;
    cursor: pointer;
}

html.pie-premium .modal:is(#bookingCancellationPrePopUpModal, #bookingCancellationPopUpModal) :is(.add-record-refund, .add-payment-invoice) span:hover {
    text-decoration: underline;
}

/* 3. Its fee rows (Supplier / Agency Cancellation Fee) sit in the same two columns as the other
   amounts: name + %/$ switch on the left, the value on the right; no stray "%" caption. */
html.pie-premium .modal#bookingCancellationPrePopUpModal.show table > tbody[data-pp-fees] > tr > td[data-pp-fee] {
    grid-column: 1;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--pp-line) !important;
}

html.pie-premium .modal#bookingCancellationPrePopUpModal.show table > tbody[data-pp-fees] > tr:has(> td[data-pp-fee]) > td:not([data-pp-fee]):not(.pp-fee-off),
html.pie-premium .modal#bookingCancellationPrePopUpModal.show table > tbody[data-pp-fees] > tr:has(> td[data-pp-fee]) + tr > td:not(.pp-fee-off) {
    grid-column: 2;
    justify-content: center;
}

html.pie-premium .modal#bookingCancellationPrePopUpModal.show table > tbody[data-pp-fees] > tr > td > .fl-label {
    display: none;
}

/* 4. Booked date (and every vuejs-datepicker in the popup): common.css sizes each day cell at
   13.4957% plus a 2px margin, which only fits seven across in a ~330px calendar. In the side rail
   the calendar is narrower, so Saturday wrapped under Sunday. Size the cells from the real width. */
html.pie-premium .pp-shell #bookingPopupModal .vdp-datepicker__calendar .cell:not(.month):not(.year) {
    width: calc((100% - 14px) / 7) !important;
}

html.pie-premium .pp-shell #bookingPopupModal .vdp-datepicker__calendar .cell.day-header {
    font-size: 11.5px !important;
    letter-spacing: 0;
}

/* 5 / 6. Search lists (Service / Booking supplier, Add Travellers, …): the highlighted row, link
   hover and "Add New" were #A20090; the initials tiles are images drawn with a #A20090 background
   (utils.js getInitialsUserIcon), shifted to the Bordeaux hue. Real supplier logos are untouched. */
html.pie-premium .modal .typeahead-result .typeahead-list .typeahead-item a {
    color: var(--pp-ink-2);
}

html.pie-premium .modal .typeahead-result .typeahead-list .typeahead-item:is(.active, :hover) {
    background: var(--pp-panel-2) !important;
}

html.pie-premium .modal .typeahead-result .typeahead-list .typeahead-item.active a,
html.pie-premium .modal .typeahead-result .typeahead-list .typeahead-item a:hover {
    background: transparent !important;
    color: var(--pp-ink) !important;
}

/* Supplier lists: "Add New" is the only row without a logo / initials image */
html.pie-premium .modal .typeahead-result .typeahead-list .typeahead-item a.suggestion-link:not(:has(img)),
html.pie-premium .modal .typeahead-result .typeahead-list .typeahead-item .suggestion-source-logo {
    color: var(--pp-acc) !important;
}

html.pie-premium .modal .typeahead-result .typeahead-list .typeahead-item img[src*="/A20090/"] {
    border-radius: 3px;
    filter: hue-rotate(38deg) saturate(.75) brightness(.8);
}

/* 7. Reservation / Place Tags (vue-multiselect): the open field had common.css's #A20090 border */
html.pie-premium .modal .multiselect.multiselect--active .multiselect__tags {
    border-color: var(--pp-acc-line) !important;
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
}

html.pie-premium .modal .multiselect.multiselect--active .multiselect__content-wrapper {
    border-color: var(--pp-line) !important;
}

/* 8. Select File / Image (Unsplash / Pixabay tabs): the chips, orientation switch and focus ring use
   --theme-color (#a20090), the search button template1.css's #A20090 / common.css's #ff005e. */
html.pie-premium .modal {
    --theme-color: var(--pp-acc);
}

html.pie-premium .modal .pixabay_tabs .nav-tabs .search-icon {
    background: var(--pp-acc) !important;
    border-color: var(--pp-acc) !important;
}

html.pie-premium .modal .pixabay_tabs .nav-tabs .search-icon:hover {
    background: color-mix(in srgb, var(--pp-acc) 88%, #000) !important;
}

html.pie-premium .modal .pixabay_tabs .tab-pane .upload_img_orientation .orientation.active {
    border-color: var(--pp-acc) !important;
    background-color: var(--pp-acc) !important;
}

html.pie-premium .modal .unsplash-chip:focus-visible,
html.pie-premium .modal .unsplash-select:focus,
html.pie-premium .modal .unsplash-orientation button:focus-visible {
    box-shadow: 0 0 0 2px var(--pp-acc-soft) !important;
}

/* Add travelers popup — traveler search results. Classic common.css caps the list at 230px
   (.add-travelers-modal .traveller_info_list) and draws it as a flat box; in the new look it is a
   full-width rounded card under the search field with roomy rows and a round "+" action. */
html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent > .typeahead-result {
    top: 52px !important;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: none !important;
    max-height: 320px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    background: var(--pp-panel);
    box-shadow: 0 18px 40px -18px rgba(17, 17, 26, .28), 0 2px 6px rgba(17, 17, 26, .05);
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line-2) transparent;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-list {
    position: static;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-item {
    border-radius: 10px;
    background: transparent;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-item > a {
    padding: 9px 10px 9px 14px;
    border-radius: 10px;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-display {
    align-items: center;
    gap: 12px !important;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-display p {
    font: 14px/1.3 var(--pp-bold);
    color: var(--pp-ink);
    word-break: normal;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-display .fs-10 {
    display: block;
    margin-top: 2px;
    font: 12px/1.3 var(--pp-sans);
    color: var(--pp-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row action: a round "+" (or ✓ for travelers already on the trip) */
html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-display > i {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 999px;
    background: var(--pp-panel-2);
    color: var(--pp-ink-3);
    font-size: 14px;
    transition: background .15s, color .15s;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-item:is(:hover, .active) .typeahead-display > i.pie-icon-thin-0151_plus_add_new {
    background: var(--pp-acc);
    color: #fff;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-item a.color-green .typeahead-display > i {
    background: #e8f3ec;
    color: #2f7a4b;
}

/* "Add New" is the server's first row and the only one without an email line */
html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-item:first-child > a:not(:has(.fs-10)) .typeahead-display p {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-item:first-child:has(> a:not(:has(.fs-10))):not(:last-child) {
    margin-bottom: 4px;
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent .typeahead-item:first-child:has(> a:not(:has(.fs-10))):not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    margin: 4px 10px -3px;
    background: var(--pp-line);
}

/* "Fetching suggestions…" / "No Results Found" */
html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent > .typeahead-result.no_suggestion {
    padding: 12px 16px;
    font: 13px var(--pp-sans);
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell .modal.add-travelers-modal .suggestions_parent > .typeahead-result.no_suggestion .fa-spinner {
    margin-right: 8px;
}

/* Footer › "Send flight updates to travelers" (PopupFooter.vue, classic .checkbox-toggle.on-off-switch):
   the design's 34 x 20 switch, Bordeaux when on, instead of the classic outlined green-knob toggle */
html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch:has(> #flight_alert_on_off) {
    display: inline-flex;
    align-items: center;
    padding: 0 0 0 10px !important;
    vertical-align: middle;
}

html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch > #flight_alert_on_off + label {
    width: 34px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    line-height: 20px;
}

html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch > #flight_alert_on_off + label::before {
    top: 0;
    width: 34px;
    height: 20px;
    border: 0 !important;
    border-radius: 999px;
    background: var(--pp-line-2) !important;
    transition: background-color .15s;
}

html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch > #flight_alert_on_off + label::after,
html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch > #flight_alert_on_off + label:hover::after {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border: 0 !important;
    border-radius: 50%;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .15s;
}

html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch > #flight_alert_on_off:checked + label::before {
    background: var(--pp-acc) !important;
}

html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch > #flight_alert_on_off:checked + label::after {
    left: 17px;
}

html.pie-premium .pp-shell #bookingPopupModal .checkbox-toggle.on-off-switch > #flight_alert_on_off + label :is(.left-off, .right-on) {
    display: none;
}

/* Flight leg › Departure / Arrival: Date, Time, Day # and City share one row in both blocks (4/3/2/3
   of 12). The two Day # fields came out at different widths (Departure ~155px, Arrival ~45px with its
   label cut to "D…"); the row's columns are pinned to the same shares. */
html.pie-premium .pp-shell #bookingPopupModal .flight-details-compact .row:has(> .col-2 input:is([name="departure_day"], [name="arrival_day"])) {
    flex-wrap: wrap;
}

html.pie-premium .pp-shell #bookingPopupModal .flight-details-compact .row:has(> .col-2 input:is([name="departure_day"], [name="arrival_day"])) > .col-4 {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    max-width: 33.3333% !important;
}

html.pie-premium .pp-shell #bookingPopupModal .flight-details-compact .row:has(> .col-2 input:is([name="departure_day"], [name="arrival_day"])) > .col-3 {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
}

html.pie-premium .pp-shell #bookingPopupModal .flight-details-compact .row:has(> .col-2 input:is([name="departure_day"], [name="arrival_day"])) > .col-2 {
    flex: 0 0 16.6667% !important;
    width: 16.6667% !important;
    max-width: 16.6667% !important;
    min-width: 0;
}

html.pie-premium .pp-shell #bookingPopupModal .flight-details-compact .row > .col-2 > .form-floating > input:is([name="departure_day"], [name="arrival_day"]) + .ffl-label {
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flight leg (FlightInfo_new.vue) › Arrival: its Day # column is col-lg-1 (and City col-lg-3), while
   Departure's are col-xxl-3 col-md-4 / col-xxl-3 col-md-6, so Arrival's Day # was ~55px with its label
   cut to "D…". Arrival takes Departure's widths at every breakpoint. */
@media (min-width: 768px) {
    html.pie-premium .pp-shell #bookingPopupModal .row.g-2 > .col-lg-1.form-group:has(input[name="arrival_day"]) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    html.pie-premium .pp-shell #bookingPopupModal .row.g-2:has(> .col-lg-1.form-group input[name="arrival_day"]) > .col-lg-3.form-group {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1400px) {
    html.pie-premium .pp-shell #bookingPopupModal .row.g-2 > .col-lg-1.form-group:has(input[name="arrival_day"]),
    html.pie-premium .pp-shell #bookingPopupModal .row.g-2:has(> .col-lg-1.form-group input[name="arrival_day"]) > .col-lg-3.form-group {
        width: 25%;
    }
}

/* Cruise API photos (TransportInfo_new.vue dining / enrichment / entertainment / deck… sections):
   read-only thumbnails got common.css's 215px #F7F7F7 file bar, so each photo sat off-centre on a
   grey slab. They are the same 78x60 rounded tiles as the place photos instead. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .planner_dcmnt_uploaded > .gallery-grid.grid-photo-name:not(.attachment-sortable-tiles) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .planner_dcmnt_uploaded > .gallery-grid.grid-photo-name:not(.attachment-sortable-tiles) > .gallery-col {
    flex: none;
    width: 78px !important;
    height: 60px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .planner_dcmnt_uploaded > .gallery-grid.grid-photo-name:not(.attachment-sortable-tiles) > .gallery-col > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 10px;
    object-fit: cover;
}

/* Cruise Itinerary Info › Cruise Day (TransportInfo_new.vue): the date, day, port, arrival /
   departure and time zone fields sat in col-lg-2 / col-lg-3 columns of the ~530px row, so the date,
   port, times and time zone were cut off ("11/05/20", "12:00 PI", "(GMT+..."). They wrap in an even
   grid of fields at least 150px wide, and the day's form starts closer under its "Cruise Day" heading. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #cruise-section-booking .row.g-2:has(> .cruise-days-info) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #cruise-section-booking .row.g-2:has(> .cruise-days-info) > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #cruise-section-booking .card-body[id^="cruise_day_info_"] {
    padding-top: 4px;
}

/* Proposal documents (IframeDocuments.vue): pie-premium.css made each file a full-width row, so in
   this full-width section the bin sat at the far end, away from the file name. Each file is a row
   as wide as its name, the bin right after it */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #client_iframe_doc .gallery-grid > .gallery-col.pdf_document {
    width: auto !important;
    max-width: 100%;
}

/* Quick view header (BookingPopupIC_new.vue), Cruise: the row lines its items up along the bottom,
   so the 13px "Browse Cruiseline" link sat at the foot of the 38px category tab, below its
   "Cruise · Ocean Cruise" text. Its column is as tall as the tab, the link centred in it. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .booking-popup-header > .row > .col-auto:has(> .browse-cruiselines-link) {
    align-self: end;
    height: 38px;
    align-items: center;
}

/* Quick view Search (Cruise / Tour search-location .btn-pink): no change when pressed, so a click
   did not show. Pressed / keyboard focus gives it the Bordeaux border and soft fill. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .reservation-popup-compact .search-location .btn-pink:not(:disabled):is(:active, :focus-visible) {
    border-color: var(--pp-acc) !important;
    background: var(--pp-acc-soft) !important;
    outline: 0;
}

/* A header card inside a wrapper card (Date and time, Cruise details, Transportation 1…): the soft
   cards' 12px top margin above out-ranked pie-premium.css's margin: 0 for this case and left a white
   strip above the header inside the wrapper's border */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .booking-popup:not(.reservation-popup-compact) .tab-content .card:has(> .card.accordion-item) > .card.accordion-item {
    margin: 0 !important;
}

/* Cruise API sections (Deck Plans, Dining Options, Enrichment…, TransportInfo_new.vue): the open
   section's items sat in a cool-grey panel with a grey left bar, each item in another grey card and
   its description framed by a third grey (.bg-gray). The open section and its items are one soft
   card instead; each item is a white card whose description sits straight inside it. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-parent-accordion-item > .ship-parent-card {
    margin: 0 !important;
    box-shadow: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-parent-accordion-item:has(> .collapse:is(.show, .collapsing)) > .ship-parent-card {
    border-radius: 16px 16px 0 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-parent-accordion-item > .collapse {
    border-radius: 0 0 16px 16px;
    background: var(--pp-panel-2);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-parent-accordion-item .ship-child-accordion-wrapper {
    margin: 0;
    padding: 0 12px 12px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-child-accordion-wrapper .line-item-wrapper {
    margin-bottom: 8px !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-child-accordion-wrapper .line-item-wrapper:last-child {
    margin-bottom: 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-child-accordion-wrapper .line-item-wrapper > .card.accordion-item {
    margin: 0 !important;
    border-radius: 12px !important;
    background: var(--pp-panel);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-child-accordion-wrapper .line-item-wrapper > .card.accordion-item > .card-header {
    padding: 10px 14px;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-child-accordion-wrapper .line-item-wrapper:has(> .card-body:is(.show, .collapsing)) > .card.accordion-item {
    border-radius: 12px 12px 0 0 !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-child-accordion-wrapper .line-item-wrapper > .card-body.bg-gray {
    padding: 0 14px 14px;
    border-radius: 0 0 12px 12px;
    background: var(--pp-panel) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-child-accordion-wrapper .line-item-wrapper > .card-body.bg-gray > .bg-white {
    padding: 0 !important;
    border-top: 1px solid var(--pp-line);
    border-radius: 0 !important;
}

/* Sections whose content sits straight in the collapse (no item list): same beige card, content in a
   white card inside it */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-parent-accordion-item > .card-body.bg-gray {
    padding: 0 12px 12px;
    background: var(--pp-panel-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ship-parent-accordion-item > .card-body.bg-gray > .bg-white {
    border-radius: 12px !important;
}

/* ==========================================================================
   QA pass (2026-11-06, PLAN-7460 #51 / #52): Hotel quick popup › Rooms
   ========================================================================== */
/* #51 Editing an existing room type (.ic-inline-edit-shell) kept the classic magenta: the Per night /
   Per stay toggle, the steppers, the description's "Clear" and the Save / Cancel buttons. Same
   Bordeaux controls as the "Create room type" editor (.ic-quick-add, pie-premium.css). */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.ic-inline-edit-shell, .ic-quick-add) .ic-seg {
    border-color: var(--pp-line-2) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-edit-shell .ic-seg > button.ic-seg-on,
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.ic-inline-edit-shell, .ic-quick-add) .ic-seg-static .ic-seg-on {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-edit-shell .ic-seg > button:not(.ic-seg-on) {
    background: var(--pp-panel);
    color: var(--pp-ink-3);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-edit-shell .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-inline-edit-shell .ic-step-btn:not(:disabled):hover {
    background: var(--pp-acc-soft) !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-edit-shell .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-desc-clear {
    color: var(--pp-acc);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-save-row .ic-quick-add-btn {
    border-color: var(--pp-acc) !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-quick-save-row .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-save-row .ic-quick-cancel-btn:hover {
    background: var(--pp-hover) !important;
}

/* Room row tools (delete, show / hide details): the hover / open state was #c0247a on pink */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-icon-btn {
    --ic-icon-btn-hover-bg: var(--pp-hover);
    color: var(--pp-muted);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal :is(.ic-inline-icon-btn:hover, .ic-inline-icon-btn-on) {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .ic-inline-icon-btn.ic-inline-icon-btn-del:hover {
    background: #fdecec;
    color: #b42318;
}

/* #52 Room type photos (RoomTypePhotos.vue) put the bin in .pdf_document_bottom_share-hotel, which the
   corner-bin rules above (.pdf_document_bottom_share) missed: it sat over the middle of the photo.
   It goes on the photo's top-right corner and shows on hover, like the other photo tiles. */
html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share-hotel {
    position: static;
    display: block;
    flex: none;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share-hotel > .delete_uploaded_image {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: auto;
    left: auto;
    z-index: 4;
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    color: var(--pp-ink-2);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col:is(:hover, :focus-within) > .pdf_document_bottom_share-hotel > .delete_uploaded_image {
    display: inline-grid;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share-hotel > .delete_uploaded_image:hover {
    background: #fff;
    color: #b42318;
}

@media (hover: none) {
    html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal #uploaded_photos > .gallery-grid:not(.grid-photo-name) > .gallery-col > .pdf_document_bottom_share-hotel > .delete_uploaded_image {
        display: inline-grid;
    }
}

/* #53 Rooms tab › room type gear menu (Delete / Edit): picking Edit hides the room's row, so while the
   menu faded out it jumped to the top of the popup. HotelRoom_new.vue now closes it on click; it
   disappears at once instead of fading where its row used to be. */
html.pie-premium .pp-shell:not(.pp-classic) .popover-reservation-settings.fade:not(.show) {
    display: none;
}