/*
  Group bookings & quotes graphic (templates/_graphics/groupBooking.twig): the
  venue's group booking page in a browser frame, the team's view of the request
  and their reply, the organiser's guest list filling from a pasted spreadsheet,
  the pointer and the success burst.
  Colours come from the tokens in graphics.css.
*/
[data-g17-graphic="groupBooking"] .g17g-gb-page { padding: 0; overflow: hidden; }
[data-g17-graphic="groupBooking"] .g17g-gb-bar { display: flex; align-items: center; gap: .3em; height: 1.8em; padding: 0 .8em; background: var(--g17g-soft); }
[data-g17-graphic="groupBooking"] .g17g-gb-bar > i { width: .42em; height: .42em; border-radius: 50%; background: var(--g17g-border-strong); }
[data-g17-graphic="groupBooking"] .g17g-gb-url { display: flex; align-items: center; gap: .35em; margin: 0 auto; padding: .2em .9em; border-radius: 999px; background: var(--g17g-card); font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-url svg { width: 1em; height: 1em; color: var(--g17g-green); }

/* The venue's own site header and a flat purple hero */
[data-g17-graphic="groupBooking"] .g17g-gb-site { display: flex; align-items: center; gap: .5em; height: 2.4em; padding: 0 1.05em; border-bottom: 1px solid var(--g17g-rule); }
[data-g17-graphic="groupBooking"] .g17g-gb-logo { display: flex; align-items: center; gap: .45em; font-size: .72em; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-logo i { width: 1.3em; height: 1.3em; border-radius: .35em; background: var(--g17g-green); box-shadow: inset 0 -.4em 0 var(--g17g-purple); }
[data-g17-graphic="groupBooking"] .g17g-gb-nav { display: flex; gap: 1.1em; margin-left: 1.6em; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-nav b { color: var(--g17g-text); }
[data-g17-graphic="groupBooking"] .g17g-gb-hero { padding: .85em 1.05em .9em; background: var(--g17g-purple); color: var(--g17g-on-green); }
[data-g17-graphic="groupBooking"] .g17g-gb-kicker { display: block; font-size: .56em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-h1 { display: block; margin: .15em 0 .2em; font-size: 1.2em; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-sub { display: block; font-size: .6em; opacity: .85; white-space: nowrap; }

/* The quote form, mostly filled in already */
[data-g17-graphic="groupBooking"] .g17g-gb-body { padding: .1em 1.05em 1.05em; }
[data-g17-graphic="groupBooking"] .g17g-gb-body .g17g-label { margin-top: .75em; }
[data-g17-graphic="groupBooking"] .g17g-gb-filled { padding: 0 .3em; gap: .5em; }
[data-g17-graphic="groupBooking"] .g17g-gb-filled .g17g-chip { font-size: .8em; padding: .35em .7em .35em .5em; }
[data-g17-graphic="groupBooking"] .g17g-gb-filled .g17g-chip svg { width: 1.1em; height: 1.1em; }

/* Who is coming: group type pills, one picked */
[data-g17-graphic="groupBooking"] .g17g-gb-types { display: flex; gap: .4em; }
[data-g17-graphic="groupBooking"] .g17g-gb-type {
    position: relative; display: inline-flex; align-items: center; padding: .45em .95em; border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--g17g-border); font-size: .62em; font-weight: 600; color: var(--g17g-text-soft); white-space: nowrap;
}
[data-g17-graphic="groupBooking"] .g17g-gb-type > span { position: relative; z-index: 1; }
[data-g17-graphic="groupBooking"] .g17g-gb-type__on { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: var(--g17g-green-tint); box-shadow: inset 0 0 0 2px var(--g17g-green); }

/* Needs: small switches, one turned on */
[data-g17-graphic="groupBooking"] .g17g-gb-needs { display: flex; align-items: center; gap: 1.1em; margin-top: .95em; font-size: .62em; color: var(--g17g-text-soft); white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-needs__label { font-weight: 500; color: var(--g17g-muted); }
[data-g17-graphic="groupBooking"] .g17g-gb-toggle { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; }
[data-g17-graphic="groupBooking"] .g17g-gb-toggle i { position: relative; flex: none; width: 2.3em; height: 1.35em; border-radius: 999px; background: var(--g17g-border); overflow: hidden; }
[data-g17-graphic="groupBooking"] .g17g-gb-toggle i b { position: absolute; inset: 0; border-radius: inherit; background: var(--g17g-green); }
[data-g17-graphic="groupBooking"] .g17g-gb-toggle em { position: absolute; left: .18em; top: .18em; width: .99em; height: .99em; border-radius: 50%; background: var(--g17g-card); box-shadow: 0 .05em .2em var(--g17g-shadow); }
[data-g17-graphic="groupBooking"] .g17g-gb-toggle [data-part="knob"] { left: auto; right: .18em; }

/* Group size stepper: the number rolls up on a reel */
[data-g17-graphic="groupBooking"] .g17g-gb-stepper { padding: 0 .3em; gap: .45em; }
[data-g17-graphic="groupBooking"] .g17g-gb-step { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--g17g-soft); color: var(--g17g-muted); }
[data-g17-graphic="groupBooking"] .g17g-gb-step svg { width: 60%; height: 60%; }
[data-g17-graphic="groupBooking"] .g17g-gb-step--plus { margin-left: auto; background: var(--g17g-green); color: var(--g17g-on-green); }
[data-g17-graphic="groupBooking"] .g17g-gb-size { position: relative; display: block; width: 1.5em; height: 1.3em; overflow: hidden; font-size: 1.1em; font-weight: 700; letter-spacing: -.01em; transform-origin: 50% 60%; }
[data-g17-graphic="groupBooking"] .g17g-gb-reel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
[data-g17-graphic="groupBooking"] .g17g-gb-reel > span { display: block; height: 1.3em; line-height: 1.3em; text-align: center; }
[data-g17-graphic="groupBooking"] .g17g-gb-unit { font-size: .85em; }

/* Vehicle choice cards. The selected highlight sits behind the card's text. */
[data-g17-graphic="groupBooking"] .g17g-gb-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg { position: relative; isolation: isolate; display: block; padding: .45em .45em .55em; border-radius: .7em; background: var(--g17g-card); box-shadow: inset 0 0 0 1px var(--g17g-border); white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg > b, [data-g17-graphic="groupBooking"] .g17g-gb-pkg > span:not(.g17g-gb-fit) { position: relative; z-index: 1; display: block; }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg > b { margin: .55em .2em .15em; font-size: .64em; }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg > span:not(.g17g-gb-pkg__img):not(.g17g-gb-fit) { margin: 0 .25em; font-size: .56em; color: var(--g17g-muted); }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg__img { display: grid !important; place-items: center; height: 2.3em; border-radius: .45em; background: var(--g17g-purple-bg); color: var(--g17g-purple); }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg__img svg { width: 1.7em; height: 1.7em; }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg__on { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: var(--g17g-green-tint); box-shadow: inset 0 0 0 2px var(--g17g-green); }
[data-g17-graphic="groupBooking"] .g17g-gb-pkg__on svg { position: absolute; right: .45em; top: 3.05em; width: 1.05em; height: 1.05em; }
[data-g17-graphic="groupBooking"] .g17g-gb-fit { position: absolute; z-index: 3; left: 0; right: 0; top: -.7em; display: flex; justify-content: center; }
[data-g17-graphic="groupBooking"] .g17g-gb-fit .g17g-chip { font-size: .56em; box-shadow: 0 0 0 2px var(--g17g-card); }
[data-g17-graphic="groupBooking"] .g17g-gb-page .g17g-btn { width: 15em; margin-top: 1em; }

/* The team's view of the request */
[data-g17-graphic="groupBooking"] .g17g-gb-team { z-index: 3; }
[data-g17-graphic="groupBooking"] .g17g-gb-who { padding: 0; height: 2.3em; }
[data-g17-graphic="groupBooking"] .g17g-gb-who .g17g-av { font-size: .66em; }
[data-g17-graphic="groupBooking"] .g17g-gb-who .g17g-row__name { font-size: .8em; }
[data-g17-graphic="groupBooking"] .g17g-gb-who .g17g-swap { flex: none; }
[data-g17-graphic="groupBooking"] .g17g-gb-sum { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: .35em; margin-top: .6em; }
[data-g17-graphic="groupBooking"] .g17g-gb-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .3em; padding: .4em .5em .45em; border-radius: .6em; background: var(--g17g-soft); white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-cell i { display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: .4em; background: var(--g17g-card); color: var(--g17g-purple); }
[data-g17-graphic="groupBooking"] .g17g-gb-cell i svg { width: 70%; height: 70%; }
[data-g17-graphic="groupBooking"] .g17g-gb-cell b { font-size: .62em; letter-spacing: -.01em; }

/* The reply, at the foot of the team's card */
[data-g17-graphic="groupBooking"] .g17g-gb-quote { display: flex; align-items: center; gap: .55em; margin-top: .45em; padding: .4em .7em .4em .4em; border-radius: .7em; background: var(--g17g-green-tint); }
[data-g17-graphic="groupBooking"] .g17g-gb-quote .g17g-gb-disc { width: 1.8em; height: 1.8em; }
[data-g17-graphic="groupBooking"] .g17g-gb-quote__text { min-width: 0; }
[data-g17-graphic="groupBooking"] .g17g-gb-quote__text b { display: block; font-size: .7em; white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-quote__text span { display: block; margin-top: .15em; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="groupBooking"] .g17g-gb-disc { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--g17g-green); }
[data-g17-graphic="groupBooking"] .g17g-gb-disc svg { width: 58%; height: 58%; }
[data-g17-graphic="groupBooking"] .g17g-gb-disc path { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }

/* The organiser's guest list */
[data-g17-graphic="groupBooking"] .g17g-gb-guests { z-index: 3; }
[data-g17-graphic="groupBooking"] .g17g-gb-guests .g17g-head { margin-bottom: .55em; }
[data-g17-graphic="groupBooking"] .g17g-gb-num { position: relative; display: inline-block; width: 1.3em; height: 1.25em; overflow: hidden; vertical-align: top; }
[data-g17-graphic="groupBooking"] .g17g-gb-numreel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
[data-g17-graphic="groupBooking"] .g17g-gb-numreel > span { display: block; height: 1.25em; line-height: 1.25em; text-align: right; }
[data-g17-graphic="groupBooking"] .g17g-gb-paste {
    display: flex; align-items: center; justify-content: center; gap: .45em; height: 2.1em; margin-bottom: .5em; border-radius: 999px;
    background: var(--g17g-purple-bg); color: var(--g17g-purple-text); font-size: .66em; font-weight: 600; white-space: nowrap;
}
[data-g17-graphic="groupBooking"] .g17g-gb-paste svg { width: 1.25em; height: 1.25em; }
[data-g17-graphic="groupBooking"] .g17g-gb-list { display: grid; gap: .25em; }
[data-g17-graphic="groupBooking"] .g17g-gb-guest { position: relative; height: 2.35em; }
[data-g17-graphic="groupBooking"] .g17g-gb-slot, [data-g17-graphic="groupBooking"] .g17g-gb-fill { position: absolute; inset: 0; display: flex; align-items: center; gap: .55em; padding: 0 .45em; border-radius: .7em; }
/* The empty slot is hidden in the finished frame; the story shows it before the paste */
[data-g17-graphic="groupBooking"] .g17g-gb-slot { background: var(--g17g-soft); clip-path: inset(0 0 0 100%); }
[data-g17-graphic="groupBooking"] .g17g-gb-slot i { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--g17g-skel); }
[data-g17-graphic="groupBooking"] .g17g-gb-slot .g17g-row__name, [data-g17-graphic="groupBooking"] .g17g-gb-slot .g17g-row__meta { font-weight: 500; color: var(--g17g-faint); }
[data-g17-graphic="groupBooking"] .g17g-gb-fill .g17g-chip { flex: none; font-size: .56em; }
[data-g17-graphic="groupBooking"] .g17g-gb-gfoot { justify-content: space-between; }
[data-g17-graphic="groupBooking"] .g17g-gb-gfoot .g17g-chip { font-size: 1em; }

/* Layers that fill the stage: the pointer and the burst */
[data-g17-graphic="groupBooking"] .g17g-gb-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
[data-g17-graphic="groupBooking"] .g17g-gb-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="groupBooking"] .g17g-gb-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="groupBooking"] .g17g-gb-burst { z-index: 7; }
[data-g17-graphic="groupBooking"] .g17g-gb-burst i { position: absolute; left: -.22em; top: -.22em; width: .44em; height: .44em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="groupBooking"] .g17g-gb-burst i:nth-child(even) { background: var(--g17g-purple); }