/*
 * Outfitter Listings — shared fixes for the four package single designs.
 *
 * Loaded AFTER each per-type single-{design}.css (declared as a dependency) so
 * these corrections win. Everything is scoped under .pkg-single, so nothing
 * here can leak into the rest of the site.
 */

/* --- Icon sizing -------------------------------------------------------- *
 * The per-type CSS sizes the .ic wrapper (24/26/30/38px), but a bare
 * <span class="ic"> is display:inline and ignores width/height. Combined with
 * the active theme's global  svg { max-width:100%; height:auto }  reset, the
 * icon then balloons to the full tile width (see the Weather & Region grid).
 * Make every icon wrapper a real, fixed box and force its SVG to fill it. */
.pkg-single .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.pkg-single .ic > svg,
.pkg-single .ic > .ofl-ic {
  width: 100%;
  height: 100%;
  display: block;
}

/* Belt-and-braces: no package icon should ever exceed its wrapper, whatever
 * the theme's svg reset does. */
.pkg-single .ic > svg {
  max-width: 100%;
  max-height: 100%;
}

/* --- Book Now button ---------------------------------------------------- *
 * The booking CTA in the sticky rail is now an <a> (it used to be a <button>),
 * so its width:100% needs an explicit display to take effect — otherwise it
 * collapses to a small inline link. Make it a full-width, centered button and
 * pin the little arrow icon. */
.pkg-single .book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pkg-single .book-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* --- Follow the site Skin ----------------------------------------------- *
 * Each design stores its palette as CSS variables; here we re-point those
 * variables at the theme's Skin tokens (tokens.css [data-variant] + the Brand
 * Settings custom-skin overrides), keeping the original design value as a
 * fallback. Loaded after each design sheet, so these win. Result: the package
 * pages restyle when the Skin changes, and stay consistent across all types,
 * while every design's layout is untouched. Text tints derive from the Skin's
 * text/background so they stay readable on any Skin (incl. light↔dark swaps). */

