/* 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 [class*="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 [class*="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 [class*="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 [class*="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 [class*="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 > [class*="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([class*="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([class*="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 > [class*="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. */
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:not([style*="display: none"])) {
    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:not([style*="display: none"])) > 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:not([style*="display: none"])) > 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[id^="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[id^="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[id^="edit_room_type_"] .room-type-action-btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0;
    border-radius: 999px;
    background: var(--pp-hover) !important;
    color: var(--pp-ink) !important;
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
    cursor: pointer;
}

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_"] .room-type-action-btn:hover {
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc) !important;
}

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: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[id^="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[id^="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[id^="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[id^="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[id^="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[id^="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[id^="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[id^="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[id^="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);
}

/* 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: 140px !important;
    min-height: 120px;
}

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: 14px 16px !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: 8px;
    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: 3px;
    padding-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: 13px/20px 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: 2px;
    color: var(--pp-ink);
    font: 15px 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 {
    align-self: flex-start !important;
    margin-top: auto;
}

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: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    color: var(--pp-acc) !important;
    font: 12.5px var(--pp-bold);
    white-space: nowrap;
    cursor: pointer;
}

html.pie-premium .pp-shell:not(.pp-classic) #bookingPopupModal .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: 18px !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: 12px !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 block is one field like "Other fee" above it, name and info on the left, the
   value on the right, the switch inside the field's end, the green dot inside its start. The
   bordered table, the 24px indent and the inner "%"/"Amount" caption go.
   ========================================================================== */
html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) {
    padding-left: 4px !important;
}

html.pie-premium .modal.show .markup-amount:has(> table > tbody[data-pp-fees]) > .green-dot {
    top: 25px;
    left: 18px !important;
    z-index: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

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) {
    grid-row: 1;
    grid-column: 1 / -1;
    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] {
    z-index: 1;
    justify-content: flex-start;
    gap: 6px;
    height: 50px;
    padding: 0 8px 0 34px !important;
    color: var(--pp-ink) !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] > * {
    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: 50px !important;
    padding: 0 84px 0 45% !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;
}