/* New look (html.pie-premium) - legacy planner popups (old Flight/Hotel popups, Reservation Info,
   Record as Booked, Cruise search). Every selector starts with html.pie-premium. */

/* ---------- #6 Reservation Info popup (ViewReservation.vue, #viewReservationInfo) ---------- */
html.pie-premium #viewReservationInfo .modal-body.reservation-details {
    padding: 8px 22px 18px;
}
html.pie-premium #viewReservationInfo .reservation-details .panel-reservation {
    position: relative;
    margin: 0 0 14px;
    padding: 46px 18px 8px;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: 0 1px 2px rgba(17, 17, 26, .04);
    font-size: 13.5px;
    color: var(--pp-ink-2);
}
html.pie-premium #viewReservationInfo .reservation-details .panel-reservation legend {
    position: absolute;
    top: 16px;
    left: 18px;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html.pie-premium #viewReservationInfo .reservation-details .panel-reservation label {
    margin-bottom: 10px;
    color: var(--pp-ink-3);
    font-family: var(--pp-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}
html.pie-premium #viewReservationInfo .reservation-details .panel-reservation label.bold {
    margin-top: 4px;
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-size: 13px;
}
html.pie-premium #viewReservationInfo .reservation-details .panel-reservation p {
    margin-bottom: 10px;
    color: var(--pp-ink);
    font-size: 13.5px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

/* The dialog is 500px wide below 992px: Departure / Arrival (and the hotel/room halves) stack instead
   of squeezing two label+value columns side by side */
@media (max-width: 991.98px) {
    html.pie-premium #viewReservationInfo .reservation-details .panel-reservation .row > .col-md-6:has(> .row) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- #5 Flight Reservation popup: "Hide" link under a flight's details (BookingPopupIC_new.vue) ----------
   Classic .color-red and Bootstrap .text-decoration-underline are both !important. */
html.pie-premium #bookingPopupModal a.color-red.text-decoration-underline[data-bs-toggle="collapse"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-acc) !important;
    font-family: var(--pp-bold);
    font-size: 13px;
    letter-spacing: 0;
    text-decoration: none !important;
}
html.pie-premium #bookingPopupModal a.color-red.text-decoration-underline[data-bs-toggle="collapse"]::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--pp-i-chev) center / contain no-repeat;
    mask: var(--pp-i-chev) center / contain no-repeat;
    transform: rotate(180deg);
}
html.pie-premium #bookingPopupModal a.color-red.text-decoration-underline[data-bs-toggle="collapse"]:hover {
    text-decoration: underline !important;
}

/* ---------- #8 Record as Booked popup (TrackCommissionRequiredFields.vue) ----------
   Old magenta .color-red (classic, !important) -> accent; labels/values on the new type scale. */
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body .color-red,
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body .color-red .commission-amt {
    color: var(--pp-acc) !important;
}
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body .pop-head {
    color: var(--pp-ink-3);
    font-family: var(--pp-sans);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
}
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body .commission-amt,
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body .track-commission-hover > .d-inline {
    color: var(--pp-ink);
    font-size: 14px;
    line-height: 20px;
}
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body .confirmation-link {
    color: var(--pp-acc);
    font-family: var(--pp-bold);
    font-size: 13px;
    text-decoration: none;
}
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body .confirmation-link:hover {
    text-decoration: underline;
}
/* "(Base: …)" sits on its own line under the total, clear of the Commission row */
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-body label.small-text {
    display: block;
    margin: 2px 0 0;
    color: var(--pp-muted);
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
}
html.pie-premium #TrackCommissionRequiredFieldsModal .modal-footer .pull-left {
    color: var(--pp-ink-3);
    font-size: 13px;
    line-height: 18px;
}

/* ---------- #10 Hotel popup, inline Rooms (BookingPopupIC_new.vue): guest Check-in/Check-out calendars ----------
   A calendar (330px) opened from its field's left edge; in the right-hand Rooms column the Check-out
   one ran ~85px past the popup body's right edge (overflow-x hidden) and was cut off, and Check-in
   did the same once the fields wrap (768px). Anchor both to their field's right edge so they open
   leftwards, back over the popup. Only position changes; the enabled dates are untouched. */
html.pie-premium #bookingPopupModal .ic-room-guest-row > .ic-guest-date .vdp-datepicker__calendar {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 32px);
}
/* Below Bootstrap's md breakpoint the Rooms panel stacks under the details at the popup's left edge,
   so the calendars open rightwards again from their field's left edge */
