/* ==========================================================================
   BRAND — maps Settings → Branding tokens onto every page design.
   Loaded LAST so these win over page stylesheets.
     --tp       Primary    links, eyebrows, active states, focus rings, chips
     --tp-2     Secondary  second stop of every brand gradient
     --tp-acc   Accent     discount / hot tags, badges, offer labels, chapter chips
     --tp-btn   Buttons    every primary call-to-action button
   (*-ink = auto-picked readable text colour for that background)
   ========================================================================== */
body { --tp-btn-2: color-mix(in srgb, var(--tp-btn) 74%, #000); }

/* ---------- Buttons ---------- */
.btn-tp, .gbtn, .ax-btn, .sx-go, .dx-btn-tp, .dx-bar-tp, .hx-fab-main {
  background: linear-gradient(135deg, var(--tp-btn), var(--tp-btn-2)) !important;
  color: var(--tp-btn-ink) !important;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--tp-btn) 75%, transparent);
}
.btn-tp:hover, .btn-tp:focus { color: var(--tp-btn-ink) !important; }
.cx-cta:hover, .cx-card:hover .cx-cta, .hx-cta:hover, .hx-btn-light:hover, .dx-btn-light:hover, .dx-go:hover, .dx-pkc:hover .dx-go {
  background: var(--tp-btn) !important; color: var(--tp-btn-ink) !important;
}
.hx-journeys .hx-cta, .hx-finale-form .hx-btn-light { background: var(--tp-btn); color: var(--tp-btn-ink); }
.hx-finale-form .hx-btn-light:hover { background: var(--tp-btn-2); color: var(--tp-btn-ink); }
.bk-btn, .co-btn, .co-pay-btn { background: linear-gradient(135deg, var(--tp-btn), var(--tp-btn-2)); color: var(--tp-btn-ink); }