/* Hunting */
.pkg-hunting {
  --ink: var(--color-bg, #0c0d09);
  --soot: var(--color-surface, #14160f);
  --soot-2: color-mix(in srgb, var(--color-surface, #14160f), var(--color-text, #e8dfc9) 8%);
  --card: var(--color-surface, #15170f);
  --bone: var(--color-text, #e8dfc9);
  --bone-2: color-mix(in srgb, var(--color-text, #e8dfc9) 85%, var(--color-bg, #0c0d09));
  --bone-dim: color-mix(in srgb, var(--color-text, #e8dfc9) 66%, var(--color-bg, #0c0d09));
  --bone-soft: var(--color-bone-50, rgba(232, 223, 201, 0.5));
  --moss: var(--color-primary, #2b3322);
  --moss-2: var(--color-secondary, #3d4830);
  --moss-deep: var(--color-canvas, #1a2014);
  --pine: color-mix(in srgb, var(--color-secondary, #3d4830), var(--color-text, #e8dfc9) 18%);
  --ember: var(--color-accent, #d96a2c);
  --rust: var(--color-accent-hover, #b3501e);
  --gold: var(--color-warm, #c89b3c);
  --blood: color-mix(in srgb, var(--color-accent-hover, #b3501e), #000 32%);
  --line: var(--color-line, rgba(232, 223, 201, 0.13));
  --line-2: color-mix(in srgb, var(--color-text, #e8dfc9) 22%, transparent);
}

/* Fishing */
.pkg-fishing {
  --abyss: var(--color-bg, #06161a);
  --deep: var(--color-surface, #0a2127);
  --petrol: var(--color-canvas, #0f2d34);
  --petrol-2: var(--color-primary, #143a43);
  --teal: color-mix(in srgb, var(--color-primary, #143a43), var(--color-secondary, #3f857c) 30%);
  --verdigris: var(--color-secondary, #3f857c);
  --card: var(--color-surface, #0c2229);
  --foam: var(--color-text, #eef3ee);
  --foam-2: color-mix(in srgb, var(--color-text, #eef3ee) 82%, var(--color-bg, #06161a));
  --mist: color-mix(in srgb, var(--color-text, #eef3ee) 62%, var(--color-bg, #06161a));
  --mist-dim: var(--color-bone-50, rgba(238, 243, 238, 0.5));
  --brass: var(--color-accent, #c9a24a);
  --brass-br: color-mix(in srgb, var(--color-accent, #c9a24a), #fff 22%);
  --copper: var(--color-warm, #bd7440);
  --line: var(--color-line, rgba(238, 243, 238, 0.12));
  --line-2: color-mix(in srgb, var(--color-text, #eef3ee) 20%, transparent);
}

/* Lodging + Experiences (shared cream design) */
.pkg-lodging,
.pkg-experiences {
  --cream: var(--color-bg, #efe6d3);
  --cream-2: var(--color-canvas, #e6dac2);
  --cream-3: color-mix(in srgb, var(--color-canvas, #e6dac2), var(--color-text, #241f17) 10%);
  --card: var(--color-surface, #fbf6ea);
  --bone: var(--color-on-accent, #f7f3ea);
  --ink: var(--color-text, #241f17);
  --ink-2: color-mix(in srgb, var(--color-text, #241f17) 75%, var(--color-bg, #efe6d3));
  --ink-3: color-mix(in srgb, var(--color-text, #241f17) 55%, var(--color-bg, #efe6d3));
  --pine: var(--color-primary, #2f4733);
  --pine-2: color-mix(in srgb, var(--color-primary, #2f4733), #fff 10%);
  --pine-deep: var(--color-secondary, #1d2c1a);
  --pine-soft: color-mix(in srgb, var(--color-primary, #2f4733), #fff 18%);
  --clay: var(--color-accent, #9e4828);
  --clay-2: var(--color-accent-hover, #84381e);
  --clay-soft: color-mix(in srgb, var(--color-accent, #9e4828), #fff 22%);
  --ochre: var(--color-warm, #b3812f);
  --ochre-2: color-mix(in srgb, var(--color-warm, #b3812f), #fff 14%);
  --line: var(--color-line, rgba(36, 31, 23, 0.14));
  --line-2: color-mix(in srgb, var(--color-text, #241f17) 24%, transparent);
}

/* --- Floating sidebar --------------------------------------------------- *
 * The full-bleed wrapper set overflow-x:hidden, which makes it a scroll
 * container and disables position:sticky on the booking rail. overflow-x:clip
 * clips the 100vw bleed identically WITHOUT creating a scroll container, so the
 * rail floats while scrolling on every package type. */
.pkg-single {
  overflow-x: clip;
}

/* --- Lock decorative colors to the Skin (zero per-type variance) --------- *
 * The designs baked a few decorative colors as literals (background "blobs",
 * the final-CTA overlay, the inline-CTA glow, image scrims, the species frame),
 * so those areas didn't follow the Skin. Re-derive them all from the Skin
 * tokens so every package — and every section — matches Brand Settings. */
.pkg-single {
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--color-bg, #0c0d09), var(--color-primary, #2b3322) 22%) 0%, transparent 52%),
    radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--color-bg, #0c0d09), var(--color-accent, #d96a2c) 12%) 0%, transparent 52%),
    var(--color-bg, #0c0d09);
}
/* The final CTA is a darkened-photo hero: a consistent dark scrim + light text on
 * every Skin so the heading/subtext stay legible (the Skin drives the accent). */
.pkg-single .final-bg::after {
  background: linear-gradient(180deg, rgba(12, 14, 16, 0.6), rgba(12, 14, 16, 0.78));
}
.pkg-single .final h2 {
  color: #f5f2ec;
}
.pkg-single .final p {
  color: rgba(245, 242, 236, 0.86);
}
.pkg-single .final h2 em {
  color: var(--color-warm, var(--color-accent));
}
.pkg-single .strip-cta::before {
  background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--color-accent, #d96a2c) 16%, transparent), transparent 60%);
}
/* The "Still Have a Question?" inline CTA is a deliberate dark contrast band in
 * every skin. The two cream designs (experiences, lodging) mis-mapped its title
 * to --color-bg (= the page ground, near-black on the dark skins → invisible
 * heading) and hardcoded the subtext. Point the band + its text at the contrast
 * role group so it is AA on all four skins. (Hunting/fishing already use light
 * on-band tokens, so they are left untouched.) */
.pkg-experiences .strip-cta,
.pkg-lodging .strip-cta {
  background: var(--r-contrast-bg);
}
.pkg-experiences .strip-cta .st-h,
.pkg-lodging .strip-cta .st-h {
  color: var(--r-contrast-ink);
}
.pkg-experiences .strip-cta .st-s,
.pkg-lodging .strip-cta .st-s {
  color: var(--r-contrast-muted);
}
.pkg-single .gallery .g::after {
  background: transparent;
}
.pkg-single .gallery .g:hover::after {
  background: color-mix(in srgb, var(--color-bg, #0c0d09) 14%, transparent);
}
.pkg-single .quarry-img .frame {
  border-color: color-mix(in srgb, var(--color-text, #e8dfc9) 22%, transparent);
}

/* --- Share button feedback --------------------------------------------- */
.pkg-single .tbtn.is-copied {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- Clickable hero gallery (lightbox) --------------------------------- */
.pkg-single .gallery .g img,
.pkg-single .strip .s img,
.pkg-single .room-img img,
.pkg-single .gallery-all {
  cursor: zoom-in;
}

.ofl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
}
.ofl-lightbox.is-open {
  display: flex;
}
.ofl-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.92);
}
.ofl-lb-stage {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 92vw;
  max-height: 88vh;
}
.ofl-lb-img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.ofl-lb-cap {
  margin: 0;
  color: #e8e8e8;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
}
.ofl-lb-close,
.ofl-lb-prev,
.ofl-lb-next {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.ofl-lb-close:hover,
.ofl-lb-prev:hover,
.ofl-lb-next:hover {
  background: rgba(255, 255, 255, 0.24);
}
.ofl-lb-close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}
.ofl-lb-prev,
.ofl-lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
}
.ofl-lb-prev {
  left: 18px;
}
.ofl-lb-next {
  right: 18px;
}
.ofl-lb-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #ddd;
  font-size: 13px;
  letter-spacing: 0.1em;
}
@media (max-width: 600px) {
  .ofl-lb-prev,
  .ofl-lb-next {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
  .ofl-lb-close {
    width: 40px;
    height: 40px;
  }
}

/* --- Floating rail: clear the sticky site header ------------------------ *
 * The rail stuck at the design's small offset (24-28px), tucking the top of the
 * card (price) under the sticky site header. Offset by the header height, which
 * single-package.js measures into --ofl-rail-top (safe fallback otherwise). */
.pkg-single .rail {
  top: var(--ofl-rail-top, 104px);
}

/* --- Button hover contrast (legible on every Skin) ---------------------- *
 * Hunting & fishing .btn/.book-btn use a slide-fill with the text pinned above
 * it (fine). The cream designs change the *background* on hover, which—after the
 * Skin remap—can land the text on a same-tone background. Pin those to a
 * guaranteed-contrasting token. */

/* Lodging/Experiences CTA hover fades to the page background → use page text. */
.pkg-lodging .btn:hover,
.pkg-experiences .btn:hover {
  color: var(--color-text);
}

/* Lodging/Experiences "Book Now" sits on the accent colour → on-accent text. */
.pkg-lodging .book-btn,
.pkg-experiences .book-btn,
.pkg-lodging .book-btn:hover,
.pkg-experiences .book-btn:hover {
  color: var(--color-on-accent);
}

/* "All Photos" pill on the dark designs used a fixed dark scrim; derive it from
 * the Skin so the label stays legible on any Skin, base + hover. */
.pkg-hunting .gallery-all,
.pkg-fishing .gallery-all {
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  color: var(--color-text);
}
.pkg-hunting .gallery-all:hover,
.pkg-fishing .gallery-all:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

/* Keep the Book Now label + arrow above the slide-fill on all designs. */
.pkg-single .book-btn span,
.pkg-single .book-btn svg {
  position: relative;
  z-index: 1;
}