@media (max-width: 767.98px) {
    html.pie-premium #bookingPopupModal .ic-room-guest-row > .ic-guest-date .vdp-datepicker__calendar {
        left: 0 !important;
        right: auto !important;
    }
}

/* ---------- #15 Cruise / Tour Search Results popup (CruiseSearchResultsPopup.vue, #cruiseSearchResults) ----------
   Magenta .text-primary price -> ink; result cards, ship chip, Search / Select / pager buttons and the
   price column on the new-look tokens. */
html.pie-premium #cruiseSearchResults .modal-body {
    padding-top: 6px;
}
html.pie-premium #cruiseSearchResults .modal-body button.btn-primary-outline.mt-2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-top: 4px !important;
    padding: 0 18px;
    border: 1px solid var(--pp-acc-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--pp-acc);
    font-family: var(--pp-bold);
    font-size: 13.5px;
    letter-spacing: 0;
}
html.pie-premium #cruiseSearchResults .modal-body button.btn-primary-outline.mt-2:hover {
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}
/* Pressed / keyboard focus: the Bordeaux border, so the click shows */
html.pie-premium #cruiseSearchResults .modal-body button.btn-primary-outline.mt-2:is(:active, :focus-visible) {
    border-color: var(--pp-acc);
    background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
    outline: 0;
}
html.pie-premium #cruiseSearchResults .modal-body p.float-end {
    color: var(--pp-ink-3);
    font-family: var(--pp-sans);
    font-size: 12.5px;
}
html.pie-premium #cruiseSearchResults .card {
    overflow: hidden;
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    background: var(--pp-panel);
    box-shadow: var(--pp-shadow);
}
html.pie-premium #cruiseSearchResults .card .card-title {
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-size: 17px;
    letter-spacing: -.005em;
}
html.pie-premium #cruiseSearchResults .card .card-body p.fs-14,
html.pie-premium #cruiseSearchResults .card .card-body .fs-14 {
    color: var(--pp-ink-2);
    font-size: 13.5px;
}
html.pie-premium #cruiseSearchResults .card .card-body p strong,
html.pie-premium #cruiseSearchResults .card .card-body .itinerary-label {
    color: var(--pp-ink-3);
}
/* beats pie-premium.css's modal-wide white .btn-primary-outline (1 id + 6 classes, !important) */
html.pie-premium #cruiseSearchResults.modal .card .card-body .btn.btn-primary-outline.ship-name-btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--pp-line) !important;
    border-radius: 999px;
    background: var(--pp-panel-2) !important;
    box-shadow: none !important;
    color: var(--pp-ink);
    font-size: 12.5px;
    letter-spacing: 0;
}
html.pie-premium #cruiseSearchResults.modal .card .card-body .btn.btn-primary-outline.ship-name-btn:hover {
    border-color: var(--pp-acc-line) !important;
    background: var(--pp-acc-soft) !important;
    color: var(--pp-acc);
}
html.pie-premium #cruiseSearchResults .card .itinerary-toggle-btn {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--pp-acc);
    font-family: var(--pp-bold);
    font-size: 12.5px;
    letter-spacing: 0;
}
html.pie-premium #cruiseSearchResults .card .ship-cover-image {
    border-radius: 10px;
}
/* Price column: the 1-column spacer with the thin rule becomes a tinted side panel */
html.pie-premium #cruiseSearchResults .card > .row > .col-md-1:has(> .vr) {
    display: none !important; /* Bootstrap .d-flex is !important */
}
html.pie-premium #cruiseSearchResults .card > .row > .col-md-3 {
    flex: 1 1 0;
    width: auto;
    border-left: 1px solid var(--pp-line);
    background: var(--pp-panel-2);
}
html.pie-premium #cruiseSearchResults .card > .row > .col-md-3 .text-muted {
    color: var(--pp-ink-3) !important;
    font-size: 12.5px;
}
html.pie-premium #cruiseSearchResults .card > .row > .col-md-3 .card-text:first-child .text-muted {
    font-family: var(--pp-bold);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html.pie-premium #cruiseSearchResults .card h4.text-primary {
    margin: 4px 0 6px !important;
    color: var(--pp-ink) !important;
    font-family: var(--pp-bold);
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.015em;
}
html.pie-premium #cruiseSearchResults .card .btn-primary.btn-small {
    height: 40px;
    margin: 4px 0 0 !important;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
    color: #fff;
    font-family: var(--pp-bold);
    font-size: 13.5px;
    letter-spacing: 0;
}
html.pie-premium #cruiseSearchResults .card .btn-primary.btn-small:hover {
    background: color-mix(in srgb, var(--pp-acc) 88%, #000);
    color: #fff;
}
html.pie-premium #cruiseSearchResults .widgety-pagination .btn {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font-family: var(--pp-bold);
    font-size: 13px;
    letter-spacing: 0;
}
html.pie-premium #cruiseSearchResults .widgety-pagination-info {
    color: var(--pp-ink-3);
    font-size: 13px;
    font-weight: 400;
}
/* Below md the columns stack: the price panel loses its side rule and gets a top one */
@media (max-width: 767.98px) {
    html.pie-premium #cruiseSearchResults .card > .row > .col-md-3 {
        flex: 0 0 100%;
        border-top: 1px solid var(--pp-line);
        border-left: 0;
    }
}