/* ---------- Accent ---------- */
.hx-tag-hot, .hx-ticket-kind em, .hx-mode-l em, .hx-quick-i em, .cx-chip.cx-hot, .dx-tag.is-hot {
  background: var(--tp-acc) !important; color: var(--tp-acc-ink) !important; border-color: transparent !important;
}
body .pkg-card .badge-flash, body .badge-flash { background: var(--tp-acc) !important; color: var(--tp-acc-ink) !important; }
.hx-offer-k, .hx-offer-end { color: var(--tp-acc); }
.hx-eyebrow .hx-chap { color: var(--tp-acc); border-color: color-mix(in srgb, var(--tp-acc) 70%, transparent); }
.hx-code { border-color: var(--tp-acc); color: color-mix(in srgb, var(--tp-acc) 70%, #1a1a1a); background: color-mix(in srgb, var(--tp-acc) 8%, #fff); }
.hx-avail.req, .hx-stay-avail.req { color: color-mix(in srgb, var(--tp-acc) 80%, #7a3d00); }
.sx mark { background: color-mix(in srgb, var(--tp-acc) 26%, transparent); }

/* ---------- Secondary (gradient partner) ---------- */
.hx-m-trigger-ic, .ax-head-ic, .dx-plan-ic { background: linear-gradient(135deg, var(--tp), var(--tp-2)); }
/* badges ("Featured", "Limited seats", "Popular") follow the Accent colour */
.hx-badge, .hx-tag-gold, .cx-chip.cx-gold, .dx-tag.is-gold, .dx-badges .is-gold, .hx-atlas-badge, .ax-badge {
  background: var(--tp-acc) !important; color: var(--tp-acc-ink) !important; border-color: transparent !important;
}

/* ==========================================================================
   PACKAGE CARD TEMPLATES — Settings → "Package Card Template" (pkgc-t1…10)
   Applies to every package card: listing, destination page, search, legacy.
   ========================================================================== */
/* 1 · Classic — default */
/* 2 · Sharp — crisp small radius */
.pkgc-t2 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { --cx-r: 8px; border-radius: 8px !important; }
.pkgc-t2 :is(.dx-pkc-media, .sx-media) { border-radius: 0; }
/* 3 · Outline — flat, bordered, brand border on hover */
.pkgc-t3 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { box-shadow: none !important; border: 1.5px solid #e3e7ef !important; }
.pkgc-t3 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card):hover { border-color: var(--tp) !important; transform: none !important; }
/* 4 · Soft inset — rounded card with an inset, rounded photo */
.pkgc-t4 :is(.cx-is-pkg, .dx-pkc, .sx-pkc) { --cx-r: 30px; border-radius: 30px !important; padding: 10px; }
.pkgc-t4 :is(.cx-is-pkg .cx-media, .dx-pkc-media, .sx-media) { border-radius: 22px !important; }
.pkgc-t4 .pkg-card { border-radius: 28px !important; }
/* 5 · Dark — night card, light type */
.pkgc-t5 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { background: #101a2e !important; border-color: #1c2b45 !important; --cx-ink: #fff; --cx-sub: #9fb0cc; --cx-mute: #7d8db0; --cx-line: #1f2d48; --sx-ink: #fff; --dx-ink: #fff; }
.pkgc-t5 :is(.cx-is-pkg .cx-title, .dx-pkc-t a, .sx-pkc-t, .pkg-card h5 a, .pkg-card h6 a) { color: #fff !important; }
.pkgc-t5 :is(.dx-hl li, .sx-price small, .dx-price small) { color: #9fb0cc; }
.pkgc-t5 :is(.dx-price b, .sx-price b) { color: #fff; }
.pkgc-t5 :is(.dx-pkc-f, .sx-pkc-f) { border-top-color: #22314f; }
.pkgc-t5 .dx-go { background: #fff; color: #101a2e !important; }
/* 6 · Elevated — borderless with a deep floating shadow */
.pkgc-t6 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { border: 0 !important; box-shadow: 0 24px 50px -22px rgba(20,40,80,.35) !important; }
.pkgc-t6 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card):hover { transform: translate3d(0, -10px, 0) !important; box-shadow: 0 40px 70px -26px rgba(20,40,80,.45) !important; }
/* 7 · Tinted — body washed in the Primary colour */
.pkgc-t7 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { background: color-mix(in srgb, var(--tp) 7%, #fff) !important; border-color: color-mix(in srgb, var(--tp) 18%, #fff) !important; }
/* 8 · Minimal — no card chrome, photo + text only */
.pkgc-t8 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.pkgc-t8 :is(.cx-is-pkg .cx-media, .dx-pkc-media, .sx-media) { border-radius: 20px !important; }
.pkgc-t8 :is(.cx-is-pkg .cx-body, .dx-pkc-b, .sx-pkc-b) { padding-left: 4px; padding-right: 4px; }
.pkgc-t8 :is(.cx-is-pkg, .dx-pkc, .sx-pkc):hover { transform: none !important; }
/* 9 · Accent bar — gradient top rule + accent price */
.pkgc-t9 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { border-top: 4px solid transparent !important; border-image: linear-gradient(90deg, var(--tp), var(--tp-2)) 1 !important; border-radius: 6px !important; --cx-r: 6px; overflow: hidden; }
.pkgc-t9 :is(.cx-is-pkg .cx-price b, .dx-price b, .sx-price b, .pkg-card .from) { color: color-mix(in srgb, var(--tp-acc) 85%, #3a1d00) !important; }
/* 10 · Gradient frame — brand gradient border */
.pkgc-t10 :is(.cx-is-pkg, .dx-pkc, .sx-pkc, .pkg-card) { border: 2px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--tp), var(--tp-2), var(--tp-acc)) border-box !important; }

/* Header 5 (glass overlay) is position:fixed — keep page content clear of it,
   except on the homepage where the cinematic hero is meant to sit underneath */
body.hdr-t5 { padding-top: 66px; }
body.hdr-t5:has(.hx-hero) { padding-top: 0; }
body.hdr-t5 .hx-hero { margin-top: 0; }
@media (max-width: 767.98px) { body.hdr-t5 { padding-top: 57px; } body.hdr-t5:has(.hx-hero) { padding-top: 0; } }
/* Header 6 (floating pill): on the homepage let the hero run underneath the pill */
@media (min-width: 768px) { body.hdr-t6 .hx-hero { margin-top: calc(-1 * var(--hx-hdr)); height: clamp(600px, 100svh, 960px); } }
/* dark package card (template 5): CTA stays visible (white pill, dark text) */
.pkgc-t5 .cx-is-pkg:not(:hover) .cx-cta { background: #fff !important; color: #101a2e !important; }