/* ==========================================================================
   Package Profile panel — the slide-over behind every tour and taxi card.

   Deliberately the same geometry, motion curve, radius and z-index as
   signature-stays.css, because a visitor who opens a hotel on /luxury-packages
   and a tour on /tour-packages should not be able to tell that two different
   components rendered. Everything is namespaced .pp-* rather than reusing the
   .sig-* classes: the two panels can appear on the SAME page (a destination
   page carries both), and sharing class names would make one component's
   restyle silently redecorate the other.

   Nothing here is scoped to a page's own CSS variables, because these cards
   live on six pages with six different palettes. --pp-accent can be overridden
   per page; the default is the site gold.
   ========================================================================== */

.pp-panelwrap {
    --pp-accent: #B8860B;
    --pp-ink: #0A1628;
    --pp-muted: #6b6b6b;
    --pp-line: #e8e5df;
    --pp-cream: #FAF7F2;

    position: fixed;
    inset: 0;
    z-index: 1200;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--pp-ink);
}
.pp-panelwrap[hidden] { display: none; }

.pp-panelwrap__backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 12, 18, .62);
    opacity: 0; transition: opacity .28s ease;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.pp-panelwrap.is-open .pp-panelwrap__backdrop { opacity: 1; }

.pp-drawer {
    position: absolute; inset: auto 0 0 0; height: 94vh;
    background: #fff; border-radius: 18px 18px 0 0;
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.22, .8, .28, 1);
    box-shadow: 0 -10px 50px rgba(0, 0, 0, .28);
}
.pp-panelwrap.is-open .pp-drawer { transform: translateY(0); }

.pp-drawer__close {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%;
    border: none; background: rgba(255, 255, 255, .94); color: #1a1a1a;
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}
.pp-drawer__close svg { width: 19px; height: 19px; }

.pp-drawer__scroll {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}

.pp-drawer__cta {
    flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pp-line); background: #fff;
}
.pp-drawer__cta[hidden] { display: none; }

/* The price rides the sticky bar so it never scrolls out of view — the number
   is the thing a comparing visitor keeps looking back at. */
