/* Package page layout v3 (tools/build-packages.py): photo mosaic, options card with duration tiles and a live
   estimated price, itinerary accordion, tinted inclusion/exclusion cards, sticky price card.
   Site palette: white, ash, black, blue #2f5d8a. Site fonts. */

.pk5 { --c-blue: #2f5d8a; --c-blue-50: #eef4fa; --c-ash: #f3f4f5; --c-line: #e3e6ea; --c-muted: #5b6470; --c-ok: #1f7a4d; --c-ok-50: #eef8f2; --c-no: #b42318; --c-no-50: #fdf1f0; --r: 14px; color: #111; }
.pk5 h1, .pk5 h2, .pk5 h3 { font-family: inherit !important; letter-spacing: 0 !important; }
.pk5-wrap { max-width: 1200px; margin: 0 auto; padding: var(--s4) var(--gut) 0; }

/* Photo mosaic */
.pk5-mosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: clamp(300px, 34vw, 440px); }
.pk5-mosaic figure { margin: 0; overflow: hidden; border-radius: 12px; background: var(--c-ash); }
.pk5-mosaic figure:first-child { grid-row: 1 / span 2; }
.pk5-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.pk5-mosaic figure:hover img { transform: scale(1.03); }
.pk5-count { display: none; }

/* Grid: content + sticky price card */
.pk5-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: var(--s5); }
.pk5-main { display: grid; gap: var(--s4); min-width: 0; }