/* TI content editors: Includes / Excludes, Details and Important Notices. */
html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .modal-content {
    border: 1px solid var(--pp-line);
    border-radius: 22px;
    background: var(--pp-panel);
    color: var(--pp-ink-2);
    box-shadow: var(--pp-shadow-2);
    font-family: var(--pp-sans);
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .modal-header {
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--pp-line);
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .modal-title {
    margin: 0;
    color: var(--pp-ink);
    font: 20px/1.3 var(--pp-bold) !important;
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .modal-body {
    padding: 20px 24px;
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .modal-body .form-group > label {
    display: block;
    margin-bottom: 8px;
    color: var(--pp-ink-2);
    font: 13px/1.4 var(--pp-bold);
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .ck {
    --ck-color-base-border: var(--pp-line-2);
    --ck-color-toolbar-background: var(--pp-panel-2);
    --ck-color-focus-border: var(--pp-acc);
    --ck-border-radius: 10px;
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .modal-footer {
    display: flex;
    justify-content: flex-end !important;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--pp-line);
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .btn {
    min-height: 40px;
    margin: 0;
    padding: 9px 22px !important;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px !important;
    background: var(--pp-panel) !important;
    color: var(--pp-ink) !important;
    font: 14px/20px var(--pp-bold) !important;
    text-transform: capitalize;
    box-shadow: none;
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .btn.btn-primary {
    border-color: var(--pp-acc) !important;
    background: var(--pp-acc) !important;
    color: #fff !important;
}

html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) .btn:hover {
    filter: brightness(.95);
}

@media (max-width: 640px) {
    html.pie-premium :is(#myModalDetailsPopup, #ktinoticemodel) :is(.modal-header, .modal-body, .modal-footer) {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Trip processing fees: a compact dialog with fields that fill its content area. */
html.pie-premium .pp-shell #convenience_fee_modal .modal-dialog.modal-xl {
    width: calc(100% - 32px);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

html.pie-premium .pp-shell #convenience_fee_modal .modal-header {
    flex-wrap: wrap;
    gap: 12px;
}

html.pie-premium .pp-shell #convenience_fee_modal .modal-header > h5 {
    flex: 1 1 360px;
    margin: 0;
}

html.pie-premium .pp-shell #convenience_fee_modal .modal-header > div {
    display: flex;
    align-items: center;
    margin-left: auto;
}

html.pie-premium .pp-shell #convenience_fee_modal .modal-body.convenience_fee {
    margin-left: 0 !important;
    padding: 24px !important;
}

html.pie-premium .pp-shell #convenience_fee_modal .convenience_fee .row > .col-md-3.form-group {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
}

html.pie-premium .pp-shell #convenience_fee_modal .convenience_fee .row > .col-md-3.form-group:empty {
    display: none;
}

html.pie-premium .pp-shell #convenience_fee_modal .convenience_fee .row > .col-md-3.form-group:has(> span:only-child) {
    flex: 0 0 auto;
}

@media (max-width: 575px) {
    html.pie-premium .pp-shell #convenience_fee_modal .modal-body.convenience_fee {
        padding: 16px !important;
    }

    html.pie-premium .pp-shell #convenience_fee_modal .convenience_fee .row > .col-md-3.form-group {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   QA pass (2026-11-06, PLAN-7460): planner popups. Every rule is new-look only.
   ========================================================================== */
/* #30 Information / reservation event popup (EventPopup.vue): the open category icon was
   template1.css's #A20090 (.active-event-icon, !important) */
html.pie-premium .pp-shell #eventModalNew .booking-popup-header .booking-type-block li.active-event-icon {
    border-color: var(--pp-acc);
    color: var(--pp-acc) !important;
}

