/* 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: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25), 0 0 0 1px var(--pp-line);
    color: var(--pp-ink);
    font-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);
}
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;
    }
}