/* Booking widget on workshop pages. Uses the same tokens as site.css:
   hairline cards, black for "selected", green for the pay button. */
.fw { color: var(--ink); max-width: 640px; }
.fw * { box-sizing: border-box; }
.fw-meta { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 6px; }
.fw-meta svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--purple); }
.fw-pill { display: inline-block; background: var(--surface); color: var(--purple); border-radius: 999px; padding: 3px 12px; font-weight: 900; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-left: 6px; }
.fw-links { display: flex; gap: 18px; align-items: center; margin: 10px 0 24px; font-size: 15px; }
.fw-links a, .fw-linkbtn { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.fw-label { font-weight: 800; font-size: 22px; color: var(--ink); margin: 22px 0 10px; line-height: 1.15; }
.fw-sub { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.fw-reminder { font-size: 14px; color: var(--muted); margin: 10px 0; }

/* Dates */
.fw-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fw-row { display: grid; gap: 2px; padding: 11px 13px; border: 1.5px solid var(--surface-deep); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.fw-row:hover { border-color: var(--ink); }
.fw-row-date { font-weight: 700; font-size: 15px; }
.fw-row-time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fw-row-left { font-size: 12px; font-weight: 800; color: var(--orange); min-height: 14px; }
.fw-row.selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.fw-row.selected .fw-row-time, .fw-row.selected .fw-row-left { color: #fff; }
.fw-row.full { opacity: .45; cursor: not-allowed; border-style: dashed; }
.fw-more { background: none; border: 0; padding: 0; margin: 2px 0 6px; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Tickets, quantity, pay-what-you-want */
.fw-tickets { display: grid; gap: 8px; }
.fw-ticket { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--surface-deep); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); text-align: left; font: inherit; width: 100%; cursor: pointer; }
.fw-ticket:hover { border-color: var(--ink); }
.fw-ticket.selected { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: #F3F6FA; }
.fw-ticket .t-label { font-weight: 700; font-size: 16px; }
.fw-ticket .t-note { font-size: 14px; color: var(--muted); margin-top: 2px; }
.fw-ticket .t-badge { display: inline-block; background: var(--orange); color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; margin-bottom: 4px; }
.fw-ticket .t-price { text-align: right; font-weight: 900; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fw-ticket .t-price s { display: block; font-weight: 500; font-size: 13px; color: var(--muted); }
.fw-qty-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fw-stepper { display: inline-flex; align-items: center; gap: 12px; border: 1.5px solid var(--surface-deep); border-radius: 999px; padding: 4px; background: var(--paper); }
.fw-stepper button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.fw-stepper output { font-weight: 900; font-size: 18px; min-width: 22px; text-align: center; }
.fw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-chip { border: 1.5px solid var(--surface-deep); border-radius: 999px; padding: 8px 16px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.fw-chip.selected { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Donation chips: amount + a little line about what it buys */
.fw-chips--fun .fw-chip { display: grid; gap: 1px; text-align: center; border-radius: 16px; padding: 9px 14px; min-width: 92px; transition: transform .15s; }
.fw-chips--fun .fw-chip b { font-weight: 800; font-size: 15px; }
.fw-chips--fun .fw-chip small { font-weight: 500; font-size: 12px; opacity: .7; white-space: nowrap; }
.fw-chips--fun .fw-chip:hover { transform: translateY(-2px) rotate(-1deg); }
.fw-chips--fun .fw-chip.selected small { opacity: .85; }
.fw-chip.pop { animation: fw-pop .35s cubic-bezier(.2,1.8,.4,1); }
@keyframes fw-pop { 40% { transform: scale(1.08) rotate(2deg); } }
.fw-thx { margin: 10px 0 0; min-height: 1.4em; font-weight: 700; font-size: 14px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .fw-chip.pop { animation: none; } .fw-chips--fun .fw-chip:hover { transform: none; } }

/* Details and paying */
.fw-step2 { display: grid; gap: 12px; }
.fw-login-hint { font-size: 14px; color: var(--muted); }
.fw-login-hint a { color: var(--ink); font-weight: 700; }
.fw-extras { background: var(--paper); border: 1.5px solid var(--hair); border-radius: var(--r-sm); margin: 0; }
.fw-extras summary { padding: 12px 16px; font-size: 14px; }
.fw-extras summary::after { width: 22px; height: 22px; font-size: 15px; background: var(--surface); color: var(--purple); }
.fw-extras > :not(summary) { margin: 0 16px 14px; }
.fw-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fw-points { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.fw-points input { accent-color: var(--purple); width: 20px; height: 20px; }
.fw-sum { background: var(--surface); border-radius: var(--r-sm); padding: 12px 16px; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.fw-sum:empty { display: none; }
.fw-sum .line { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.fw-sum .line.minus { color: var(--green-block); }
.fw-sum .earn { font-size: 13px; color: var(--purple); font-weight: 700; }
.fw-cta { width: 100%; border: 0; border-radius: 999px; padding: 16px; font: inherit; font-weight: 700; font-size: 18px; background: var(--cta); color: #fff; cursor: pointer; }
.fw-cta:hover { background: var(--cta-hover); }
.fw-gift { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; text-align: center; }
.fw-gift a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .fw-codes { grid-template-columns: 1fr; } .fw-rows { grid-template-columns: 1fr 1fr; } }

/* Group prices: the cheaper-per-person ladder under "How many of you?" */
.fw-qty-row { position: relative; }
.fw-qty-row:has(.fw-stk:not([hidden])) { flex-wrap: nowrap; }
@media (max-width: 520px) { .fw-qty-row:has(.fw-stk:not([hidden])) #fw-each { display: none; } }
.fw-stk { margin-left: auto; width: 118px; height: 118px; flex: none; display: grid; place-items: center; text-align: center; color: #fff; background: #422B8A; transform: rotate(-10deg);
  clip-path: polygon(50% 0%,61% 12%,76% 6%,80% 21%,95% 24%,90% 39%,100% 50%,90% 61%,95% 76%,80% 79%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 79%,5% 76%,10% 61%,0% 50%,10% 39%,5% 24%,20% 21%,24% 6%,39% 12%); }
.fw-stk[hidden] { display: none; }
.fw-stk small { display: block; max-width: 86px; margin: 0 auto; font-weight: 800; font-size: 9.5px; line-height: 1.15; letter-spacing: .06em; color: #F89ED2; }
.fw-stk b { display: block; font-weight: 800; font-size: 21px; line-height: 1.05; }
.fw-stk s { font-size: 11px; opacity: .8; }
.fw-stk.pop { animation: fw-stk-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes fw-stk-pop { 0% { transform: rotate(-30deg) scale(.3); } 100% { transform: rotate(-10deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .fw-stk.pop { animation: none; } }
.fw-group__hint { margin: 10px 0 0; min-height: 1.3em; font-size: 14px; color: var(--muted, #5B6068); }
.fw-group__hint b { color: var(--ink, #0A0A0A); }

/* Christmas: a hand-cut, slightly wonky green star with a grainy print texture */
.fw-stk--star { width: 170px; height: 170px; transform: rotate(-8deg);
  background-color: #2F6B3C;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  clip-path: polygon(53% 0%, 63% 35%, 100% 37%, 70% 59%, 81% 100%, 51% 77%, 17% 97%, 30% 61%, 0% 39%, 38% 35%); }
.fw-stk--star > div { margin-top: 30px; line-height: 1.1; }
.fw-stk--star small { color: #F6C3B8; font-size: 8px; letter-spacing: .08em; max-width: none; }
.fw-stk--star b { font-size: 18px; }
.fw-stk--star s { font-size: 10px; display: block; }
.fw-stk--star.pop { animation: fw-star-pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes fw-star-pop { 0% { transform: rotate(-40deg) scale(.3); } 100% { transform: rotate(-8deg) scale(1); } }
.fw-sum .earn--guest { display: grid; gap: 4px; font-weight: 500; color: #0A0A0A; }
.fw-sum .earn--guest b { color: var(--purple); font-size: 15px; }
.fw-sum .earn--guest span { font-size: 13px; color: #5B6068; }
.fw-sum .earn__acts { display: flex; gap: 14px; margin-top: 4px; }
.fw-sum .earn__acts a { font-weight: 800; color: var(--purple); text-decoration: underline; font-size: 14px; }
.fw-sum .earn__acts a:first-child { background: var(--purple); color: #fff; text-decoration: none; border-radius: 999px; padding: 6px 14px; }
.fw-earn { margin: 12px 0 0; text-align: center; }
.fw-earn > a, .fw-earn > span { display: inline-block; background: #EEE9F7; color: var(--purple); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; text-decoration: none; }
.fw-earn > a:hover { background: #E2D9F3; }

/* Share window */
.shr { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,10,.55); display: grid; place-items: center; padding: 16px; }
.shr[hidden] { display: none; }
.shr__box { background: #fff; color: #0A0A0A; border-radius: 20px; width: 100%; max-width: 440px; padding: 22px 24px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.shr__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.shr__head b { font-size: 20px; font-weight: 800; }
.shr__x { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #5B6068; padding: 0 4px; }
.shr__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.shr__o { display: grid; justify-items: center; gap: 8px; padding: 12px 4px; border-radius: 14px; background: none; border: 0; cursor: pointer; color: #0A0A0A; text-decoration: none; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.shr__o:hover { background: #F3F0F8; }
#shr-fb svg { color: #1877F2; } #shr-wa svg { color: #25D366; } #shr-mail svg, #shr-copy svg { color: var(--purple); }
.shr__close { width: 100%; border: 0; border-radius: 999px; padding: 13px; background: var(--purple); color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
#shr-ig svg { color: #E1306C; }
.shr__note { margin: -8px 0 16px; text-align: center; font-size: 13px; color: #5B6068; }
@media (max-width: 380px) { .shr__opts { grid-template-columns: repeat(2, 1fr); } }
.fw-points--n { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; font-weight: 600; }
.fw-points--n input { width: 90px; border: 1.5px solid var(--hair, #E3E8F0); border-radius: 10px; padding: 7px 10px; font: inherit; }