/* DateForward: slide-in date picker for tour pages (hero-integrated, over a dark photo).
   Relies on the page's design tokens (--action, --white, --serif, --sans, --ease,
   --accent-dim, --brand, --brand-dark, --action-dark). KWFT theme: red day-discs with a
   fork-and-knife mark, orange CTAs. */
.tdp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease), opacity 0.35s var(--ease), margin-top 0.35s var(--ease); opacity: 0; margin-top: 0; max-width: 540px; }
.tdp.open { grid-template-rows: 1fr; opacity: 1; margin-top: 18px; }
.tdp__inner { overflow: hidden; }
.tdp.open .tdp__inner { background: rgba(18, 14, 12, 0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 18px 16px; }
.tdp__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; }
.tdp__arrow { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; color: var(--white); transition: background 0.2s var(--ease); }
.tdp__arrow:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.tdp__arrow:disabled { color: rgba(255,255,255,0.3); cursor: default; }
.tdp__label { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--white); }
.tdp__strip { display: flex; justify-content: space-between; margin-top: 2px; }
.tdp-d { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 4px 0 6px; cursor: pointer; font-family: var(--sans); }
.tdp-d.off { cursor: default; }
.tdp-d__disc { position: relative; overflow: hidden; width: 46px; height: 46px; border-radius: 50%; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; transition: transform 0.2s var(--ease); }
.tdp-d.open:hover .tdp-d__disc { transform: translateY(-2px); }
/* Available = a red plate with a faint fork-and-knife mark. */
.tdp-d.open .tdp-d__disc { border-color: var(--brand); background: radial-gradient(circle at 50% 42%, #e0606b 0%, var(--brand) 72%, var(--brand-dark) 100%); color: #fff; }
.tdp-d.open .tdp-d__disc::before { content: "\f2e7"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; opacity: 0.2; z-index: 0; }
.tdp-d.open .tdp-d__dow, .tdp-d.open .tdp-d__date { position: relative; z-index: 1; }
.tdp-d.off .tdp-d__disc { color: rgba(255,255,255,0.32); }
.tdp-d.sel .tdp-d__disc { box-shadow: 0 0 0 3px rgba(255,255,255,0.7); }
.tdp-d__dow { font-size: 11px; font-weight: 700; }
.tdp-d__date { font-size: 10px; font-weight: 500; }
.tdp__times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tdp__times-hint { width: 100%; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.tdp__time { display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 700; color: #fff; background: var(--action); border: 1px solid var(--action); border-radius: 50px; padding: 9px 16px; cursor: pointer; text-decoration: none; }
.tdp__time:hover { background: var(--action-dark); border-color: var(--action-dark); color: #fff; }
#heroActions { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 14px; }
.tdp-buy { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--action); color: var(--white); border: none; border-radius: 50px; padding: 12px 28px; cursor: pointer; text-decoration: none; font-family: var(--sans); text-align: left; transition: background 0.25s var(--ease); }
.tdp-buy:hover { background: var(--action-dark); }
/* Availability not known yet, or this tour does not run that day. Same
   footprint so the hero does not jump, but visibly not a button. */
.tdp-buy--static { cursor: default; opacity: 0.72; }
.tdp-buy--static:hover { background: var(--action); }
.tdp-buy__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.tdp-buy__main { font-family: var(--sans); font-size: 16px; font-weight: 700; }
.tdp__change { display: block; margin-top: 0; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.8); text-decoration: none; padding: 0; text-align: left; }
.tdp__change:hover { color: var(--white); }
/* Appended to a hero that already has its own CTAs (a tour page opened without
   ?d=). #heroActions above sets flex-wrap: nowrap, and an ID beats a class, so
   this has to carry the ID too or the row overflows the viewport instead of
   wrapping. */
#heroActions.tdp-actions--stacked { flex-wrap: wrap; }
#heroActions .tdp__change--standalone { flex: 0 0 auto; }
.tdp-empty { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tdp-empty__title { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--white); }
.tdp-empty__link { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.2s var(--ease); }
.tdp-empty__link:hover { color: var(--white); }
/* ---- Sold-out states ----------------------------------------------------
   A departure that is on the schedule but full stays visible and labelled.
   Hiding it makes "sold out" look identical to "we don't run that day", which
   sends guests away thinking the time never existed. Rules live here (not in
   each tour page's inline <style>) so all four tour pages stay in sync; the
   doubled class names out-specify the inline block that loads after this file. */

/* Hero week-strip: a full day is visible and pickable, but plainly not a plate.
   Three states now read distinctly: red plate = bookable, grey disc = scheduled
   but full, no disc at all = the tour does not run that day. */
.tdp-d.soldout { cursor: pointer; }
.tdp-d.soldout .tdp-d__disc { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.tdp-d.soldout:hover .tdp-d__disc { background: rgba(255,255,255,0.14); }
.tdp-d.soldout.sel .tdp-d__disc { box-shadow: 0 0 0 3px rgba(255,255,255,0.45); }

/* Hero time chips: greyed and captioned instead of dropped. The strike goes on the
   time itself, never the chip: text-decoration inherits into children and a child
   cannot opt out, so striking the chip would strike the "Sold out" tag too. */
.tdp__time.tdp__time--out { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.6); cursor: default; text-decoration: none; }
.tdp__time.tdp__time--out .tdp__time-strike { text-decoration: line-through; }
.tdp__time.tdp__time--out .tdp__time-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }

/* Waitlist chips. Outlined, not solid: joining a list is not buying a seat, so it
   should not compete with a real "Book" chip sitting next to it. */
.tdp__time.tdp__time--wait { background: transparent; border-color: var(--action); color: var(--action); }
.tdp__time.tdp__time--wait:hover { background: color-mix(in srgb, var(--action) 18%, transparent); color: #fff; }
.tcal__time.tcal__time--wait { background: transparent; border-color: var(--orange); color: var(--orange-dark); }
.tcal__time.tcal__time--wait:hover { background: var(--orange); color: #fff; }

/* On-page month calendar: third day state between "available" and "not running". */
.tcal-day.soldout { cursor: pointer; color: var(--text-light); border-color: rgba(0,0,0,0.12); background: #f3efe9; }
.tcal-day.soldout:hover { background: #e9e3da; }
.tcal-day.soldout.sel { background: #ded6cb; border-color: rgba(0,0,0,0.2); color: var(--text); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

/* On-page time pills: same treatment as the hero chips. */
.tcal__time.tcal__time--out { background: #ece7e0; border-color: #ece7e0; color: var(--text-light); cursor: default; text-decoration: none; }
.tcal__time.tcal__time--out .tcal__time-strike { text-decoration: line-through; }
.tcal__time.tcal__time--out .tcal__time-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tcal__note { margin: 12px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--text-light); }

/* Bottom-of-page CTA buy button: small label stacked over the big date, like the hero. */
.cta-buy { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.15; }
.cta-buy__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.cta-buy__main { font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Message shown in place of the times row when a tour has no public schedule. */
.tcal__empty { font-family: var(--sans); font-size: 13px; color: var(--text-light); margin: 0; }

/* "See Dates" and the bottom CTA jump straight to the calendar. #availability
   wraps a two-column section whose prose comes FIRST when it stacks on mobile,
   so anchoring there dropped the guest on "About This Tour" with the calendar
   ~1000px further down. Offset clears the sticky header. */
#tcal { scroll-margin-top: 88px; }