/*
 * Seabound Journeys — dual-provider booking panel
 * ------------------------------------------------------------------
 * Renders in place of the single-provider Viator card on the port guides.
 * Two providers side by side, because they are genuinely not the same
 * product: SEG is a cruise-focused broker, Viator a general marketplace.
 * Presenting one alone implies a recommendation the research doesn't
 * support.
 *
 * Colour comes from each page's own --px-* port identity tokens, so the
 * panel reads as part of that port's page rather than a bolted-on widget,
 * with hard-coded fallbacks so it still renders correctly if sx-atmos.css
 * (which defines those tokens) is ever missing.
 */

.sj-book{
  --bk-deep: var(--px-deep, #06282F);
  --bk-nav: var(--px-nav, #0C5C69);
  --bk-sky: var(--px-sky-2, #145F6E);
  --bk-accent: var(--px-accent, #F2764A);
  --bk-accent-ink: var(--px-accent-ink, #AC4426);
  --bk-eyebrow: var(--px-eyebrow, #9AD0CD);
  --bk-sub: var(--px-sub, #C6E7E3);
  --bk-brass:#B8863B;
  --bk-brass-lt:#D8AE6A;
  --bk-paper:#F7F3EC;
  --bk-ink:#12262A;
  max-width:920px;
  margin:2.6rem auto;
  padding:0 24px;
  box-sizing:border-box;
}
.sj-book *{box-sizing:border-box}

.sj-book-shell{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(158deg, var(--bk-deep) 0%, var(--bk-sky) 118%);
  box-shadow:0 18px 44px -26px rgba(6,30,36,.72), 0 1px 0 rgba(255,255,255,.07) inset;
  padding:1.6rem 1.7rem 1.35rem;
}
/* Faint rule texture, same device the Viator card used, kept so the two
   generations of card sit together comfortably if both ever appear. */
.sj-book-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,transparent,transparent 62px,rgba(255,255,255,.028) 62px,rgba(255,255,255,.028) 63px);
}
.sj-book-shell>*{position:relative}

.sj-book-eyebrow{
  font-family:"Space Mono",monospace;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bk-eyebrow);
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.5rem;
}
.sj-book-eyebrow::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),transparent);
}
.sj-book-head{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:clamp(1.16rem,2.3vw,1.42rem);
  font-weight:600;line-height:1.22;color:#fff;
  margin:0 0 .4rem;
}
.sj-book-lede{
  font-family:"Newsreader",Georgia,serif;
  font-size:.97rem;line-height:1.5;color:var(--bk-sub);
  max-width:62ch;margin:0 0 1.15rem;
}
.sj-book-lede b{color:#fff;font-weight:500}

/* --- the two provider tiles --------------------------------------- */
.sj-book-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}
.sj-book-grid.is-single{grid-template-columns:minmax(0,1fr)}

.sj-prov{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:1.05rem 1.1rem 1rem;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
@media (hover:hover){
  .sj-prov:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
}
.sj-prov-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.42rem}
.sj-prov-name{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.02rem;font-weight:600;color:#fff;letter-spacing:-.01em;
}
.sj-prov-kind{
  font-family:"Space Mono",monospace;
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bk-brass-lt);white-space:nowrap;
}
.sj-prov-line{
  font-family:"Newsreader",Georgia,serif;
  font-size:.9rem;line-height:1.48;color:#CBDCDA;margin:0 0 .7rem;
}
.sj-prov-pts{list-style:none;margin:0 0 .95rem;padding:0;display:flex;flex-direction:column;gap:.3rem}
.sj-prov-pts li{
  font-family:"Space Mono",monospace;
  font-size:.68rem;line-height:1.45;color:#A9C3C1;
  padding-left:.95rem;position:relative;
}
.sj-prov-pts li::before{
  content:"";position:absolute;left:0;top:.46em;
  width:5px;height:5px;border-radius:1px;
  background:var(--bk-brass);transform:rotate(45deg);
}
.sj-prov-pts li.is-caution::before{background:var(--bk-accent)}
.sj-prov-btn{
  margin-top:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--bk-brass);color:#1A1204;
  font-family:"Space Mono",monospace;
  font-size:.74rem;font-weight:700;letter-spacing:.035em;
  text-decoration:none;text-align:center;line-height:1.35;
  padding:.72rem 1rem;border-radius:8px;
  transition:background .15s ease, transform .15s ease;
}
.sj-prov-btn:hover{background:var(--bk-brass-lt);transform:translateY(-1px)}
.sj-prov-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sj-prov.is-viator .sj-prov-btn{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.38);
}
.sj-prov.is-viator .sj-prov-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.sj-prov-alt{
  margin-top:.55rem;
  font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.02em;
  color:#93AFAD;text-align:center;
}
.sj-prov-alt a{color:#C4D8D5;text-decoration:underline;text-underline-offset:2px}
.sj-prov-alt a:hover{color:#fff}

/* --- footer row: the honest note + disclosure --------------------- */
.sj-book-foot{
  margin-top:1.05rem;padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;align-items:baseline;
}
.sj-book-verdict{
  font-family:"Newsreader",Georgia,serif;
  font-size:.86rem;line-height:1.5;color:#B6CCC9;flex:1 1 24ch;margin:0;
}
.sj-book-verdict a{color:#E4EFEC;text-decoration:underline;text-underline-offset:2px}
.sj-book-verdict a:hover{color:#fff}
.sj-book-disc{
  font-size:.72rem;line-height:1.5;color:#8FA8A6;font-style:italic;flex:1 1 22ch;margin:0;
}
.sj-book-disc a{color:#B3C7C4;text-decoration:underline}
.sj-book-disc a:hover{color:#fff}

/* --- compact variant (mid-article, after quick picks) ------------- */
.sj-book.is-compact .sj-book-shell{padding:1.25rem 1.3rem 1.1rem}
.sj-book.is-compact .sj-book-head{font-size:1.05rem}
.sj-book.is-compact .sj-book-lede{font-size:.9rem;margin-bottom:.9rem}
.sj-book.is-compact .sj-prov{padding:.85rem .9rem .85rem}
.sj-book.is-compact .sj-prov-pts{display:none}

/* --- no-local-operators variant ----------------------------------- */
/* Used on the cruise-line private destinations, where the page's own
   conclusion is that nothing here is sold by anyone but the cruise line.
   Visually distinct from the booking panel on purpose: it must not read
   as "book this island", because you can't. */
.sj-book.is-nolocal .sj-book-shell{
  background:linear-gradient(158deg,#15242A 0%,#1E3339 120%);
  box-shadow:0 14px 34px -24px rgba(6,20,24,.7);
}
.sj-book.is-nolocal .sj-book-eyebrow{color:#94A9A7}
.sj-nolocal-note{
  font-family:"Newsreader",Georgia,serif;
  font-size:.94rem;line-height:1.55;color:#BACECB;margin:0 0 1rem;max-width:64ch;
}
.sj-nolocal-note b{color:#fff;font-weight:500}
.sj-port-pick{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
.sj-port-pick a{
  font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.03em;
  color:#D6E5E2;text-decoration:none;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:.38rem .8rem;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.sj-port-pick a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.sj-port-pick a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- per-excursion booking row ------------------------------------ */
/* Sits at the foot of each ranked excursion card that is genuinely
   bookable outside the ship. Deliberately quiet: this is a utility row,
   not a second CTA competing with the card's own argument. */
.sj-rec-book{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  margin-top:1rem;padding-top:.8rem;
  border-top:1px dashed var(--paper-2,#DEDBD3);
}
.sj-rec-book-k{
  font-family:"Space Mono",monospace;
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted,#5b6b6b);margin:0;
}
.sj-rec-book-links{display:flex;flex-wrap:wrap;gap:.4rem}
.sj-rec-book a{
  display:inline-flex;align-items:center;gap:.34rem;
  font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;
  letter-spacing:.02em;text-decoration:none;
  color:var(--px-accent-ink,#AC4426);
  border:1px solid color-mix(in srgb, var(--px-accent-ink,#AC4426) 32%, transparent);
  border-radius:7px;padding:.38rem .72rem;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.sj-rec-book a:hover{
  background:color-mix(in srgb, var(--px-accent-ink,#AC4426) 8%, transparent);
  border-color:var(--px-accent-ink,#AC4426);transform:translateY(-1px);
}
.sj-rec-book a:focus-visible{outline:2px solid var(--px-accent-ink,#AC4426);outline-offset:2px}
.sj-rec-book a::after{content:"\2197";font-size:.78em;opacity:.7}
/* Browsers without color-mix() still get a readable outlined button. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .sj-rec-book a{border-color:rgba(0,0,0,.22)}
  .sj-rec-book a:hover{background:rgba(0,0,0,.04)}
}
.sj-rec-shiponly{
  margin-top:1rem;padding-top:.8rem;
  border-top:1px dashed var(--paper-2,#DEDBD3);
  font-family:"Space Mono",monospace;font-size:.68rem;line-height:1.5;
  letter-spacing:.02em;color:var(--muted,#5b6b6b);
}

/* --- sticky booking bar ------------------------------------------- */
/* Appears once the reader is past the ranked excursions and has not yet
   reached the in-page panel, so it never competes with the real card.
   Dismissible, and it stays dismissed for the session. */
.sj-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  transform:translateY(110%);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(180deg, rgba(6,40,47,.96), rgba(6,40,47,.99));
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.6);
  padding:.6rem max(14px, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
}
.sj-sticky.is-in{transform:translateY(0)}
.sj-sticky-in{
  max-width:920px;margin:0 auto;
  display:flex;align-items:center;gap:.7rem;
}
.sj-sticky-txt{
  flex:1 1 auto;min-width:0;
  font-family:"Space Mono",monospace;font-size:.68rem;line-height:1.4;
  color:#BCD2CF;letter-spacing:.02em;
}
.sj-sticky-txt b{display:block;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.01em}
.sj-sticky-btns{display:flex;gap:.4rem;flex:0 0 auto}
.sj-sticky-btns a{
  font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;
  text-decoration:none;white-space:nowrap;
  padding:.5rem .78rem;border-radius:7px;
}
.sj-sticky-btns a.is-seg{background:var(--bk-brass,#B8863B);color:#1A1204}
.sj-sticky-btns a.is-via{border:1px solid rgba(255,255,255,.34);color:#fff}
.sj-sticky-btns a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sj-sticky-x{
  flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:#7E9997;font-size:1.1rem;line-height:1;padding:.4rem .2rem;
}
.sj-sticky-x:hover{color:#fff}
.sj-sticky-x:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}

@media (max-width:720px){
  .sj-book-grid{grid-template-columns:minmax(0,1fr)}
  .sj-book{padding:0 18px;margin:2rem auto}
  .sj-book-shell{padding:1.3rem 1.2rem 1.1rem}
  .sj-book-foot{flex-direction:column;gap:.55rem}
  .sj-sticky-txt{font-size:.63rem}
  .sj-sticky-txt b{font-size:.72rem}
  .sj-sticky-btns a{padding:.5rem .62rem;font-size:.64rem}
}
@media (max-width:420px){
  .sj-sticky-txt span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .sj-sticky{transition:none}
  .sj-prov,.sj-prov-btn,.sj-rec-book a,.sj-port-pick a{transition:none}
  .sj-prov:hover,.sj-prov-btn:hover,.sj-rec-book a:hover,.sj-port-pick a:hover{transform:none}
}

/* The guides force a light rendering (meta color-scheme: only light) and
   the surrounding page paints its own paper background, so these panels
   are deliberately single-theme. Every colour above is explicit rather
   than inherited, so the panel holds its own appearance regardless of the
   host page's own scheme. */