.pp-ctaprice { flex: 0 0 auto; line-height: 1.15; margin-right: 2px; }
.pp-ctaprice__lbl {
    display: block; font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--pp-muted); font-weight: 700;
}
.pp-ctaprice__val {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px; font-weight: 700; color: var(--pp-ink);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pp-hero { position: relative; aspect-ratio: 16 / 10; background: #ece8e1; }
.pp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-hero__plate {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 58px;
    background: linear-gradient(135deg, #1a3a6e 0%, #0A1628 100%);
}
.pp-hero__badges {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.pp-badge {
    background: var(--pp-accent); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.pp-hero__dur {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    background: rgba(10, 22, 40, .82); color: #fff;
    font-size: 11.5px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.pp-body { padding: 20px 18px 28px; }

.pp-eyebrow {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--pp-accent); font-weight: 700; margin: 0 0 6px;
}
.pp-eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.pp-body h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(21px, 5.2vw, 29px); line-height: 1.22;
    margin: 0 0 10px; font-weight: 700;
}

.pp-priceline {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--pp-line);
}
.pp-priceline__now {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px; font-weight: 700; color: var(--pp-ink);
}
.pp-priceline__was { font-size: 14px; color: var(--pp-muted); text-decoration: line-through; }
.pp-priceline__unit { font-size: 12px; color: var(--pp-muted); }
.pp-priceline__off {
    background: #eaf7ee; color: #1d7a3c; border: 1px solid #cbe9d5;
    font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}
.pp-pricenote {
    font-size: 11.5px; color: var(--pp-muted); line-height: 1.5;
    flex: 1 0 100%; margin: 0;
}

.pp-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; }
.pp-route__city {
    display: inline-flex; align-items: baseline; gap: 4px;
    background: var(--pp-cream); border: 1px solid #E8C96A; color: #0F2044;
    font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
}
.pp-route__n { color: var(--pp-accent); font-weight: 800; }
.pp-route__sep { color: #c9c3b8; font-size: 12px; }

.pp-prose { font-size: 14.5px; line-height: 1.75; color: #333; margin: 0 0 22px; white-space: pre-line; }

.pp-h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px; margin: 0 0 11px; font-weight: 700;
}

/* Gallery */
.pp-gal {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 0 0 24px;
    scroll-snap-type: x proximity; scrollbar-width: none;
}
.pp-gal::-webkit-scrollbar { display: none; }
.pp-gal__item {
    flex: 0 0 68%; scroll-snap-align: start;
    border: 0; padding: 0; margin: 0; background: #ece8e1;
    border-radius: 10px; overflow: hidden; cursor: zoom-in;
    aspect-ratio: 3 / 2; position: relative;
}
.pp-gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Itinerary */
.pp-days { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.pp-day {
    border: 1px solid var(--pp-line); border-left: 3px solid var(--pp-accent);
    border-radius: 0 10px 10px 0; padding: 12px 14px; background: #fdfcfa;
}
.pp-day__n {
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 800; color: var(--pp-accent); margin: 0 0 4px;
}
.pp-day__t { font-size: 14.5px; font-weight: 700; margin: 0 0 5px; }
.pp-day__b { font-size: 13px; line-height: 1.6; color: #5c5c5c; margin: 0; }

.pp-more {
    display: inline-block; margin: 0 0 24px;
    font-size: 13px; font-weight: 700; color: var(--pp-accent);
    text-decoration: none; border-bottom: 1px solid currentColor;
}

/* Vehicles / routes */
.pp-vehs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 24px; }
.pp-veh {
    border: 1px solid var(--pp-line); border-radius: 10px;
    padding: 11px 12px; background: #fdfcfa;
}
.pp-veh__n { display: block; font-size: 13px; font-weight: 700; }
.pp-veh__s { font-size: 11px; color: var(--pp-muted); }
.pp-veh__p { font-size: 14px; font-weight: 800; color: var(--pp-accent); margin-top: 3px; }

.pp-routes { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 6px; }
.pp-routes li {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; padding: 9px 12px;
    background: var(--pp-cream); border-radius: 8px;
}
.pp-routes b { font-weight: 800; color: var(--pp-accent); white-space: nowrap; }

/* Inclusions / exclusions */
.pp-lists { display: grid; gap: 18px; margin: 0 0 24px; }
.pp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.pp-list li {
    position: relative; padding-left: 24px;
    font-size: 13.5px; line-height: 1.55; color: #3a3a3a;
}
.pp-list--in li::before {
    content: '✓'; position: absolute; left: 3px; top: -1px;
    color: #1d7a3c; font-weight: 800;
}
.pp-list--out li::before {
    content: '×'; position: absolute; left: 4px; top: -2px;
    color: #b3261e; font-weight: 800; font-size: 16px;
}

/* FAQ */
.pp-faq {
    border: 1px solid var(--pp-line); border-radius: 10px;
    padding: 12px 14px; margin: 0 0 8px; background: #fff;
}
.pp-faq summary { font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pp-faq p { font-size: 13px; line-height: 1.65; color: #5c5c5c; margin: 9px 0 0; }

/* ── Enquiry form ─────────────────────────────────────────────────────── */
.pp-enq {
    border: 1px solid #e4dcc6; border-radius: 14px; overflow: hidden;
    background: linear-gradient(180deg, #fffdf7 0%, #fbf7ea 100%);
    margin: 26px 0 4px;
}
.pp-enq__head { padding: 18px 16px 0; }
.pp-enq__head h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px; margin: 0 0 8px; font-weight: 700;
}
.pp-enq__promise { font-size: 13.5px; line-height: 1.65; color: #5a5344; margin: 0 0 14px; }
.pp-enq__list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 7px; }
.pp-enq__list li {
    position: relative; padding-left: 24px;
    font-size: 13.5px; color: #4a4436; line-height: 1.5;
}
.pp-enq__list li::before {
    content: '✓'; position: absolute; left: 3px; top: -1px;
    color: var(--pp-accent); font-weight: 700;
}

.pp-form { padding: 0 16px 18px; display: grid; gap: 10px; }
.pp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-form label {
    display: block; font-size: 11.5px; font-weight: 600;
    color: var(--pp-muted); margin-bottom: 4px; letter-spacing: .03em;
}
.pp-form input, .pp-form select {
    width: 100%; padding: 11px 12px;
    border: 1px solid #ddd6c6; border-radius: 9px;
    font-size: 15px; font-family: inherit; background: #fff; color: #1a1a1a;
}
.pp-form input:focus, .pp-form select:focus {
    outline: 2px solid var(--pp-accent); outline-offset: 1px; border-color: transparent;
}
/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.pp-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pp-form__err { font-size: 12.5px; color: #b3261e; margin: 0; }
.pp-form__fine { font-size: 11.5px; color: #8a8a8a; margin: 2px 0 0; line-height: 1.5; }

.pp-done {
    border: 1px solid #d8e8d4; background: #f4faf2; border-radius: 14px;
    padding: 18px 16px; margin: 26px 0 4px;
}
.pp-done h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; margin: 0 0 8px; }
.pp-done p { font-size: 13.5px; line-height: 1.65; color: #40483d; margin: 0 0 8px; }
.pp-done p:last-child { margin-bottom: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 13px 18px; border-radius: 10px; border: 1px solid transparent;
    font-size: 14.5px; font-weight: 700; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: filter .18s, background .18s;
}
.pp-btn--primary { flex: 1; background: var(--pp-accent); color: #fff; }
.pp-btn--primary:hover { filter: brightness(1.08); }
.pp-btn--primary[disabled] { opacity: .6; cursor: progress; }
.pp-btn--ghost { background: #fff; border-color: var(--pp-line); color: var(--pp-ink); }
.pp-btn--wa { background: #25D366; color: #fff; flex: 0 0 auto; padding: 13px 14px; }
.pp-btn--call { background: var(--pp-ink); color: #fff; flex: 0 0 auto; padding: 13px 14px; }
.pp-btn--block { width: 100%; }

.pp-drawer__close:focus-visible,
.pp-btn:focus-visible,
.pp-gal__item:focus-visible {
    outline: 2px solid var(--pp-accent); outline-offset: 3px; border-radius: 8px;
}

/* Any card wired to the panel gets the affordance, whatever page it is on. */
[data-pkg-open] { cursor: pointer; }

/* ── Skeleton / error ─────────────────────────────────────────────────── */
.pp-skel { padding: 0 0 24px; }
.pp-skel__hero { aspect-ratio: 16 / 10; background: #eeeae3; }
.pp-skel__line { height: 14px; margin: 14px 18px; border-radius: 6px; background: #eeeae3; }
.pp-skel__line--lg { height: 26px; width: 62%; }
.pp-skel__line--sm { width: 40%; }
.pp-skel__hero, .pp-skel__line { animation: ppPulse 1.4s ease-in-out infinite; }
@keyframes ppPulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

.pp-drawer__error { padding: 40px 20px; text-align: center; }
.pp-drawer__error[hidden] { display: none; }
.pp-drawer__error p { font-size: 15px; color: var(--pp-muted); margin: 0 0 14px; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.pp-lightbox {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(10, 9, 8, .95);
    display: grid; place-items: center; padding: 20px;
}
.pp-lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; }
.pp-lightbox__close {
    position: absolute; top: 16px; right: 16px;
    width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 22px; cursor: pointer; line-height: 1;
}

/* ── Larger screens — side drawer, matching Signature Stays exactly ───── */
@media (min-width: 640px) {
    .pp-drawer {
        inset: 0 0 0 auto; width: min(560px, 100%); height: 100%;
        border-radius: 0; transform: translateX(100%);
    }
    .pp-panelwrap.is-open .pp-drawer { transform: translateX(0); }
    .pp-body { padding: 26px 30px 34px; }
    .pp-drawer__cta { padding: 14px 30px; }
    .pp-enq__head, .pp-form { padding-left: 20px; padding-right: 20px; }
    .pp-gal__item { flex-basis: 44%; }
    .pp-lists { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .pp-drawer { width: 620px; }
    .pp-gal__item { flex-basis: 32%; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-drawer, .pp-panelwrap__backdrop { transition: none; }
    .pp-skel__hero, .pp-skel__line { animation: none; }
}