.pk5-head h1 { margin: 0 0 var(--s3) !important; font-size: clamp(24px, 1rem + 1vw, 32px) !important; font-weight: 700 !important; line-height: 1.2 !important; }
.pk5-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.pk5-pill { padding: 5px 12px; border-radius: 999px; background: var(--c-blue); color: #fff; font-size: 13px; font-weight: 700; }
.pk5-in { display: flex; flex-wrap: wrap; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.pk5-in li { display: flex; align-items: center; gap: 6px; }
.pk5-in b { font-size: 26px; line-height: 1; color: #b9bec5; }
.pk5-in span { font-size: 12px; line-height: 1.15; color: var(--c-muted); }
.pk5-crumbs { margin-top: var(--s3); font-size: 13px; color: var(--c-muted); }
.pk5-crumbs a { color: var(--c-muted); text-decoration: none; }
.pk5-crumbs a:hover { color: #111; }
.pk5-crumbs span { margin: 0 6px; }

/* Cards */
.pk5-card { padding: var(--s5); border-radius: var(--r); background: #fff; border: 1px solid var(--c-line); }
.pk5-card h2 { margin: 0 0 var(--s4) !important; font-size: 22px !important; font-weight: 700 !important; }
.pk5-card-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.pk5-card-h h2 { margin: 0 !important; }
.pk5-hl { background: var(--c-blue-50); border-color: transparent; }
.pk5-hl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.pk5-hl li { position: relative; padding-left: 26px; line-height: 1.5; }
.pk5-hl li::before { content: "→"; position: absolute; left: 0; color: var(--c-blue); font-weight: 700; }

/* Package options */
.pk5-opts { background: var(--c-ash); border-color: transparent; }
.pk5-opts form h3 { margin: var(--s4) 0 var(--s2) !important; font-size: 15px !important; font-weight: 700 !important; }
.pk5-opts form h3:first-child { margin-top: 0 !important; }
.pk5-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pk5-chip { min-height: 40px; padding: 0 var(--s4); border: 1px solid #d3d7dc; border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
.pk5-chip:hover { border-color: var(--c-blue); }
.pk5-chip[aria-pressed="true"] { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.pk5-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.pk5-tile { display: grid; gap: 2px; width: 104px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: #111; }
.pk5-tile-img { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 2px solid transparent; }
.pk5-tile[aria-pressed="true"] .pk5-tile-img { border-color: var(--c-blue); box-shadow: 0 0 0 2px #fff inset; }
.pk5-tile-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pk5-tile-img b { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.pk5-tile small { margin-top: 4px; font-size: 11px; color: var(--c-muted); }
.pk5-tile-price { font-size: 14px; font-weight: 700; }
.pk5-select { min-height: 42px; padding: 0 var(--s3); border: 1px solid #d3d7dc; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: #111; }
.pk5-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pk5-group { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: 10px; background: #fff; border: 1px solid #d3d7dc; }
.pk5-group.is-on { border: 2px solid var(--c-blue); }
.pk5-group span { display: grid; }
.pk5-group small { color: var(--c-muted); font-size: 12px; }
.pk5-group > i:first-child { color: var(--c-blue); }
.pk5-tick { margin-left: auto; color: var(--c-blue); }
.pk5-step { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid #d3d7dc; }
.pk5-step button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--c-ash); font-size: 20px; cursor: pointer; }
.pk5-step output { min-width: 28px; text-align: center; font-weight: 700; }
.pk5-step span { margin-right: 8px; color: var(--c-muted); font-size: 14px; }
.pk5-extras { margin-top: var(--s4); }
.pk5-extras summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--c-blue); list-style: none; }
.pk5-extras summary::-webkit-details-marker { display: none; }
.pk5-extras summary::before { content: "+ "; }
.pk5-extras[open] summary::before { content: "– "; }
.pk5-extras small { color: var(--c-muted); font-weight: 400; }
.pk5-ticks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.pk5-tickbox { position: relative; }
.pk5-tickbox input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pk5-tickbox span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--s3) 0 32px; border-radius: 10px; border: 1px solid #d3d7dc; background: #fff; font-size: 14px; position: relative; }
.pk5-tickbox span::before { content: ""; position: absolute; left: 10px; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #8a929c; }
.pk5-tickbox input:checked + span { border-color: var(--c-blue); }
.pk5-tickbox input:checked + span::before { background: var(--c-blue); border-color: var(--c-blue); box-shadow: inset 0 0 0 3px #fff; }
.pk5-chip:focus-visible, .pk5-tile:focus-visible .pk5-tile-img, .pk5-step button:focus-visible, .pk5-select:focus-visible, .pk5-tickbox input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.pk5-est { margin-top: var(--s5); padding: var(--s4); border-radius: 12px; background: #fff; border: 1px solid #d3d7dc; }
.pk5-est p { margin: 0; }
.pk5-est-l { font-weight: 700; font-size: 14px; }
.pk5-est-p strong { font-size: 30px; color: var(--c-blue); display: inline-block; }
.pk5-est-p strong.is-new { animation: pk5-pop .35s ease; }
@keyframes pk5-pop { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pk5-est-p span { color: var(--c-muted); }
.pk5-est-t { font-weight: 700; font-size: 14px; }
.pk5-est-n { margin-top: var(--s2) !important; font-size: 12.5px; color: var(--c-muted); line-height: 1.45; }
.is-loading + .pk5-est .pk5-est-p { opacity: .5; }

/* Itinerary accordion */
.pk5-expand { padding: 6px 12px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pk5-acc { display: grid; gap: 10px; }
.pk5-day { border: 1px solid var(--c-line); border-radius: 12px; background: #fff; }
.pk5-day summary { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; list-style: none; font-weight: 700; }
.pk5-day summary::-webkit-details-marker { display: none; }
.pk5-day summary::after { content: "⌄"; margin-left: auto; color: var(--c-muted); transition: transform .2s; }
.pk5-day[open] summary::after { transform: rotate(180deg); }
.pk5-badge { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--c-blue); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.pk5-day-t { line-height: 1.35; }
.pk5-day-body { padding: 0 var(--s4) var(--s4); }
.pk5-day-body > p { margin: 0 0 var(--s3); line-height: 1.6; color: #2b3038; }
.pk5-acts { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 8px; }
.pk5-acts li { display: flex; align-items: center; gap: var(--s3); padding: 8px; border: 1px solid var(--c-line); border-radius: 10px; }
.pk5-acts img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.pk5-acts span { display: grid; }
.pk5-acts b { font-size: 14px; }
.pk5-acts small { font-size: 12.5px; color: var(--c-muted); line-height: 1.35; }
.pk5-night { margin: 0; font-size: 13px; color: var(--c-muted); }

/* Inclusions / exclusions / nutshell / notes */
.pk5-inc { background: var(--c-ok-50); border-color: transparent; }
.pk5-exc { background: var(--c-no-50); border-color: transparent; }
.pk5-inc ul, .pk5-exc ul, .pk5-know ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pk5-inc li, .pk5-exc li { position: relative; padding-left: 28px; line-height: 1.5; }
.pk5-inc li::before, .pk5-exc li::before { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.pk5-inc li::before { content: "✓"; background: var(--c-ok); }
.pk5-exc li::before { content: "✕"; background: var(--c-no); }
.pk5-nut { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: 0; }
.pk5-nut dt { font-weight: 700; }
.pk5-nut dd { margin: 2px 0 0; color: var(--c-muted); }
.pk5-know li { position: relative; padding-left: 18px; line-height: 1.5; }
.pk5-know li::before { content: "•"; position: absolute; left: 4px; color: var(--c-blue); }
.pk2-muted { margin: 0 0 var(--s2); color: var(--c-muted); }
.pk2-hotel-list { list-style: none; margin: 0; padding: 0; }
.pk2-hotel-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--c-line); }
.pk2-cancel { margin: 0 0 var(--s2); }
.pk2-cancel div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--c-line); }
.pk2-cancel dt { font-weight: 700; }
.pk2-cancel dd { margin: 0; }
.pk2-faq details { border-top: 1px solid var(--c-line); }
.pk2-faq summary { display: flex; justify-content: space-between; gap: var(--s3); padding: 12px 0; cursor: pointer; font-weight: 700; list-style: none; }
.pk2-faq summary::-webkit-details-marker { display: none; }
.pk2-faq summary::after { content: "+"; color: var(--c-blue); }
.pk2-faq details[open] summary::after { content: "–"; }
.pk2-faq p { margin: 0 0 12px; line-height: 1.55; color: #2b3038; }

/* Sticky price card */
.pk5-side { position: sticky; top: calc(var(--header-h, 72px) + 16px); }
.pk5-price { display: grid; gap: 10px; background: var(--c-ash); border-color: transparent; }
.pk5-price p { margin: 0; }
.pk5-price-meta { display: flex; gap: var(--s4); font-size: 13px; color: var(--c-muted); }
.pk5-price-p strong { font-size: 28px; }
.pk5-price-p span { color: var(--c-muted); }
.pk5-price-t { font-size: 13px; font-weight: 600; }
.pk5-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none !important; }
a.pk5-btn.pk5-btn-solid { background: var(--c-blue) !important; color: #fff !important; }
a.pk5-btn.pk5-btn-solid:hover { background: #244a6f !important; }
a.pk5-btn.pk5-btn-line { background: #fff !important; color: #111 !important; border: 1px solid #d3d7dc; }
.pk5-trust { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--c-muted); }
.pk5-trust i { width: 16px; color: var(--c-blue); }

.pk5-more { margin-top: var(--sec); }
.pk5-more h2 { font-size: 22px !important; margin: 0 0 var(--s4) !important; }
.pk5-city { display: inline-block; margin-top: var(--s4); font-weight: 700; color: var(--c-blue); }
.pk5-bar { display: none; }

@media (max-width: 960px) {
  .pk5-grid { grid-template-columns: minmax(0, 1fr); }
  .pk5-side { display: none; }
}
@media (max-width: 640px) {
  .pk5-wrap { padding-top: 0; }
  .pk5-mosaic { display: flex; height: 260px; margin: 0 calc(-1 * var(--gut)); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pk5-mosaic::-webkit-scrollbar { display: none; }
  .pk5-mosaic figure { flex: 0 0 100%; border-radius: 0; scroll-snap-align: start; }
  .pk5-count { display: block; position: absolute; right: 12px; bottom: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; position: sticky; margin-left: -60px; align-self: flex-end; margin-bottom: 12px; }
  .pk5-card { padding: var(--s4); }
  .pk5-opts { margin: 0 calc(-1 * var(--gut)); border-radius: 0; padding: var(--s5) var(--gut); }
  .pk5-tile { width: calc((100% - 20px) / 3); }
  .pk5-groups { grid-template-columns: minmax(0, 1fr); }
  .pk5-nut { grid-template-columns: minmax(0, 1fr); }
  .pk2-cancel div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pk5-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); transition: transform .2s; }
  .pk5-bar.is-hidden { transform: translateY(110%); }
  .pk5-bar span { display: grid; line-height: 1.15; }
  .pk5-bar strong { font-size: 20px; }
  .pk5-bar small { font-size: 12px; color: var(--c-muted); }
  .pk5-bar .pk5-btn { padding: 0 var(--s5); }
  body:has(.pk5-bar:not(.is-hidden)) .floating-whatsapp, body:has(.pk5-bar:not(.is-hidden)) .whatsapp-floating-wrap { display: none !important; }
}
.pk5-tile[hidden] { display: none !important; }
.pk5-bar { --c-blue: #2f5d8a; --c-line: #e3e6ea; --c-muted: #5b6470; }

/* v6: v3 head + tiles on top of the earlier price panel and plan (package-v2.css) */
.pk6 { --c-blue: #2f5d8a; --c-blue-50: #eef4fa; --c-ash: #f3f4f5; --c-line: #e3e6ea; --c-muted: #5b6470; --r: 14px; }
.pk6-top { display: grid; gap: var(--s4); padding: var(--s4) var(--gut) var(--s5); }
.pk6 .pk5-head h1, .pk6 .pk5-hl h2 { font-family: inherit !important; letter-spacing: 0 !important; }
.pk6 .pk5-head h1 { margin: 0 0 var(--s3) !important; }
.pk6 .pk5-hl h2 { font-size: 22px !important; margin: 0 0 var(--s4) !important; }
.pk6-wide { grid-column: 1 / -1; }
.pk6 .pk5-tile { width: 112px; }
.pk6 .pk5-tile-img { border-width: 2px; }
.pk6 .pk5-tile[aria-pressed="true"] .pk5-tile-img { border-color: #111; }
@media (max-width: 640px) {
  .pk6-top { padding-top: 0; }
  .pk6 .pk5-tile { width: calc((100% - 20px) / 3); }
}