/* …and a hovered category icon was template1.css / common.css's #A20090 */
html.pie-premium .pp-shell #eventModalNew .booking-popup-header .booking-type-block li:hover,
html.pie-premium .pp-shell #eventModalNew .booking-popup-header .booking-type-block li a:hover {
    border-color: var(--pp-acc);
    color: var(--pp-acc);
}

/* #33 Time zone pickers (TimezoneSelect.vue): a chosen zone was drawn in Google blue (#1a73e8 on
   #f0f7ff). It reads like every other filled field. */
html.pie-premium .pp-shell .timezone-select.timezone-has-value .vs__dropdown-toggle {
    border-color: var(--pp-line-2);
    background-color: var(--pp-panel);
}

html.pie-premium .pp-shell .timezone-select.timezone-has-value .vs__selected {
    color: var(--pp-ink);
}

html.pie-premium .pp-shell .timezone-select.timezone-has-value .vs__dropdown-option--selected {
    background-color: var(--pp-acc-soft);
    color: var(--pp-acc);
}

html.pie-premium .pp-shell .timezone-select .tz-selected-mark {
    color: var(--pp-acc);
}

/* #33 …and links pasted into the popup's description editor were the browser's blue */
html.pie-premium .pp-shell #eventModalNew .ck-content a {
    color: var(--pp-acc);
}

/* #34 Upload Photos tiles (event/Photos.vue): each photo's bin was a box in the flow over the photo,
   on top of the move icon. It sits on the photo's top-right corner (number top-left, move icon
   bottom-right) and shows on hover, like the reservation popup's photos; touch screens always show it. */
html.pie-premium .pp-shell #eventModalNew .attachment-sortable-tiles.grid-photo-name > * {
    position: relative;
}

html.pie-premium .pp-shell #eventModalNew .attachment-sortable-tiles.grid-photo-name > * > .pdf_document_bottom_share {
    position: static;
    display: block;
}

html.pie-premium .pp-shell #eventModalNew .attachment-sortable-tiles.grid-photo-name > * > .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 #eventModalNew .attachment-sortable-tiles.grid-photo-name > :is(:hover, :focus-within) > .pdf_document_bottom_share > .delete_uploaded_image {
    display: inline-grid;
}

html.pie-premium .pp-shell #eventModalNew .attachment-sortable-tiles.grid-photo-name > * > .pdf_document_bottom_share > .delete_uploaded_image:hover {
    background: #fff;
    color: #b42318;
}

@media (hover: none) {
    html.pie-premium .pp-shell #eventModalNew .attachment-sortable-tiles.grid-photo-name > * > .pdf_document_bottom_share > .delete_uploaded_image {
        display: inline-grid;
    }
}

/* #31 Client itinerary popup › "Send Update to Client" used the same share arrow as Share; it is the
   mail icon the planner banner's Emails button uses */
html.pie-premium .pp-shell #travelItineraryModel .travel-itinerary-header #send_update_btn > i.pie-icon-share::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--pp-i-mail) center / contain no-repeat;
    mask: var(--pp-i-mail) center / contain no-repeat;
}

/* #43 Client itinerary › Content › Select layout: a long layout name was centred in its pill and lost
   both ends. A name that doesn't fit beside the label moves the pill to its own full-width line,
   reading from the start, and wraps inside it when still longer, so the whole name shows. */
html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 6px 10px;
}

html.pie-premium .pp-shell #travelItineraryModel .itinerary-layout-div > .d-flex.justify-content-between > .btn {
    display: block;
    flex: 1 0 auto;
    height: auto;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 16px !important;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* #46 Shared Client Itineraries › Unshare: the pop-ups' generic outline-button rule (white with a
   floating shadow, !important) won over the table's own one, so it read as a loose white box. It is
   the new look's row action, like Resend in the travelers table: a compact outlined pill, red on
   hover / focus because it removes the traveler's access. */
html.pie-premium .pp-shell .modal table#viewSharedTiInformationTable .btn.btn-primary-outline:not(:disabled) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--pp-line-2) !important;
    border-radius: 999px;
    background: var(--pp-panel) !important;
    box-shadow: none !important;
    color: var(--pp-ink-2) !important;
    font: 12.5px var(--pp-bold);
    letter-spacing: 0;
    text-transform: none;
}

html.pie-premium .pp-shell .modal table#viewSharedTiInformationTable .btn.btn-primary-outline:not(:disabled):is(:hover, :focus-visible) {
    border-color: #f1c4c4 !important;
    background: #fdf3f2 !important;
    color: #b42318 !important;
    outline: 0;
}

