/*
  Tour & activity booking graphic (templates/_graphics/tourBooking.twig): a coach
  tour page in a browser, a ticket that flies out, the operator's Bookeo manifest,
  a pointer and a burst of dots. Colours come from the tokens in graphics.css.
*/

/* The tour page, in a light browser frame */
[data-g17-graphic="tourBooking"] .g17g-tb-page { padding: 0; overflow: hidden; }
[data-g17-graphic="tourBooking"] .g17g-tb-bar { display: flex; align-items: center; gap: .3em; height: 1.8em; padding: 0 .8em; background: var(--g17g-soft); }
[data-g17-graphic="tourBooking"] .g17g-tb-bar > i { width: .42em; height: .42em; border-radius: 50%; background: var(--g17g-border-strong); }
[data-g17-graphic="tourBooking"] .g17g-tb-url { display: flex; align-items: center; gap: .35em; margin: 0 auto; padding: .2em .9em; border-radius: 999px; background: var(--g17g-card); font-size: .54em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-url svg { width: 1em; height: 1em; color: var(--g17g-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-site { display: flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 .95em; }
[data-g17-graphic="tourBooking"] .g17g-tb-logo { display: flex; align-items: center; gap: .45em; font-size: .7em; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-logo i { width: 1.3em; height: 1.3em; border-radius: .35em .35em .35em 50%; background: var(--g17g-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-nav { display: flex; gap: 1.1em; margin-left: 1.6em; font-size: .54em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-nav b { color: var(--g17g-text); box-shadow: 0 .45em 0 -.25em var(--g17g-green); }

/* A flat green hero with the tour's name */
[data-g17-graphic="tourBooking"] .g17g-tb-hero { position: relative; margin: 0 .95em; padding: .85em 1em .95em; border-radius: .9em; background: var(--g17g-green); color: var(--g17g-on-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-kicker { display: block; font-size: .54em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-h1 { display: block; margin: .15em 0 .45em; font-size: 1.22em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-chips { display: flex; gap: .3em; }
[data-g17-graphic="tourBooking"] .g17g-tb-hchip { font-size: .54em; background: var(--g17g-card); color: var(--g17g-green-text); }
[data-g17-graphic="tourBooking"] .g17g-tb-from { position: absolute; right: 1em; top: .85em; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-from small { font-size: .54em; font-weight: 600; opacity: .85; }
[data-g17-graphic="tourBooking"] .g17g-tb-from b { font-size: 1.05em; font-weight: 800; letter-spacing: -.02em; }

/* Live availability: a strip of days */
[data-g17-graphic="tourBooking"] .g17g-tb-body { padding: .8em .95em 1em; }
[data-g17-graphic="tourBooking"] .g17g-tb-row { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
[data-g17-graphic="tourBooking"] .g17g-tb-sub { display: block; font-size: .64em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-live { width: .55em; height: .55em; border-radius: 50%; background: var(--g17g-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35em; margin-top: .5em; }
[data-g17-graphic="tourBooking"] .g17g-tb-day {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
    padding: .5em .55em .5em; border-radius: .65em; box-shadow: inset 0 0 0 1px var(--g17g-border); white-space: nowrap; line-height: 1.2;
}
[data-g17-graphic="tourBooking"] .g17g-tb-day small { font-size: .5em; font-weight: 600; color: var(--g17g-muted); text-transform: uppercase; letter-spacing: .05em; }
[data-g17-graphic="tourBooking"] .g17g-tb-day b { margin: .1em 0 .2em; font-size: .66em; font-weight: 800; letter-spacing: -.01em; }
[data-g17-graphic="tourBooking"] .g17g-tb-day em { font-size: .52em; font-style: normal; font-weight: 700; color: var(--g17g-green-text); }
[data-g17-graphic="tourBooking"] .g17g-tb-day--out { background: var(--g17g-soft); box-shadow: none; }
[data-g17-graphic="tourBooking"] .g17g-tb-day--out b { color: var(--g17g-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
[data-g17-graphic="tourBooking"] .g17g-tb-day--out em { color: var(--g17g-faint); }
[data-g17-graphic="tourBooking"] .g17g-tb-day__on { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--g17g-green-tint); box-shadow: inset 0 0 0 2px var(--g17g-green); }

/* Two or more stacked values that roll from one to the next */
[data-g17-graphic="tourBooking"] .g17g-tb-roll { position: relative; display: inline-grid; overflow: hidden; vertical-align: bottom; }
[data-g17-graphic="tourBooking"] .g17g-tb-roll > * { grid-area: 1 / 1; white-space: nowrap; }

/* Travellers, extras, the total and the button */
[data-g17-graphic="tourBooking"] .g17g-tb-cols { display: grid; grid-template-columns: 1fr 1.08fr; gap: 1.1em; margin-top: .95em; }
[data-g17-graphic="tourBooking"] .g17g-tb-pax { display: flex; align-items: center; justify-content: space-between; gap: .5em; height: 2.55em; border-bottom: 1px solid var(--g17g-rule); }
[data-g17-graphic="tourBooking"] .g17g-tb-pax:last-child { border-bottom: 0; }
[data-g17-graphic="tourBooking"] .g17g-tb-sub + .g17g-tb-pax { margin-top: .2em; }
[data-g17-graphic="tourBooking"] .g17g-tb-pax__t { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-pax__t b { font-size: .64em; font-weight: 700; }
[data-g17-graphic="tourBooking"] .g17g-tb-pax__t small { font-size: .52em; color: var(--g17g-muted); }
[data-g17-graphic="tourBooking"] .g17g-tb-step { display: flex; align-items: center; gap: .1em; }
[data-g17-graphic="tourBooking"] .g17g-tb-step > i { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--g17g-border-strong); color: var(--g17g-muted); }
[data-g17-graphic="tourBooking"] .g17g-tb-step > i.g17g-tb-plus { background: var(--g17g-green); box-shadow: none; color: var(--g17g-on-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-step svg { width: 58%; height: 58%; }
[data-g17-graphic="tourBooking"] .g17g-tb-num { justify-items: center; width: 1.6em; font-size: .72em; font-weight: 800; }

[data-g17-graphic="tourBooking"] .g17g-tb-extra {
    position: relative; isolation: isolate; display: flex; align-items: center; gap: .5em;
    margin-top: .45em; padding: .5em .55em; border-radius: .7em; box-shadow: inset 0 0 0 1px var(--g17g-border);
}
[data-g17-graphic="tourBooking"] .g17g-tb-extra__on { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--g17g-green-tint); box-shadow: inset 0 0 0 1.5px var(--g17g-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-extra__ico { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .5em; background: var(--g17g-purple-bg); color: var(--g17g-purple); }
[data-g17-graphic="tourBooking"] .g17g-tb-extra__ico svg { width: 62%; height: 62%; }
[data-g17-graphic="tourBooking"] .g17g-tb-extra__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-extra__t b { font-size: .6em; font-weight: 700; }
[data-g17-graphic="tourBooking"] .g17g-tb-extra__t small { font-size: .5em; font-weight: 600; color: var(--g17g-purple-text); }
[data-g17-graphic="tourBooking"] .g17g-tb-switch { position: relative; flex: none; width: 1.9em; height: 1.1em; border-radius: 999px; background: var(--g17g-border-strong); }
[data-g17-graphic="tourBooking"] .g17g-tb-switch__on { position: absolute; inset: 0; border-radius: inherit; background: var(--g17g-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-switch__knob { position: absolute; top: .14em; right: .14em; width: .82em; height: .82em; border-radius: 50%; background: var(--g17g-on-green); box-shadow: 0 .05em .15em var(--g17g-shadow); }

[data-g17-graphic="tourBooking"] .g17g-tb-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: .6em; font-size: .62em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-total .g17g-tb-roll { justify-items: end; font-size: 1.75em; font-weight: 800; letter-spacing: -.02em; color: var(--g17g-text); }
[data-g17-graphic="tourBooking"] .g17g-tb-buy .g17g-btn { margin-top: .5em; }

/* The ticket: the wrap drifts, the card inside flies in */
[data-g17-graphic="tourBooking"] .g17g-tb-ticketwrap { position: absolute; z-index: 4; }
[data-g17-graphic="tourBooking"] .g17g-tb-ticket { position: relative; padding: .95em 1em 1em; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkhead { display: flex; align-items: center; gap: .5em; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkhead b { font-size: .95em; letter-spacing: -.01em; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkhead .g17g-chip { margin-left: auto; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkok { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--g17g-green); }
[data-g17-graphic="tourBooking"] .g17g-tb-tkok svg { width: 64%; height: 64%; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkname { display: block; margin-top: .75em; font-size: .7em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkmeta { display: block; margin-top: .2em; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkfoot { display: flex; align-items: center; gap: .75em; margin-top: .75em; padding-top: .75em; border-top: 1px solid var(--g17g-rule); }
[data-g17-graphic="tourBooking"] .g17g-tb-qr { flex: none; display: grid; grid-template-columns: repeat(9, 1fr); width: 3.3em; height: 3.3em; padding: .25em; border-radius: .4em; box-shadow: inset 0 0 0 1px var(--g17g-border); }
[data-g17-graphic="tourBooking"] .g17g-tb-qr i.on { background: var(--g17g-text); }
[data-g17-graphic="tourBooking"] .g17g-tb-tkinfo { min-width: 0; display: flex; flex-direction: column; gap: .25em; font-size: .56em; color: var(--g17g-text-soft); white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-tkpaid { font-weight: 700; color: var(--g17g-green-text); }

/* The operator's Bookeo manifest */
[data-g17-graphic="tourBooking"] .g17g-tb-ops { z-index: 3; }
[data-g17-graphic="tourBooking"] .g17g-tb-countrow { display: flex; align-items: center; gap: .4em; }
[data-g17-graphic="tourBooking"] .g17g-tb-count { width: 1.3em; flex: none; }
[data-g17-graphic="tourBooking"] .g17g-tb-of { font-size: .6em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-meter { position: relative; height: .45em; margin: .5em 0 .5em; border-radius: .3em; background: var(--g17g-skel); overflow: hidden; }
[data-g17-graphic="tourBooking"] .g17g-tb-meter b { position: absolute; inset: 0; border-radius: inherit; background: var(--g17g-green); transform-origin: 0 50%; }
[data-g17-graphic="tourBooking"] .g17g-tb-swap { display: grid; justify-items: start; }
[data-g17-graphic="tourBooking"] .g17g-tb-swap > * { grid-area: 1 / 1; margin-top: 0; white-space: nowrap; }
[data-g17-graphic="tourBooking"] .g17g-tb-last { font-size: .6em; color: var(--g17g-faint); }

/* Layers that fill the stage: the burst and the pointer */
[data-g17-graphic="tourBooking"] .g17g-tb-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
[data-g17-graphic="tourBooking"] .g17g-tb-cursor svg { position: absolute; left: -.32em; top: -.2em; width: 1.55em; height: 1.55em; color: var(--g17g-text); filter: drop-shadow(0 .15em .25em var(--g17g-shadow)); }
[data-g17-graphic="tourBooking"] .g17g-tb-ring { position: absolute; left: -.9em; top: -.9em; width: 1.8em; height: 1.8em; border-radius: 50%; border: 2px solid var(--g17g-green); opacity: 0; }
[data-g17-graphic="tourBooking"] .g17g-tb-burst { z-index: 7; }
[data-g17-graphic="tourBooking"] .g17g-tb-burst i { position: absolute; left: -.22em; top: -.22em; width: .44em; height: .44em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="tourBooking"] .g17g-tb-burst i:nth-child(even) { background: var(--g17g-purple); }