/*
  Activity & session booking graphic (templates/_graphics/activityBooking.twig):
  Rathmoy Leisure's booking page in a browser, the day's bookings, the
  confirmation that slides in, a pointer and a burst of dots. Colours come from
  the tokens in graphics.css.
*/

/* The booking page, in a light browser frame */
[data-g17-graphic="activityBooking"] .g17g-ab-page { padding: 0; overflow: hidden; }
[data-g17-graphic="activityBooking"] .g17g-ab-bar { display: flex; align-items: center; gap: .3em; height: 1.8em; padding: 0 .8em; background: var(--g17g-soft); }
[data-g17-graphic="activityBooking"] .g17g-ab-bar > i { width: .42em; height: .42em; border-radius: 50%; background: var(--g17g-border-strong); }
[data-g17-graphic="activityBooking"] .g17g-ab-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="activityBooking"] .g17g-ab-url svg { width: 1em; height: 1em; color: var(--g17g-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-site { display: flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 .95em; }
[data-g17-graphic="activityBooking"] .g17g-ab-logo { display: flex; align-items: center; gap: .45em; font-size: .7em; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-logo i { width: 1.3em; height: 1.3em; border-radius: .35em; background: var(--g17g-purple); box-shadow: inset 0 -.42em 0 var(--g17g-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-nav { display: flex; gap: 1.1em; margin-left: 1.4em; font-size: .54em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-nav b { color: var(--g17g-text); box-shadow: 0 .45em 0 -.25em var(--g17g-purple); }
[data-g17-graphic="activityBooking"] .g17g-ab-me { margin-left: auto; display: flex; align-items: center; gap: .45em; font-size: .58em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-me .g17g-av { width: 2.1em; height: 2.1em; font-size: .9em; }

/* A flat purple hero */
[data-g17-graphic="activityBooking"] .g17g-ab-hero { position: relative; margin: 0 .95em; padding: .7em 1em .75em; border-radius: .9em; background: var(--g17g-purple); color: var(--g17g-on-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-kicker { display: block; font-size: .52em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-h1 { display: block; margin-top: .1em; font-size: 1.2em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-open { position: absolute; right: 1em; bottom: .85em; font-size: .52em; background: var(--g17g-card); color: var(--g17g-purple-text); }

/* Activity tabs */
[data-g17-graphic="activityBooking"] .g17g-ab-body { padding: .75em .95em .95em; }
[data-g17-graphic="activityBooking"] .g17g-ab-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; }
[data-g17-graphic="activityBooking"] .g17g-ab-tab { display: flex; align-items: center; gap: .4em; padding: .4em .45em; border-radius: .65em; box-shadow: inset 0 0 0 1px var(--g17g-border); white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-tab > i { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: .45em; background: var(--g17g-soft); color: var(--g17g-muted); }
[data-g17-graphic="activityBooking"] .g17g-ab-tab > i svg { width: 64%; height: 64%; }
[data-g17-graphic="activityBooking"] .g17g-ab-tab > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
[data-g17-graphic="activityBooking"] .g17g-ab-tab b { font-size: .6em; font-weight: 700; }
[data-g17-graphic="activityBooking"] .g17g-ab-tab small { font-size: .48em; color: var(--g17g-muted); }
[data-g17-graphic="activityBooking"] .g17g-ab-tab.is-on { background: var(--g17g-green-tint); box-shadow: inset 0 0 0 1.5px var(--g17g-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-tab.is-on > i { background: var(--g17g-green); color: var(--g17g-on-green); }

/* Day strip */
[data-g17-graphic="activityBooking"] .g17g-ab-row { display: flex; align-items: center; gap: .5em; margin-top: .8em; }
[data-g17-graphic="activityBooking"] .g17g-ab-sub { display: block; font-size: .64em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-live { font-size: .52em; }
[data-g17-graphic="activityBooking"] .g17g-ab-live i { width: .6em; height: .6em; border-radius: 50%; background: var(--g17g-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-days { position: relative; margin-left: auto; display: flex; padding: .2em; border-radius: 999px; background: var(--g17g-soft); font-size: .56em; font-weight: 700; color: var(--g17g-text-soft); }
[data-g17-graphic="activityBooking"] .g17g-ab-days > span { position: relative; width: 4.4em; padding: .38em 0; text-align: center; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-days__thumb { position: absolute; top: .2em; bottom: .2em; left: calc(.2em + 4.4em); width: 4.4em; border-radius: 999px; background: var(--g17g-card); box-shadow: 0 .1em .3em var(--g17g-shadow); }

/* Time slots, each with its live spaces */
[data-g17-graphic="activityBooking"] .g17g-ab-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; margin-top: .55em; }
[data-g17-graphic="activityBooking"] .g17g-ab-slot {
    position: relative; isolation: isolate; display: flex; align-items: baseline; justify-content: space-between; gap: .3em;
    padding: .62em .6em; border-radius: .65em; box-shadow: inset 0 0 0 1px var(--g17g-border); white-space: nowrap; line-height: 1.2;
}
[data-g17-graphic="activityBooking"] .g17g-ab-slot b { font-size: .66em; font-weight: 800; letter-spacing: -.01em; }
[data-g17-graphic="activityBooking"] .g17g-ab-slot em { justify-items: end; font-size: .52em; font-style: normal; font-weight: 700; color: var(--g17g-green-text); }
[data-g17-graphic="activityBooking"] .g17g-ab-slot em .is-full { color: var(--g17g-faint); }
[data-g17-graphic="activityBooking"] .g17g-ab-slot__full { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--g17g-soft); }
[data-g17-graphic="activityBooking"] .g17g-ab-slot__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="activityBooking"] .g17g-ab-roll { position: relative; display: inline-grid; overflow: hidden; vertical-align: bottom; }
[data-g17-graphic="activityBooking"] .g17g-ab-roll > * { grid-area: 1 / 1; white-space: nowrap; }

/* Players and shoe hire */
[data-g17-graphic="activityBooking"] .g17g-ab-opts { display: grid; grid-template-columns: 1fr 1.2fr; gap: .5em; margin-top: .75em; }
[data-g17-graphic="activityBooking"] .g17g-ab-players,
[data-g17-graphic="activityBooking"] .g17g-ab-extra { position: relative; isolation: isolate; display: flex; align-items: center; gap: .5em; padding: .5em .6em; border-radius: .7em; box-shadow: inset 0 0 0 1px var(--g17g-border); }
[data-g17-graphic="activityBooking"] .g17g-ab-players { justify-content: space-between; }
[data-g17-graphic="activityBooking"] .g17g-ab-opt__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-opt__t b { font-size: .62em; font-weight: 700; }
[data-g17-graphic="activityBooking"] .g17g-ab-opt__t small { font-size: .5em; color: var(--g17g-muted); }
[data-g17-graphic="activityBooking"] .g17g-ab-opt__t .g17g-ab-add { font-weight: 600; color: var(--g17g-purple-text); }
[data-g17-graphic="activityBooking"] .g17g-ab-step { flex: none; display: flex; align-items: center; gap: .1em; }
[data-g17-graphic="activityBooking"] .g17g-ab-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="activityBooking"] .g17g-ab-step > i.g17g-ab-plus { background: var(--g17g-green); box-shadow: none; color: var(--g17g-on-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-step svg { width: 58%; height: 58%; }
[data-g17-graphic="activityBooking"] .g17g-ab-num { justify-items: center; width: 1.6em; font-size: .72em; font-weight: 800; }
[data-g17-graphic="activityBooking"] .g17g-ab-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="activityBooking"] .g17g-ab-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="activityBooking"] .g17g-ab-extra__ico svg { width: 64%; height: 64%; }
[data-g17-graphic="activityBooking"] .g17g-ab-switch { position: relative; flex: none; width: 1.9em; height: 1.1em; border-radius: 999px; background: var(--g17g-border-strong); }
[data-g17-graphic="activityBooking"] .g17g-ab-switch__on { position: absolute; inset: 0; border-radius: inherit; background: var(--g17g-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-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); }

/* The price, with the member price applied, and the button */
[data-g17-graphic="activityBooking"] .g17g-ab-foot { display: flex; align-items: flex-end; gap: .9em; margin-top: .75em; padding-top: .7em; border-top: 1px solid var(--g17g-rule); }
[data-g17-graphic="activityBooking"] .g17g-ab-price { flex: 1; min-width: 0; }
[data-g17-graphic="activityBooking"] .g17g-ab-price__top { display: flex; align-items: center; gap: .5em; height: 1.2em; }
[data-g17-graphic="activityBooking"] .g17g-ab-price__top > span:first-child { font-size: .6em; color: var(--g17g-muted); }
[data-g17-graphic="activityBooking"] .g17g-ab-member { font-size: .52em; padding: .25em .65em; }
[data-g17-graphic="activityBooking"] .g17g-ab-price__main { display: flex; align-items: baseline; gap: .8em; margin-top: .15em; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-total { justify-items: start; font-size: 1.3em; font-weight: 800; letter-spacing: -.02em; }
[data-g17-graphic="activityBooking"] .g17g-ab-was { position: relative; font-size: .62em; font-weight: 600; color: var(--g17g-faint); }
[data-g17-graphic="activityBooking"] .g17g-ab-was i { position: absolute; left: -.1em; right: -.1em; top: 52%; height: 1px; background: currentColor; transform-origin: 0 50%; }
[data-g17-graphic="activityBooking"] .g17g-ab-mp { font-size: .56em; font-weight: 700; color: var(--g17g-purple-text); }
[data-g17-graphic="activityBooking"] .g17g-ab-foot .g17g-btn { flex: none; width: 42%; margin-top: 0; }

/* The day's bookings */
[data-g17-graphic="activityBooking"] .g17g-ab-today { z-index: 3; padding: .9em 1em; }
[data-g17-graphic="activityBooking"] .g17g-ab-today .g17g-title { display: block; }
[data-g17-graphic="activityBooking"] .g17g-ab-countrow { display: flex; align-items: center; gap: .45em; margin-top: .3em; }
[data-g17-graphic="activityBooking"] .g17g-ab-count { flex: none; width: 3.2em; }
[data-g17-graphic="activityBooking"] .g17g-ab-of { font-size: .6em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-chart { height: 2em; margin: .45em 0 .55em; }
[data-g17-graphic="activityBooking"] .g17g-ab-swap { display: grid; justify-items: start; }
[data-g17-graphic="activityBooking"] .g17g-ab-swap > * { grid-area: 1 / 1; margin-top: 0; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-last { font-size: .6em; color: var(--g17g-faint); }

/* The confirmation: the wrap drifts, the card inside slides in */
[data-g17-graphic="activityBooking"] .g17g-ab-confwrap { position: absolute; z-index: 4; }
[data-g17-graphic="activityBooking"] .g17g-ab-conf { position: relative; padding: .9em 1em 1em; }
[data-g17-graphic="activityBooking"] .g17g-ab-conf__head { display: flex; align-items: center; gap: .5em; }
[data-g17-graphic="activityBooking"] .g17g-ab-conf__head b { font-size: .9em; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-ok { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--g17g-green); }
[data-g17-graphic="activityBooking"] .g17g-ab-ok svg { width: 64%; height: 64%; }
[data-g17-graphic="activityBooking"] .g17g-ab-conf__meta { display: block; margin-top: .55em; font-size: .6em; font-weight: 600; color: var(--g17g-text-soft); white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-conf__ref { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .6em; padding-top: .6em; border-top: 1px solid var(--g17g-rule); }
[data-g17-graphic="activityBooking"] .g17g-ab-conf__ref > span:first-child { font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-cal { display: flex; align-items: center; justify-content: center; gap: .45em; margin-top: .75em; height: 2.3em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--g17g-green); color: var(--g17g-green-text); font-size: .62em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="activityBooking"] .g17g-ab-cal svg { width: 1.25em; height: 1.25em; }

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