/* #41 Proposal And Trip Page Booking Flow Settings: "Go to Settings to add your Terms…" turned
   template1.css's #A20090 on hover */
html.pie-premium .trip_page_builder_popup a.text-decoration-underline:hover {
    color: var(--pp-acc);
}

/* #47 Create trip popup (trip_create.vue, #myModalCustomize) › Currency: the "Exchange rate" caption
   was template1/dashboard.css's #A20090 / blue; it is a field label like the others, in a field box */
html.pie-premium .pp-shell #myModalCustomize .trip_create_page .exchange-rate {
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
}

html.pie-premium .pp-shell #myModalCustomize .trip_create_page .exchange-rate > label {
    color: var(--pp-ink-3);
    font: 11.5px var(--pp-bold);
}

/* Client itinerary › Content › Tools › Language: the open list was the browser's native one, with its
   blue highlight. Where the browser lets CSS style a select's list (customizable select,
   appearance: base-select), it is the new look's menu: white rounded panel, the chosen language in
   the soft Bordeaux, the hovered one in the warm hover tint. Other browsers keep the native list. */
@supports (appearance: base-select) {
    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select,
    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select::picker(select) {
        appearance: base-select;
    }

    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select::picker-icon {
        display: none;
    }

    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select::picker(select) {
        min-width: anchor-size(width);
        margin-top: 4px;
        padding: 4px;
        border: 0;
        border-radius: 10px;
        background: var(--pp-panel);
        box-shadow: 0 12px 28px -14px rgba(20, 24, 20, .35), 0 0 0 1px var(--pp-line);
    }

    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select option {
        padding: 6px 10px;
        border-radius: 7px;
        color: var(--pp-ink-2);
        font: 12.5px/1.3 var(--pp-sans);
    }

    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select option::checkmark {
        display: none;
    }

    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select option:is(:hover, :focus-visible) {
        background: var(--pp-hover);
        color: var(--pp-ink);
        outline: 0;
    }

    html.pie-premium .pp-shell .ti-content-tree .ti-tools-language > select option:checked {
        background: var(--pp-acc-soft);
        color: var(--pp-acc);
        font-family: var(--pp-bold);
    }
}

/* Planner banner › Share itinerary popover (PremiumSharePopover.vue) › Itinerary: the popover's own
   dropdown (it replaced a native <select>, whose list was the browser's blue and, once open, stayed
   drawn over the app's top bar when the page scrolled). The field matches the popover's 34px fields;
   a long name ends in an ellipsis before the chevron; the list opens under the field inside the
   popover, the chosen itinerary in the soft Bordeaux, long names wrapping. */
html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd {
    position: relative;
    flex: 1;
    min-width: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--pp-line-2);
    border-radius: 10px;
    background: var(--pp-panel);
    color: var(--pp-ink);
    font: 13px var(--pp-sans);
    text-align: left;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-btn > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-btn > .pp-ic {
    width: 14px;
    height: 14px;
    color: var(--pp-muted);
    transition: transform .15s;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-btn[aria-expanded="true"] > .pp-ic {
    transform: rotate(180deg);
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-btn:hover {
    border-color: var(--pp-acc-line);
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-btn:is(:focus-visible, [aria-expanded="true"]) {
    border-color: var(--pp-acc-line);
    box-shadow: 0 0 0 3px var(--pp-acc-soft);
    outline: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-list {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 240px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border-radius: 12px;
    background: var(--pp-panel);
    box-shadow: 0 12px 28px -14px rgba(20, 24, 20, .35), 0 0 0 1px var(--pp-line);
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-list > li + li {
    margin-top: 2px;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-list button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pp-ink-2);
    font: 13px/1.35 var(--pp-sans);
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-list button:is(:hover, :focus-visible) {
    background: var(--pp-hover);
    color: var(--pp-ink);
    outline: 0;
}

html.pie-premium .pp-shell.pp-planner .pp-shp-ti .pp-shp-dd-list button.on {
    background: var(--pp-acc-soft);
    color: var(--pp-acc);
    font-family: var(--pp-bold);
}

/* While the banner's menu / share popover is open it is lifted over the planner's sticky toolbar
   (z-index 8, pie-premium.css), which tied with the fixed app top bar (also 8) and, coming later in
   the page, painted the Emails / Preview / Share buttons over the top bar once the page scrolled.
   The top bar stays on top while it is open. */
html.pie-premium .pp-shell.pp-planner:has(.pp-bacts.pp-bacts-open) .header-wrapper {
    z-index: 9;
}