/*
 * Wilsons Journey Planner styles.
 *
 * Everything in this file lives under the .wa-jp root so it can never leak
 * into the rest of the Bricks-built site, and consumes the site's existing
 * --wa-* design tokens rather than hardcoding new colours (see
 * bricks-styles-color-palette-wilsons.json / bricks-variables.json).
 */

.wa-jp {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    /* Self-hosted sitewide (wp-content/uploads/2026/07/Monotype-Ariata-
       Display-*.woff2, weights 400/500/700/900) via the theme's own
       @font-face rules -- confirmed present in the page's global styles,
       so referencing the family name here needs no new font file. */
    --wa-jp-font-display: 'Ariata Display', 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    color: var(--wa-text-primary, #222222);
    /* Reasonable pre-JS fallback; map.js measures the rendered map (which
       is aspect-ratio-driven, not this var) and overwrites it precisely.
       A pure-CSS grid "let siblings scroll instead of growing the row"
       trick doesn't work here: with grid-template-rows: auto and no
       item having an explicit height, the row sizes to the TALLEST
       item's natural content regardless of overflow/min-height:0 on the
       others, so a real measured pixel value is required. */
    --wa-jp-frame-height: 640px;
}

.wa-jp__loading {
    margin: 0;
    color: var(--wa-text-muted, #888888);
    font-size: var(--text-sm, 0.85rem);
}

.wa-jp__layout {
    display: grid;
    grid-template-columns: 23rem 1.1fr 0.9fr;
    gap: var(--space-m, 1.25rem);
    align-items: stretch;
    box-sizing: border-box;
    /* Safety net, not the fix itself (see the date-input rules below for
       the actual cause of the last horizontal-scroll bug) -- clips any
       future small overflow to this frame's own edge instead of it
       silently dragging the whole page into horizontal scroll. Doesn't
       affect anything meant to be visible: native <select> dropdown
       popups render in their own top layer regardless of ancestor
       overflow, and nothing in here is meant to intentionally bleed past
       the frame.

       overflow-y:visible has to be explicit here, not just the default --
       per spec, if one axis is anything other than visible, the *other*
       axis's computed value silently becomes auto instead of staying
       visible, even though it was never set to anything else. That turned
       this frame into an unintended vertical scroll container (auto,
       not visible) with nothing to scroll -- but a scroll container is
       still a scroll container for touch-gesture purposes on mobile, and
       swallowed the page-scroll gesture for any touch starting over it
       instead of letting it bubble up, which is what "can only scroll the
       page, not the trip builder" was. */
    overflow-x: hidden;
    overflow-y: visible;
    /* One shared frame around all three columns -- previously each column
       had its own border/shadow and sat directly on the page background,
       which read as three separate floating panels rather than one
       interface. The columns are sections within this frame now, not
       cards in their own right (see .wa-jp__sidebar/.wa-jp__info below). */
    background: var(--wa-surface-off-white, #f7f7f7);
    border: 1px solid var(--wa-border-default, #dddddd);
    border-radius: var(--radius-2xl, 1rem);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: var(--space-m, 1.25rem);
}

@media (max-width: 1023px) {
    .wa-jp__layout {
        grid-template-columns: 1fr;
        padding: var(--space-s, 1rem);
    }

    /* Below the 3-up breakpoint everything stacks and the page itself
       scrolls -- an internally-scrolling panel inside an already-scrolling
       page is a worse experience on touch, so let each panel take its
       natural height instead. The extra .wa-jp ancestor in this selector
       isn't matching anything new (.wa-jp__sidebar/.wa-jp__info are always
       inside .wa-jp) -- it's there purely to outrank the base rule below
       on specificity, since that rule comes later in the file and would
       otherwise win on equal specificity regardless of this media query.
       That's what actually happened before this comment existed: mobile
       silently kept the desktop's fixed 640px scroll box, which traps the
       touch scroll gesture inside a small box instead of scrolling the
       page -- exactly what "can't scroll far enough to reach the map"
       looks like. */
    .wa-jp .wa-jp__sidebar,
    .wa-jp .wa-jp__info {
        height: auto;
        max-height: none;
        overflow-y: visible;
    }

    /* Grid items get an implicit min-width:auto -- their minimum size is
       based on their content's min-content size, not 0, unless overridden.
       A descendant with a large forced minimum width (the native date
       input, see below) can propagate up through .wa-jp__field and
       .wa-jp__sidebar and force the *grid track itself* wider than the
       frame, which -- since sidebar/map/info all share that one track in
       this single-column mobile layout -- would render literally
       everything in the layout too wide, map included, well past the
       frame's own visible edge. This is the same category of bug as the
       min-height:0 fix above (.wa-jp__sidebar/.wa-jp__info's frame-height
       vars) -- CSS Grid needs min-width:0 explicitly, "shrink to fit the
       track" is not the default. */
    .wa-jp .wa-jp__sidebar,
    .wa-jp .wa-jp__map,
    .wa-jp .wa-jp__info {
        min-width: 0;
    }

    /* The map becomes a static visual reference below this breakpoint
       instead of an interactive control: individually-tappable leader-line
       labels mean small, crowded targets at this width, and the fixed
       label column (map.js's LABEL_X) was tuned against a wider canvas.
       Dots (roughly where each destination is) and the active route line
       stay -- neither depends on the label layout -- since they give
       useful context on their own with no interaction required. Selecting
       an origin/destination is exactly as possible as before either way,
       via the Depart from/Sail to fields, which were always the primary
       (and on any device, most reliable) way to do it. */
    .wa-jp__map-label,
    .wa-jp__leader-line {
        display: none;
    }

    /* Full highlight descriptions are the single biggest chunk of the info
       panel and mostly repeat what the chips above already summarise for
       a quick scan -- cut for mobile; the destination's own page (linked
       at the bottom of this panel) has the complete detail. */
    .wa-jp__highlights {
        display: none;
    }

    /* Below 16px, iOS Safari zooms the whole page in on focus instead of
       just focusing the field -- these were 0.85rem (~13.6px) on desktop,
       fine with a mouse, a jarring surprise with a thumb. */
    .wa-jp__field select,
    .wa-jp__field input[type="date"] {
        font-size: 16px;
    }

    /* A native <input type="date">'s internal day/month/year + calendar-
       icon layout has its own minimum content width that some mobile
       browsers won't shrink below no matter what width/box-sizing says on
       the outside -- on a narrow phone that can exceed the field card's
       available width and push past the frame edge, which (with nothing
       upstream clipping horizontal overflow) drags the whole page into
       horizontal scroll even though nothing is actually meant to be off-
       screen. min-width:0 overrides the implicit min-width some browsers
       otherwise apply; tighter padding here and on the card leaves the
       native control more room to actually fit instead of needing to
       overflow. */
    .wa-jp__field input[type="date"] {
        min-width: 0;
        max-width: 100%;
        padding: 0.6em 0.5em;
    }

    .wa-jp__field--date {
        padding-left: 0.75em;
        padding-right: 0.75em;
    }

    /* 28px (desktop) is under the ~44px touch-target guideline -- fine
       for a mouse pointer, not for a thumb. */
    .wa-jp__stepper-btn {
        width: 2.75rem;
        height: 2.75rem;
    }
}

.wa-jp__sidebar,
.wa-jp__info {
    /* Sections within .wa-jp__layout's shared frame, not their own cards --
       no background/border/shadow of their own. Field boxes (below) supply
       their own white background + border, which is what actually needs to
       read clearly, and does now that it's white-on-off-white rather than
       white-on-white. */
    padding: 0 0.4em 0 0;
    /* Frame height comes from the map's own aspect-ratio, measured and
       written into --wa-jp-frame-height by map.js -- see the comment on
       .wa-jp above for why this can't be done in CSS alone. */
    height: var(--wa-jp-frame-height);
    max-height: var(--wa-jp-frame-height);
    min-height: 0;
    overflow-y: auto;
}

.wa-jp__field {
    margin-bottom: var(--space-s, 1rem);
    padding: 0.85em 1em;
    border: 1px solid var(--wa-border-default, #dddddd);
    border-radius: var(--radius-lg, 0.625rem);
    background: var(--wa-surface-white, #ffffff);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.wa-jp__field:hover,
.wa-jp__field:focus-within {
    border-color: var(--wa-color-teal-mid, #0f766e);
}

.wa-jp__field:focus-within {
    box-shadow: 0 0 0 3px var(--wa-color-teal-light-l-3, #e2f1ef);
}

/* Icon sits inline with the label, not spanning the whole card -- it's a
   small marker identifying the field, not a decorative fill for the gap
   between a borderless label and a borderless value (which is what made
   the value read as plain text instead of a control -- see .wa-jp__field
   select/input below). */
.wa-jp__field label,
.wa-jp__field--passengers > .wa-jp__results-label {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-weight: 600;
    font-size: var(--text-xs, 0.68rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wa-text-secondary, #666666);
    margin-bottom: 0.55em;
}

.wa-jp__field label::before,
.wa-jp__field--passengers > .wa-jp__results-label::before {
    content: '';
    width: 1em;
    height: 1em;
    flex: none;
    background-color: var(--wa-color-teal-mid, #0f766e);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.wa-jp__field--origin label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.58 2 4 5.58 4 10c0 5.25 6.72 11.24 7 11.49a1.5 1.5 0 0 0 2 0C13.28 21.24 20 15.25 20 10c0-4.42-3.58-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.58 2 4 5.58 4 10c0 5.25 6.72 11.24 7 11.49a1.5 1.5 0 0 0 2 0C13.28 21.24 20 15.25 20 10c0-4.42-3.58-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
}

.wa-jp__field--destination label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3a1 1 0 0 1 1-1h12.5a1 1 0 0 1 .8 1.6L16 8l3.3 4.4a1 1 0 0 1-.8 1.6H6v8a1 1 0 1 1-2 0V3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3a1 1 0 0 1 1-1h12.5a1 1 0 0 1 .8 1.6L16 8l3.3 4.4a1 1 0 0 1-.8 1.6H6v8a1 1 0 1 1-2 0V3z'/%3E%3C/svg%3E");
}

.wa-jp__field--date label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zM4 10v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V10H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zM4 10v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V10H4z'/%3E%3C/svg%3E");
}

.wa-jp__field--journey label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h11l-3-3 1.4-1.4L21.8 8l-5.4 5.4L15 12l3-3H7V7zm10 10H6l3 3-1.4 1.4L2.2 16l5.4-5.4L9 12l-3 3h11v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h11l-3-3 1.4-1.4L21.8 8l-5.4 5.4L15 12l3-3H7V7zm10 10H6l3 3-1.4 1.4L2.2 16l5.4-5.4L9 12l-3 3h11v2z'/%3E%3C/svg%3E");
}

.wa-jp__field--passengers > .wa-jp__results-label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.42 0-8 2.24-8 5v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.42 0-8 2.24-8 5v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E");
}

/* The value itself needs to look like a control, not plain text -- its own
   inset box (border + slightly recessed fill, distinct from the card's
   white) with a hand-drawn chevron on selects, since appearance:none is
   needed to style them consistently and that also removes the native one. */
.wa-jp__field select,
.wa-jp__field input[type="date"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.85em;
    border: 1px solid var(--wa-border-default, #dddddd);
    border-radius: var(--radius-md, 0.375rem);
    background-color: var(--wa-surface-off-white, #f7f7f7);
    font-family: inherit;
    font-weight: 600;
    font-size: var(--text-sm, 0.85rem);
    color: var(--wa-text-primary, #222222);
}

.wa-jp__field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 2.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65em center;
    background-size: 1.1em;
}

.wa-jp__map {
    position: relative;
    aspect-ratio: 1 / 1;
    align-self: start;
    border: 1px solid var(--wa-border-default, #dddddd);
    border-radius: var(--radius-xl, 0.75rem);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--wa-surface-warm, #f5f5f3);
}

.wa-jp__map .route-map__base {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-jp__map .route-map__route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wa-jp__map-placeholder {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, var(--wa-color-teal-light, #8ac6bd) 0%, var(--wa-surface-warm, #f5f5f3) 100%);
}

.wa-jp__map-nodes {
    position: absolute;
    inset: 0;
}

/* The pin's true position -- decorative only (aria-hidden, no click
   handler; the label below is the actual control). A small dark dot with
   a white ring, matching the reference's small coastline markers. */
.wa-jp__map-dot {
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--wa-color-near-black, #222222);
    border: 2px solid var(--wa-surface-white, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.wa-jp__map-dot.is-destination {
    background: var(--wa-color-teal-mid, #0f766e);
}

.wa-jp__map-dot.is-origin {
    background: var(--wa-color-amber, #ffb020);
}

/* The label pill, offset from the pin -- see layoutLabels() in map.js for
   why it doesn't just sit at the pin's own position. Dark by default
   (matching the reference), with origin/destination selection picking up
   the same accent colours as the dot instead of a lighter "unselected"
   state, since dark is already the default look here. */
.wa-jp__map-label {
    position: absolute;
    transform: translate(0, -50%);
    background: var(--wa-color-near-black, #222222);
    border: none;
    border-radius: var(--radius-full, 9999px);
    padding: 0.4em 0.9em;
    color: var(--wa-surface-white, #ffffff);
    font-size: var(--text-xs, 0.68rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* Last-resort truncation -- map.js's inline max-width (sized off the
       same LABEL_X the label is positioned at) should keep this from ever
       being needed, but if a future name is unusually long this fails
       gracefully instead of overflowing the map's own clipped edge again. */
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.wa-jp__map-label:hover {
    transform: translate(0, -50%) scale(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.wa-jp__map-label.is-destination {
    background: var(--wa-color-teal-mid, #0f766e);
}

.wa-jp__map-label.is-origin {
    background: var(--wa-color-amber, #ffb020);
    color: var(--wa-color-near-black, #222222);
}

/* Not selectable as Sail to (see map.js), but still clickable -- it shows
   destination info + preset trips in the info panel instead of starting a
   booking search. Outlined rather than filled so it doesn't look like a
   normal (or disabled) bookable pin -- informational, not unavailable. */
.wa-jp__map-label.is-not-direct-stop {
    background: transparent;
    border: 2px solid var(--wa-color-near-black, #222222);
    color: var(--wa-color-near-black, #222222);
    box-shadow: none;
}

.wa-jp__map-label.is-not-direct-stop:hover {
    background: var(--wa-color-near-black, #222222);
    color: var(--wa-surface-white, #ffffff);
}

/* Which outlined (non-bookable) pin the info panel is currently showing --
   filled instead of outlined, same visual language switch as :hover above. */
.wa-jp__map-label.is-not-direct-stop.is-map-focus {
    background: var(--wa-color-near-black, #222222);
    color: var(--wa-surface-white, #ffffff);
}

.wa-jp__leader-line {
    stroke: var(--wa-color-near-black, #222222);
    stroke-width: 3;
}

.wa-jp__leader-line.is-active {
    stroke-width: 4;
}

.wa-jp__map-segment {
    stroke: var(--wa-color-near-black, #222222);
    stroke-width: 6;
    stroke-dasharray: 18 14;
    stroke-linecap: round;
}

.wa-jp__empty {
    color: var(--wa-text-muted, #888888);
    font-size: var(--text-sm, 0.85rem);
}

/* #wa-jp-outbound-results/#wa-jp-return-results -- had no rule at all
   before, so whatever gap appeared between the outbound sailing list, the
   return notice, and the passengers card below was incidental leftover
   margin on whichever child happened to be last, not a deliberate space.
   :empty:not() collapses to nothing before a search runs / for a one-way
   trip instead of leaving a dead gap. */
.wa-jp__results:not(:empty) {
    margin-bottom: var(--space-s, 1rem);
}

.wa-jp__results-label {
    font-weight: 600;
    font-size: var(--text-xs, 0.68rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wa-text-secondary, #666666);
    margin-bottom: 0.5em;
}

.wa-jp__highlights > .wa-jp__results-label,
.wa-jp__sailing-summary > .wa-jp__results-label {
    display: flex;
    align-items: center;
    gap: 0.45em;
}

.wa-jp__highlights > .wa-jp__results-label::before,
.wa-jp__sailing-summary > .wa-jp__results-label::before {
    content: '';
    width: 1em;
    height: 1em;
    flex: none;
    background-color: var(--wa-color-teal-mid, #0f766e);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.wa-jp__highlights > .wa-jp__results-label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E");
}

.wa-jp__sailing-summary > .wa-jp__results-label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a2.5 2.5 0 0 1 1 4.8V8h4a1 1 0 0 1 1 1v2h-2v-1h-3v7.94a5 5 0 0 0 3.9-3.62l1.94.5A7 7 0 0 1 12 22a7 7 0 0 1-6.84-8.18l1.94-.5A5 5 0 0 0 11 17.94V10H8v1H6V9a1 1 0 0 1 1-1h4V6.8A2.5 2.5 0 0 1 12 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a2.5 2.5 0 0 1 1 4.8V8h4a1 1 0 0 1 1 1v2h-2v-1h-3v7.94a5 5 0 0 0 3.9-3.62l1.94.5A7 7 0 0 1 12 22a7 7 0 0 1-6.84-8.18l1.94-.5A5 5 0 0 0 11 17.94V10H8v1H6V9a1 1 0 0 1 1-1h4V6.8A2.5 2.5 0 0 1 12 2z'/%3E%3C/svg%3E");
}

.wa-jp__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.75em 0 0;
    padding: 0;
    list-style: none;
}

.wa-jp__chip {
    display: inline-block;
    padding: 0.4em 0.9em;
    border-radius: var(--radius-full, 9999px);
    background: var(--wa-color-teal-light-l-3, #e2f1ef);
    color: var(--wa-color-teal-dark, #0f3a4a);
    font-size: var(--text-xs, 0.68rem);
    font-weight: 600;
}

.wa-jp__time-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.wa-jp__time-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6em 0.9em;
    border: 1px solid var(--wa-border-default, #dddddd);
    border-radius: var(--radius-md, 0.375rem);
    background: var(--wa-surface-white, #ffffff);
    font-family: inherit;
    font-size: var(--text-sm, 0.85rem);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.wa-jp__time-option:not(.is-selected):hover {
    border-color: var(--wa-color-teal-mid, #0f766e);
    background: var(--wa-color-teal-light-l-3, #e2f1ef);
}

.wa-jp__time-option.is-selected {
    background: var(--wa-color-near-black, #222222);
    border-color: var(--wa-color-near-black, #222222);
    color: var(--wa-surface-white, #ffffff);
}

.wa-jp__time-option-time {
    font-weight: 600;
}

.wa-jp__time-option-meta {
    font-size: var(--text-xs, 0.68rem);
    opacity: 0.75;
}

.wa-jp__notice {
    /* Rendered as a <p> in some contexts -- zero the browser's default
       paragraph margin rather than let it silently add its own spacing on
       top of (or collapse unpredictably with) the container-level gaps
       set explicitly elsewhere (.wa-jp__results, .wa-jp__highlights, etc). */
    margin: 0;
    font-size: var(--text-sm, 0.85rem);
    color: var(--wa-text-secondary, #666666);
    background: var(--wa-surface-white, #ffffff);
    border: 1px solid var(--wa-border-light, #eeeeee);
    border-radius: var(--radius-md, 0.375rem);
    padding: 0.75em 1em;
}

.wa-jp__notice--error {
    background: var(--wa-color-coral-t-1, #fff0f0);
    color: var(--wa-color-coral, #ff5a5f);
}

/* Park regulation, not a booking-flow error -- amber/caution rather than
   the coral error treatment above, with a left accent bar so it reads as
   a rule to be aware of rather than something that's gone wrong. */
.wa-jp__notice--warning {
    background: #fff8ec;
    border: 1px solid var(--wa-color-amber, #ffb020);
    border-left-width: 4px;
    color: var(--wa-text-primary, #222222);
    font-weight: 500;
}

.wa-jp__eyebrow {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--text-xs, 0.68rem);
    color: var(--wa-text-muted, #888888);
    margin: 0 0 0.25em;
}

.wa-jp__sidebar-intro {
    margin-bottom: var(--space-m, 1.25rem);
}

.wa-jp__sidebar-title {
    font-family: var(--wa-jp-font-display);
    font-size: var(--text-3xl, 2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
}

.wa-jp__sidebar-description {
    font-size: var(--text-sm, 0.85rem);
    color: var(--wa-text-secondary, #666666);
    line-height: 1.6;
    margin: 0;
}

.wa-jp__info-title {
    font-family: var(--wa-jp-font-display);
    font-size: var(--text-3xl, 2rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.35em;
}

.wa-jp__info-tagline {
    font-weight: 500;
    color: var(--wa-text-secondary, #666666);
}

.wa-jp__info-description {
    font-size: var(--text-sm, 0.85rem);
    line-height: 1.6;
}

.wa-jp__highlights,
.wa-jp__sailing-summary {
    margin-top: var(--space-m, 1.25rem);
}

.wa-jp__highlight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: var(--text-sm, 0.85rem);
}

.wa-jp__highlight-list li {
    position: relative;
    margin-bottom: 0;
    padding: 0.6em 0.9em 0.6em 1.9em;
    /* White, not the off-white token -- .wa-jp__info now sits directly on
       the shared frame background (also off-white), so these rows need
       their own contrast to stay legible as distinct rows. */
    background: var(--wa-surface-white, #ffffff);
    border: 1px solid var(--wa-border-light, #eeeeee);
    border-radius: var(--radius-md, 0.375rem);
    line-height: 1.5;
}

.wa-jp__highlight-list li::before {
    content: '';
    position: absolute;
    left: 0.9em;
    top: 1.05em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: var(--wa-color-teal-mid, #0f766e);
}

.wa-jp__sailing-card {
    background: var(--wa-surface-white, #ffffff);
    border: 1px solid var(--wa-border-default, #dddddd);
    border-radius: var(--radius-md, 0.375rem);
    padding: 0.75em 1em;
    margin-bottom: 0.6em;
    font-size: var(--text-sm, 0.85rem);
}

.wa-jp__sailing-card p {
    margin: 0.15em 0;
}

.wa-jp__sailing-card-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-xs, 0.68rem);
    letter-spacing: 0.05em;
    color: var(--wa-text-muted, #888888);
}

.wa-jp__walk-cards {
    display: grid;
    gap: 0.6em;
    margin-top: var(--space-m, 1.25rem);
}

.wa-jp__walk-card {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    padding: 0.7em 1em;
    background: var(--wa-surface-white, #ffffff);
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--wa-border-default, #dddddd);
    text-decoration: none;
    color: inherit;
}

.wa-jp__walk-card--recommended {
    border-color: var(--wa-color-teal-mid, #0f766e);
}

.wa-jp__walk-card--too_long {
    opacity: 0.7;
}

.wa-jp__walk-card-title {
    font-weight: 600;
    font-size: var(--text-sm, 0.85rem);
}

.wa-jp__walk-card-meta {
    font-size: var(--text-xs, 0.68rem);
    color: var(--wa-text-secondary, #666666);
}

.wa-jp__preset-trips {
    margin-top: var(--space-m, 1.25rem);
}

.wa-jp__trip-cards {
    display: grid;
    gap: 0.6em;
}

.wa-jp__trip-card {
    display: flex;
    gap: 0.8em;
    align-items: center;
    padding: 0.6em;
    background: var(--wa-surface-white, #ffffff);
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--wa-border-default, #dddddd);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease;
}

.wa-jp__trip-card:hover {
    border-color: var(--wa-color-teal-mid, #0f766e);
}

.wa-jp__trip-card-image {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-sm, 0.25rem);
    object-fit: cover;
}

.wa-jp__trip-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
}

.wa-jp__trip-card-title {
    font-weight: 600;
    font-size: var(--text-sm, 0.85rem);
}

.wa-jp__trip-card-tagline {
    font-size: var(--text-xs, 0.68rem);
    color: var(--wa-text-secondary, #666666);
}

.wa-jp__trip-card-price {
    font-size: var(--text-xs, 0.68rem);
    font-weight: 600;
    color: var(--wa-color-teal-dark, #0f3a4a);
}

.wa-jp__passenger-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.wa-jp__passenger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wa-jp__passenger-label {
    font-size: var(--text-sm, 0.85rem);
}

.wa-jp__stepper {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.wa-jp__stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Relying on text layout alone left the glyph off-centre -- +/- sit at
       slightly different optical heights in most fonts, so centring via
       line-height wasn't reliable regardless of font metrics. */
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--wa-border-default, #dddddd);
    background: var(--wa-surface-white, #ffffff);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.wa-jp__stepper-btn:hover {
    border-color: var(--wa-color-teal-mid, #0f766e);
    background: var(--wa-color-teal-light-l-3, #e2f1ef);
}

.wa-jp__stepper-value {
    min-width: 1.5em;
    text-align: center;
    font-weight: 600;
}

.wa-jp__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--space-s, 1rem);
    padding-top: var(--space-s, 1rem);
    border-top: 1px solid var(--wa-border-default, #dddddd);
    font-size: var(--text-md, 1rem);
}

.wa-jp__fare-disclaimer {
    margin: 0.5em 0 0;
    font-size: var(--text-2xs, 0.6rem);
    color: var(--wa-text-muted, #888888);
    line-height: 1.5;
}

.wa-jp__handoff {
    margin-top: var(--space-m, 1.25rem);
}

.wa-jp__book-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85em 1.2em;
    border-radius: var(--radius-full, 9999px);
    border: none;
    background: var(--wa-color-black, #111111);
    color: var(--wa-surface-white, #ffffff);
    font-weight: 600;
    font-size: var(--text-sm, 0.85rem);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 120ms ease;
}

.wa-jp__book-btn:not(:disabled):hover {
    background: var(--wa-color-near-black, #222222);
}

.wa-jp__book-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.wa-jp__notice--success {
    background: var(--wa-color-teal-light-l-3, #e2f1ef);
    color: var(--wa-color-teal-dark, #0f3a4a);
}

/* Accessibility: explicit, high-contrast focus rings on every interactive
   element the plugin renders -- particularly important for the map pins,
   whose custom backgrounds can make a browser's default outline hard to
   see against the basemap. */
.wa-jp button:focus-visible,
.wa-jp a:focus-visible,
.wa-jp select:focus-visible,
.wa-jp input:focus-visible {
    outline: 3px solid var(--wa-color-amber, #ffb020);
    outline-offset: 2px;
}

/* The default amber focus ring is unreliable here specifically -- the
   is-origin label's own background is amber, so the generic outline would
   sometimes disappear against its own control. White-on-dark-ring instead,
   which reads against all three label backgrounds (near-black, teal, amber). */
.wa-jp__map-label:focus-visible {
    outline: 3px solid var(--wa-surface-white, #ffffff);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--wa-color-near-black, #222222);
    z-index: 5;
}