/**
 * V4 Family Configurator (catalog hub) — stage 2 of family-configurator-PLAN.
 * Etalon: testsite/mockups/family-configurator/index.html (photo-preview variant).
 * Scope: .t4-cfg only. Section head styles (.t4-csec__*) come from catalog-v4.css.
 */

.t4-cfg{margin:0 0 44px}

/* ---- Screen A: family cards — rich product-card look (mirrors .t4-tcard from
   catalog-v4.css: same border/radius/hover-lift, icon facts, 2-line blurb, price +
   red Book-now-style CTA; 2026-07-10, replaced the compact mockup cards). ---- */
.t4-cfg__famgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.t4-cfg__fam{position:relative;display:flex;flex-direction:column;border:1px solid var(--t4-line);border-radius:var(--t4-r-lg);overflow:hidden;
	background:#fff;cursor:pointer;text-align:left;padding:0;font-family:inherit;
	transition:transform 280ms var(--t4-ease),box-shadow 280ms var(--t4-ease),border-color 280ms var(--t4-ease)}
.t4-cfg__fam:hover{transform:translateY(-4px);box-shadow:var(--t4-sh-md);border-color:rgba(255,40,0,.4)}
/* photo zoom like the tcard: the span is the clipping media box, a ::after inheriting
   its background-image is what scales (scaling the box itself would bleed over the body) */
.t4-cfg__famimg{position:relative;display:block;height:190px;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center}
.t4-cfg__famimg::after{content:'';position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;transition:transform 400ms var(--t4-ease)}
.t4-cfg__fam:hover .t4-cfg__famimg::after{transform:scale(1.05)}
.t4-cfg__fambody{display:flex;flex-direction:column;flex:1;gap:10px;padding:18px 18px 20px}
.t4-cfg__famname{display:block;font-family:var(--t4-sans);font-weight:600;font-size: var(--t4-fs-lg);line-height:1.05;letter-spacing:.005em;color:var(--t4-ink)}
.t4-cfg__famsub{display:block;font-family:var(--t4-sans);font-weight:600;font-size: var(--t4-fs-micro);line-height:1;color:var(--t4-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:-4px}
.t4-cfg__famfacts{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--t4-sans);font-size: var(--t4-fs-small);color:var(--t4-muted)}
.t4-cfg__famfacts span{display:inline-flex;align-items:center;gap:5px}
.t4-cfg__famfacts svg{width:13px;height:13px;flex-shrink:0}
.t4-cfg__famdesc{font-family:var(--t4-sans,inherit);font-size: var(--t4-fs-small);line-height:1.55;color:var(--t4-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t4-cfg__famfoot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:6px}
.t4-cfg__famfrom{font-weight:600;font-size: var(--t4-fs-body);line-height:1;color:var(--t4-ink)}
.t4-cfg__famfrom small{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:var(--t4-muted);margin-left:4px}
/* CTA = the product card's Book-now recipe (.t4-tcard__book overrides on .t4-btn--red) */
.t4-cfg__famcta{justify-content:center;padding:10px 14px;font-size:13px}

/* ---- Screen B: shell ---- */
.t4-cfg__back{font-weight:600;font-size: var(--t4-fs-micro);color:#737373;background:none;border:0;cursor:pointer;padding:0;font-family:inherit}
.t4-cfg__back:hover{color:#FF2800}
/* the catalog exit is a REAL button on every viewport (desktop had an invisible text link) */
.t4-cfg__panel > .t4-cfg__back{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
	border:1.5px solid rgba(12,12,12,.22);border-radius:99px;background:#fff;font-size: var(--t4-fs-small);color:#0c0c0c}
.t4-cfg__panel > .t4-cfg__back:hover{border-color:#FF2800;color:#FF2800}
.t4-cfg__title{font-family:var(--t4-sans);font-weight:600;font-size: var(--t4-fs-h3);line-height:1.1;letter-spacing:0;margin:16px 0 22px;color:#0c0c0c}
.t4-cfg__title em{font-style:normal;color:#FF2800}
.t4-cfg__grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
/* the 21-tile date rail must scroll, not blow the grid track open */
.t4-cfg__steps{min-width:0}
.t4-cfg__step,.t4-cfg__striprow{min-width:0}

/* ---- Steps ---- */
.t4-cfg__step{border:1px solid rgba(12,12,12,.08);border-radius:16px;padding:20px;background:#fff;margin-bottom:14px;transition:opacity .2s}
.t4-cfg__step--locked{opacity:.42;pointer-events:none}
/* mock booking-configurator (2026-07-17): a locked section COLLAPSES to its header
   row — grey interactive-looking bodies read as clickable and breed dead scroll */
.t4-cfg__step--locked > :not(.t4-cfg__stephead){display:none !important}
.t4-cfg__step--locked .t4-cfg__stephead{margin-bottom:0}
/* green tick on completed sections */
.t4-cfg__step--done .t4-cfg__stephead::after{
	content:'✓';width:18px;height:18px;border-radius:50%;background:#1F7A3D;color:#fff;
	font-size: var(--t4-fs-micro);font-weight:800;display:inline-flex;align-items:center;justify-content:center;
	flex:none;margin-left:8px;animation:t4cfgTick .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes t4cfgTick{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.t4-cfg__stephead{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.t4-cfg__stepnum{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#FF2800;letter-spacing:.12em}
.t4-cfg__steptitle{font-family:var(--t4-sans);font-weight:600;font-size: var(--t4-fs-body);line-height:1.1;letter-spacing:0;color:#0c0c0c}
.t4-cfg__stephint{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#737373;letter-spacing:.04em;margin-left:auto;text-align:right}

/* ---- Experience cards (photo previews) ---- */
.t4-cfg__opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.t4-cfg__opts--sub{grid-template-columns:repeat(2,1fr)}
.t4-cfg__opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
	border:1px solid rgba(12,12,12,.14);border-radius:12px;padding:13px 12px;background:#fff;cursor:pointer;text-align:left;
	font-family:inherit;transition:border-color .12s,box-shadow .12s}
.t4-cfg__opt:hover{border-color:rgba(255,40,0,.5)}
.t4-cfg__opt.is-sel{border-color:#FF2800;box-shadow:0 0 0 1px #FF2800}
.t4-cfg__optphoto{display:block;width:calc(100% + 24px);margin:-13px -12px 11px;height:86px;flex:0 0 auto;
	background-size:cover;background-position:center;border-radius:11px 11px 0 0}
.t4-cfg__opts--sub .t4-cfg__optphoto{height:128px}
.t4-cfg__optname{font-weight:600;font-size: var(--t4-fs-small);line-height:1.2;color:#0c0c0c;margin-bottom:5px}
.t4-cfg__optfrom{display:block;font-weight:600;font-size: var(--t4-fs-micro);line-height:1;color:#1d1d1f;margin-bottom:5px}
.t4-cfg__optfrom small{font-family:var(--t4-mono);font-weight:600;font-size:8.5px;color:#737373;letter-spacing:.08em;margin-right:2px}
.t4-cfg__optnote{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);line-height:1.3;color:#737373;letter-spacing:.03em}
.t4-cfg__best{position:absolute;top:10px;right:10px;z-index:1;display:inline-block;font-family:var(--t4-mono);
	font-weight:600;font-size:8.5px;letter-spacing:.08em;color:#fff;background:#FF2800;border-radius:5px;padding:3px 5px;text-transform:uppercase}
.t4-cfg__subrow{margin-top:10px;padding-top:12px;border-top:1px dashed rgba(12,12,12,.12)}
.t4-cfg__sublabel{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#737373;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}

/* ---- Durations ---- */
.t4-cfg__durs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.t4-cfg__dur{border:1px solid rgba(12,12,12,.14);border-radius:12px;padding:14px;background:#fff;cursor:pointer;text-align:left;
	font-family:inherit;display:flex;align-items:baseline;justify-content:space-between;gap:10px;transition:border-color .12s,box-shadow .12s}
.t4-cfg__dur:hover{border-color:rgba(255,40,0,.5)}
.t4-cfg__dur.is-sel{border-color:#FF2800;box-shadow:0 0 0 1px #FF2800}
.t4-cfg__durname{font-weight:600;font-size: var(--t4-fs-small);line-height:1.2;color:#0c0c0c}
.t4-cfg__durname .t4-cfg__best{position:static;margin-left:6px;vertical-align:2px}
.t4-cfg__durprice{font-weight:600;font-size: var(--t4-fs-body);line-height:1;color:#0c0c0c;white-space:nowrap}
.t4-cfg__durprice small{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#737373;margin-left:3px}
.t4-cfg__dur--dis{opacity:.38;cursor:not-allowed;background:#faf6ef}
.t4-cfg__dur--dis:hover{border-color:rgba(12,12,12,.14)}
.t4-cfg__dur--dis .t4-cfg__durprice{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);line-height:1.3;color:#737373}

/* ---- Summary ---- */
/* sticky offset clears the fixed header (20px slid the card underneath it) */
.t4-cfg__sum{position:sticky;top:96px;border-radius:16px;background:#17181c;color:#fff;padding:22px;overflow:hidden}
.t4-cfg__sumkicker{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:14px}
.t4-cfg__sumrows{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.t4-cfg__sumrow{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size: var(--t4-fs-micro);line-height:1.4}
.t4-cfg__sumrow b{font-weight:600;text-align:right}
.t4-cfg__sumrow b.dim{color:rgba(255,255,255,.38)}
.t4-cfg__sumsku{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);line-height:1.4;color:rgba(255,255,255,.45);letter-spacing:.04em;
	border-top:1px dashed rgba(255,255,255,.14);padding-top:12px;margin-bottom:14px;min-height:16px}
/* itemized lines (buggies × n, private, package, refund) — desktop rail too, the
   head line (exp · hours) only on phones where the summary rows are hidden */
.t4-cfg__sumbrief{display:flex;flex-direction:column;gap:3px;margin:-4px 0 14px}
.t4-cfg__sumbrief[hidden]{display:none}
.t4-cfg__sumbrief span{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);letter-spacing:.03em;
	color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.t4-cfg__sumbrief .t4-cfg__sumbrief-head{display:none}
.t4-cfg__sumreq{font-weight:600;font-size: var(--t4-fs-micro);line-height:1.55;color:#ffd9a0;background:rgba(255,170,60,.10);
	border:1px solid rgba(255,170,60,.28);border-radius:10px;padding:11px 13px;margin-bottom:14px}
.t4-cfg__sumtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.t4-cfg__sumlabel{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);letter-spacing:.1em;color:rgba(255,255,255,.55);text-transform:uppercase}
.t4-cfg__sumval{font-family:var(--t4-sans);font-weight:800;font-size: var(--t4-fs-h3);line-height:1;letter-spacing:.02em}
.t4-cfg__sumval small{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:rgba(255,255,255,.5);margin-left:5px;letter-spacing:.05em}
.t4-cfg .t4-cfg__cardctx{all:unset;display:flex;gap:10px;align-items:stretch}
.t4-cfg__cta{box-shadow:none !important} /* t4-btn--red's red glow reads as dirt under the rail CTA */
.t4-cfg__barback{display:none;flex:0 0 52px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(255,255,255,.06);
	color:#fff;font-size: var(--t4-fs-h4);line-height:1;cursor:pointer;font-family:inherit;transition:all .12s}
.t4-cfg__barback:hover{border-color:#fff}
.t4-cfg__cta{flex:1;width:auto;justify-content:center;text-align:center}
.t4-cfg__cta:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.4);cursor:not-allowed;border-color:transparent}
.t4-cfg__trust{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:rgba(255,255,255,.4);letter-spacing:.05em;text-align:center;margin-top:11px}

/* ---- Date strip (soft tiles, mockup etalon) ---- */
/* vertical air so the hover-lift (translateY) isn't clipped by the scroll container */
.t4-cfg__striprow{display:flex;align-items:stretch;gap:8px}
.t4-cfg__strip{padding:4px 0 7px}
.t4-cfg__stripnav{flex:0 0 34px;border:1px solid rgba(12,12,12,.14);border-radius:9px;background:#fff;cursor:pointer;
	font-size: var(--t4-fs-lg);line-height:1;color:#0c0c0c;transition:border-color .12s}
.t4-cfg__stripnav:hover{border-color:#FF2800;color:#FF2800}
.t4-cfg__stripnav:disabled{opacity:.3;cursor:not-allowed}
.t4-cfg__strip{flex:1;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;min-width:0}
.t4-cfg__strip::-webkit-scrollbar{display:none}
.t4-cfg__tile{flex:0 0 calc((100% - 48px)/7);scroll-snap-align:start;
	border:1px solid rgba(12,12,12,.10);border-radius:9px;background:#faf6ef;padding:12px 2px 11px;text-align:center;cursor:pointer;
	font-family:inherit;transition:transform .1s,border-color .12s}
.t4-cfg__tile:hover{transform:translateY(-2px);border-color:rgba(255,40,0,.4)}
.t4-cfg__tile:disabled{opacity:.35;cursor:not-allowed;transform:none}
.t4-cfg__tile--active{background:#FF2800;border-color:#FF2800;color:#fff}
.t4-cfg__tiledow{display:block;font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);letter-spacing:.1em;color:#737373;margin-bottom:4px}
.t4-cfg__tile--today .t4-cfg__tiledow{color:#b98a2f}
.t4-cfg__tile--active .t4-cfg__tiledow{color:rgba(255,255,255,.75)}
.t4-cfg__tileday{display:block;font-family:var(--t4-sans);font-weight:600;font-size: var(--t4-fs-body);line-height:1;color:inherit}
.t4-cfg__tilemon{display:block;font-family:var(--t4-mono);font-weight:600;font-size:8.5px;letter-spacing:.08em;color:#737373;margin-top:3px}
.t4-cfg__tile--active .t4-cfg__tilemon{color:rgba(255,255,255,.75)}

/* ---- Time slots ---- */
.t4-cfg__slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.t4-cfg__slots--cutoff{display:block}
.t4-cfg__slot{border:1px solid rgba(12,12,12,.14);border-radius:9px;padding:10px 4px;background:#fff;cursor:pointer;text-align:center;
	font-family:inherit;transition:border-color .12s}
.t4-cfg__slot:hover{border-color:rgba(255,40,0,.5)}
.t4-cfg__slot--active{background:#FF2800;border-color:#FF2800;color:#fff}
.t4-cfg__slot--full{opacity:.4;cursor:not-allowed}
.t4-cfg__slottime{display:block;font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-small);letter-spacing:.03em}
.t4-cfg__slothint{display:block;font-family:var(--t4-mono);font-weight:600;font-size:8.5px;letter-spacing:.04em;color:#737373;margin-top:4px}
.t4-cfg__slot--active .t4-cfg__slothint{color:rgba(255,255,255,.75)}
.t4-cfg__slot--low .t4-cfg__slothint{color:#c2410c}
.t4-cfg__slot--active.t4-cfg__slot--low .t4-cfg__slothint{color:#ffd9a0}
.t4-cfg__loading{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-family:var(--t4-mono);font-size: var(--t4-fs-micro);color:#737373;padding:6px 0}

/* ---- Buggy stepper ---- */
.t4-cfg__pax{display:flex;align-items:center;gap:16px}
.t4-cfg__paxbtn{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(12,12,12,.18);background:#fff;
	font-size: var(--t4-fs-h4);line-height:1;font-family:inherit;cursor:pointer;transition:border-color .12s,color .12s}
.t4-cfg__paxbtn:hover{border-color:#FF2800;color:#FF2800}
.t4-cfg__paxbtn:disabled{opacity:.28;cursor:not-allowed}
.t4-cfg__paxval{font-family:var(--t4-sans);font-weight:800;font-size: var(--t4-fs-h3);line-height:1;min-width:44px;text-align:center}
.t4-cfg__paxnote{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#737373;letter-spacing:.05em;margin-left:4px;text-transform:uppercase}

/* ---- Add-ons (private + package proxies) ---- */
.t4-cfg__addons{margin-top:16px;border-top:1px dashed rgba(12,12,12,.12);padding-top:6px}
.t4-cfg__addon{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer}
.t4-cfg__addon + .t4-cfg__addon{border-top:1px dashed rgba(12,12,12,.10)}
.t4-cfg__addon input{position:absolute;opacity:0;pointer-events:none}
.t4-cfg__addonsw{flex:0 0 auto;width:40px;height:23px;border-radius:99px;background:rgba(12,12,12,.16);position:relative;transition:background .15s}
.t4-cfg__addonsw::after{content:'';position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.t4-cfg__addon input:checked + .t4-cfg__addonsw{background:#FF2800}
.t4-cfg__addon input:checked + .t4-cfg__addonsw::after{left:19px}
.t4-cfg__addonname{font-weight:600;font-size: var(--t4-fs-small);line-height:1.2;color:#0c0c0c}
.t4-cfg__addonnote{display:block;font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#737373;letter-spacing:.03em;margin-top:3px}
.t4-cfg__addonnote--save{color:#15803d}
.t4-cfg__addonprice{margin-left:auto;font-weight:600;font-size: var(--t4-fs-small);white-space:nowrap}
.t4-cfg__extoggle{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 0;cursor:pointer;
	font-family:inherit;font-weight:600;font-size: var(--t4-fs-small);color:#FF2800;border-top:1px dashed rgba(12,12,12,.10)}
.t4-cfg__excards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:2px 0 8px}
.t4-cfg__excards[hidden]{display:none}

/* package proxy cards — full contents mirrored from the form's .extra-card set */
.t4-cfg__pkg{position:relative;display:flex;flex-direction:column;border:1px solid rgba(12,12,12,.14);border-radius:12px;
	padding:14px 14px 14px;background:#fff;transition:border-color .12s,box-shadow .12s}
.t4-cfg__pkg.is-on{border-color:#FF2800;box-shadow:0 0 0 1px #FF2800}
.t4-cfg__pkg--bronze{border-top:3px solid #b07b4f}
.t4-cfg__pkg--silver{border-top:3px solid #9aa2ad}
.t4-cfg__pkg--gold{border-top:3px solid #c9a227}
.t4-cfg__pkgsticker{position:absolute;top:-9px;right:10px;font-family:var(--t4-mono);font-weight:600;font-size:8.5px;
	letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#FF2800;border-radius:5px;padding:3px 6px}
.t4-cfg__pkgtitle{font-weight:600;font-size: var(--t4-fs-small);line-height:1.25;color:#0c0c0c;margin-bottom:6px}
.t4-cfg__pkgprice{font-weight:600;font-size: var(--t4-fs-body);color:#0c0c0c;margin-bottom:9px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.t4-cfg__pkgworth{font-weight:600;font-size: var(--t4-fs-micro);color:#737373;text-decoration:line-through}
.t4-cfg__pkgsave{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#15803d;letter-spacing:.03em}
.t4-cfg__pkglist{list-style:none;margin:0 0 12px;padding:0;flex:1}
.t4-cfg__pkglist li{position:relative;padding:3px 0 3px 18px;font-size: var(--t4-fs-micro);line-height:1.45;color:#555}
.t4-cfg__pkglist li::before{content:'✓';position:absolute;left:0;top:3px;font-weight:600;font-size: var(--t4-fs-micro);color:#FF2800}
.t4-cfg__pkgbtn{width:100%;border:1px solid rgba(12,12,12,.18);border-radius:9px;background:#fff;padding:10px;cursor:pointer;
	font-family:inherit;font-weight:600;font-size: var(--t4-fs-micro);color:#0c0c0c;transition:all .12s}
.t4-cfg__pkgbtn:hover{border-color:#FF2800;color:#FF2800}
.t4-cfg__pkg.is-on .t4-cfg__pkgbtn{background:#FF2800;border-color:#FF2800;color:#fff}
.t4-cfg__pkgper{font-family:var(--t4-mono);font-weight:600;font-size: var(--t4-fs-micro);color:#737373;letter-spacing:.04em}
/* selected package: trash/− qty + row (price is per buggy, qty caps at buggy count) */
.t4-cfg__pkgqty{display:flex;align-items:center;justify-content:center;gap:14px;border:1px solid #FF2800;border-radius:9px;padding:5px;background:rgba(255,40,0,.05)}
.t4-cfg__pkgqbtn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(12,12,12,.16);background:#fff;cursor:pointer;
	display:flex;align-items:center;justify-content:center;font-family:inherit;font-size: var(--t4-fs-body);line-height:1;color:#0c0c0c;transition:all .12s}
.t4-cfg__pkgqbtn:hover{border-color:#FF2800;color:#FF2800}
.t4-cfg__pkgqbtn:disabled{opacity:.3;cursor:not-allowed}
.t4-cfg__pkgqval{font-weight:600;font-size: var(--t4-fs-body);min-width:20px;text-align:center}

/* ---- Focus mode: family open = clean configurator screen (modal feel, no modal).
   The site footer hides too (user: the long scroll to the footer during booking is
   noise). CSS-only + user-triggered → SEO-safe: content stays in the DOM and
   crawlers never enter the configurator state. ---- */
body.t4-cfg-focus .t4-cbanner,
body.t4-cfg-focus .t4-cincl,
body.t4-cfg-focus #t4-tours,
body.t4-cfg-focus .t4-hcta,
body.t4-cfg-focus .t4-hreviews,
body.t4-cfg-focus .t4-hpartners,
body.t4-cfg-focus .t4-hcontact,
body.t4-cfg-focus footer.footer,
body.t4-cfg-focus .t4-foot{display:none !important} /* V4 renders footer.t4-foot, not .footer */
/* the header is position:FIXED — the hidden banner used to provide the clearance,
   so focus mode must supply its own (header bottom ≈ 83px desktop / 93px mobile) */
body.t4-cfg-focus .t4-cgrid--cfg{padding-top:118px}

/* ---- Booking stage (details → payment inside the panel) ---- */
.t4-cfg__fullcal{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:none;border:0;padding:0;cursor:pointer;
	font-family:inherit;font-weight:600;font-size: var(--t4-fs-micro);color:#FF2800}
.t4-cfg__fullcal:hover{text-decoration:underline}

.t4-cfg__formhost{position:absolute;left:-9999px;top:0;width:420px;height:0;overflow:hidden}
.t4-cfg{position:relative}
/* booking mode: the pick steps hide, the stage takes the left column, and the SAME
   summary rail (breakdown + [←][Continue]) drives every step on every viewport —
   the form's own footer buttons are redundant and hidden */
.t4-cfg--booking .t4-cfg__steps{display:none}
.t4-cfg--booking .t4-widget--cfgstage .booking-step__footer,
.t4-cfg--booking .t4-widget--cfgstage .js-create-order-button{display:none !important}
.t4-cfg--booking .t4-cfg__barback{display:block}
.t4-widget--cfgstage{position:static !important;width:100% !important;max-width:none !important;margin:0 !important;
	border:1px solid rgba(12,12,12,.08);border-radius:16px;background:#fff;overflow:hidden;grid-column:1}
.t4-widget--cfgstage[hidden]{display:none !important}
.t4-cfg__stagehead{position:relative;display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:14px 20px;border-bottom:1px solid rgba(12,12,12,.08)}
/* full-calendar view: ✕ close instead of the exit chip */
.t4-cfg__calclose{display:none;position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;
	border:1px solid rgba(12,12,12,.18);background:#fff;cursor:pointer;font-size: var(--t4-fs-body);color:#0c0c0c;
	align-items:center;justify-content:center;transition:all .12s}
.t4-cfg__calclose:hover{border-color:#FF2800;color:#FF2800}
.t4-widget--cal-only .t4-cfg__calclose{display:flex}
.t4-widget--cal-only .t4-cfg__exitchip{display:none}
.t4-cfg__stagetitle{font-family:var(--t4-sans);font-weight:600;font-size: var(--t4-fs-body);line-height:1.1;letter-spacing:0;color:#0c0c0c}
/* compact left chip — exits the booking back to the selection start */
.t4-cfg__exitchip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid rgba(12,12,12,.18);
	border-radius:99px;background:#fff;cursor:pointer;font-family:inherit;font-weight:600;font-size: var(--t4-fs-micro);color:#555;transition:all .12s}
.t4-cfg__exitchip:hover{border-color:#FF2800;color:#FF2800}

/* ---- reveal motion: newly unlocked content rises in softly (no plain fade) ---- */
@keyframes t4cfgIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.t4-cfg__reveal{animation:t4cfgIn .45s cubic-bezier(.22,1,.36,1) both}
.t4-cfg__reveal:nth-child(2){animation-delay:40ms}
.t4-cfg__reveal:nth-child(3){animation-delay:80ms}
.t4-cfg__reveal:nth-child(4){animation-delay:120ms}
.t4-cfg__reveal:nth-child(5){animation-delay:160ms}
.t4-cfg__reveal:nth-child(6){animation-delay:200ms}
.t4-cfg__reveal:nth-child(n+7){animation-delay:240ms}
.t4-cfg__step{transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.t4-cfg__step--locked{transform:translateY(6px)}
/* Desktop scroll room: t4-cfg-focus hides everything below the configurator, so the
   document ended right under the last step — scroll clamped at max and the late
   selection steps / booking stage sat below the viewport center with no way to bring
   them up (user 2026-07-16). Bottom air on the panel lets EVERY step (slots, buggies,
   details, payment) park on the desktop focus line (~25% vh, see focusLine() in JS). */
@media (min-width:901px){
	.t4-cfg__panel{padding-bottom:44vh}
	.t4-cfg--booking .t4-cfg__panel{min-height:calc(100vh + 60px)}
}
/* stage + its steps glide in instead of snapping */
.t4-widget--cfgstage:not([hidden]){animation:t4cfgIn .45s cubic-bezier(.22,1,.36,1) both}
.t4-widget--cfgstage .booking-step.active{animation:t4cfgIn .4s cubic-bezier(.22,1,.36,1) both}
/* the sticky rail rides the same motion when the stage swaps in (it snapped before) */
@media (min-width:901px){
	.t4-cfg--booking .t4-cfg__sum{animation:t4cfgIn .45s cubic-bezier(.22,1,.36,1) both}
}

/* refund guarantee: ONE quiet line, no plate — [☐ Refund guarantee · optional (?)] … price
   pinned to the row's right edge (aligns with the totals column). CSS-only:
   buildBookingOptions serializes .js-refund-price's parent text, DOM must stay intact. */
.t4-widget--cfgstage .t4-refund{position:relative;display:flex;align-items:center;gap:7px;flex-wrap:nowrap;
	background:none !important;border:none !important;box-shadow:none !important;
	padding:8px 96px 8px 0 !important;margin:2px 0 10px}
/* label & its text must shrink-wrap — tour-v4 stretches them to 100%, which pushed
   «· optional» and the «?» far away from the name (both viewports) */
.t4-widget--cfgstage .t4-refund__label{display:inline-flex !important;align-items:center;gap:8px;
	flex:0 0 auto !important;width:auto !important;max-width:none;min-width:0;margin:0}
.t4-widget--cfgstage .t4-refund .checkbox__text{display:inline-flex;align-items:baseline;white-space:nowrap;
	width:auto !important;flex:0 0 auto !important;font-size:13.5px}
.t4-widget--cfgstage .t4-refund .checkbox__text::after{content:" · optional";color:#8a8a8a;font-weight:600;font-size: var(--t4-fs-micro);margin-left:5px}
.t4-widget--cfgstage .t4-refund__hint{position:static;flex:0 0 auto;margin-left:0}
.t4-widget--cfgstage .t4-refund .js-refund-price{position:absolute;right:0;top:50%;transform:translateY(-50%);
	font-weight:600;color:var(--t4-red,#FF2800);white-space:nowrap}

/* calm fields: thin red line on focus (no glow), label stays quiet, no iOS auto-zoom */
.t4-widget--cfgstage .field__input:focus,
.t4-widget--cfgstage .field__select:focus{border-color:rgba(255,40,0,.5) !important;box-shadow:none !important;background:#fff}
.t4-widget--cfgstage .field__label:focus-within .field__placeholder{color:#8a8a8a !important}

/* the auto-skipped Review step must never flash on screen */
.t4-cfg--noreview .booking-step[data-id="step-2"]{display:none !important}

/* calm validation: red border only; the message floats just above the field's right
   corner (the phone field has no label row — top:0 landed the plate on the input) */
.t4-widget--cfgstage .booking .field{position:relative}
.t4-widget--cfgstage .booking .field .t4-ferr{position:absolute;right:2px;top:-15px;margin:0;
	background:#fff;padding:0 5px;border-radius:5px;font-size: var(--t4-fs-micro);line-height:1.4;z-index:20;white-space:nowrap}
.t4-widget--cfgstage .booking .field.t4-invalid .field__input{border-color:var(--t4-red,#FF2800) !important;box-shadow:none !important}

/* window-1 steps fade out briefly before the stage takes over (no snap) */
.t4-cfg__steps{transition:opacity .18s ease,transform .18s ease}
.t4-cfg__steps--out{opacity:0;transform:translateY(-6px)}
.t4-cfg__steps--in{animation:t4cfgIn .45s cubic-bezier(.22,1,.36,1) both}
/* Screen swap (families ⇄ configurator panel) rises in instead of snapping —
   class is replayed from JS on every open/close (2026-07-10). */
.t4-cfg__screen--in{animation:t4cfgIn .5s cubic-bezier(.22,1,.36,1) both}
/* Phones: the panel hosts the position:fixed bottom bar (.t4-cfg__sum). A transform
   animation on the panel — even finished, in its fill phase — makes the panel the
   bar's containing block, unpinning the bar from the viewport (it rode the page
   scroll, user 2026-07-16). Fade-only entrance keeps fixed = viewport. */
@keyframes t4cfgFadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:900px){
	.t4-cfg__screen--in{animation-name:t4cfgFadeIn}
}

/* Standing promo on classic/day combos: crossed-out base price (price_old) next to
   the live price — exp "from", duration tiles, summary rail (2026-07-10). */
.t4-cfg__oldprice{text-decoration:line-through;font-weight:600;font-size:.85em;color:#9b9b9b;margin-right:2px}
.t4-cfg__oldprice--sum{color:rgba(255,255,255,.45)}

/* (step-back squares inside the form were replaced by the persistent summary rail's
   [←] — the rail now lives through details/payment on desktop too) */
.t4-widget--cfgstage .t4-widget__stage{padding:18px 20px 20px}
/* step-1 chrome (calendar/variants/buggies/extras) is hidden by tour-v4.css's
   `.t4-widget--booking` rules — the stagewrap carries that class in the markup. */

/* ---- Mobile ---- */
@media (max-width:900px){
	.t4-cfg__grid{grid-template-columns:1fr}
	.t4-cfg__sum{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:16px 16px 0 0;z-index:60;padding:12px 18px 14px}
	.t4-cfg__sumkicker,.t4-cfg__sumrows,.t4-cfg__trust,.t4-cfg__sumsku{display:none}
	/* compact breakdown: one item per line, head line (exp · hours) shows on phones */
	.t4-cfg__sumbrief{margin:0 0 8px}
	.t4-cfg__sumbrief .t4-cfg__sumbrief-head{display:block;color:#fff;font-weight:600}
	.t4-cfg__sumreq{margin-bottom:10px;padding:8px 11px;font-size:10.5px}
	.t4-cfg__sumtotal{margin-bottom:10px}
	.t4-cfg__sumval{font-size:22px}
	/* room for the fixed bar */
	.t4-cfg__panel{padding-bottom:190px}
	/* window 1 exit on phones: the top link becomes a wide obvious button */
	.t4-cfg__panel > .t4-cfg__back{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
		padding:12px;border:1.5px solid rgba(12,12,12,.22);border-radius:10px;background:#fff;
		font-weight:600;font-size: 14px;color:#0c0c0c;margin-bottom:6px}
}
@media (max-width:768px){
	.t4-cfg__famgrid{grid-template-columns:1fr;gap:14px}
	.t4-cfg__famimg{height:170px}
	.t4-cfg__title{font-size:34px}
	.t4-cfg__opts{grid-template-columns:repeat(2,1fr)}
	.t4-cfg__opts--sub .t4-cfg__optphoto{height:86px}
	.t4-cfg__dur{flex-direction:column;align-items:flex-start;gap:7px}
	/* mockup-wide content: kill the double side padding on phones */
	body.t4-catalog .t4-cgrid--cfg .t4-cgrid__inner{padding:0 10px}
	/* fixed header is taller on phones (promo + logo row) */
	body.t4-cfg-focus .t4-cgrid--cfg{padding-top:112px}
	.t4-cfg__panel > .t4-cfg__back{margin-top:2px}
	.t4-cfg__step{padding:16px 12px}
	.t4-cfg__stephead{margin-bottom:12px}
	/* calendar: full-width swipe rail, no nav buttons eating tile width */
	.t4-cfg__stripnav{display:none}
	.t4-cfg__striprow{gap:0}
	.t4-cfg__strip{gap:6px}
	.t4-cfg__tile{flex-basis:56px}
	.t4-cfg__tileday{font-size:18px}
	.t4-cfg__slots{grid-template-columns:repeat(3,1fr)}
	.t4-cfg__excards{grid-template-columns:1fr}
	.t4-cfg--booking .t4-cfg__panel{padding-bottom:190px}
	/* no iOS auto-zoom on focus (needs ≥16px) */
	.t4-widget--cfgstage .field__input,.t4-widget--cfgstage .field__select{font-size:16px}
	/* refund single line on phones */
	.t4-widget--cfgstage .t4-refund .checkbox__text{font-size:12.5px}
	.t4-widget--cfgstage .t4-refund{padding-right:84px !important}
}

/* ================================================================================
   V2 BOOKING LAYER (mock booking-configurator.html, 2026-07-17) - packages moved
   into the stage step-2 "Extras" as compact radio rows (bw2/bwm pattern), refund =
   online payments only, gateway redirect note, iOS motion. Namespaced additions.
   ================================================================================ */

/* --- stage step-2: V2 heading + note; legacy recap/toggle/title retired --- */
.t4-widget--cfgstage .booking-step[data-id="step-2"] .booking-step__recap,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .booking-step__title,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .booking-step__addons-toggle{display:none !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .booking-step__addons-collapsible{
	display:block !important;height:auto !important;max-height:none !important;overflow:visible !important}
.t4-cfg__v2secl{font-family:var(--t4-mono);font-size: var(--t4-fs-micro);letter-spacing:1.6px;color:#8a8a8a;
	text-transform:uppercase;font-weight:600;margin:0 0 4px}
.t4-cfg__v2note{font-size: var(--t4-fs-micro);color:#8a8a8a;margin:0 0 12px;line-height:1.4}

/* --- compact package radio rows (replaces the 3-col cards INSIDE the stage) --- */
.t4-widget--cfgstage .booking-step[data-id="step-2"] .booking-step__cards{
	display:flex !important;flex-direction:column;gap:7px;margin:0 !important;width:100% !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card{
	position:relative;display:grid !important;grid-template-columns:18px minmax(0,1fr) auto;column-gap:9px;
	align-items:start;border:1px solid #e8e3d9 !important;background:#fff !important;
	border-radius:11px !important;padding:11px 12px !important;cursor:pointer;
	margin:0 !important;width:100% !important;min-height:0 !important;box-shadow:none !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card.active{
	border-color:#FF2800 !important;box-shadow:inset 0 0 0 1px #FF2800 !important;background:#ffece7 !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card::before{
	content:'';grid-column:1;grid-row:1;width:18px;height:18px;border-radius:50%;
	border:1.5px solid #cfc8ba;background:#fff;margin-top:1px;box-sizing:border-box;
	transition:border-color .18s ease,border-width .18s cubic-bezier(.34,1.3,.64,1)}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card.active::before{border-color:#FF2800;border-width:5.5px}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card::after{display:none !important;content:none !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__header{display:contents !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__title{
	grid-column:2;grid-row:1;font-family:var(--t4-mono);font-size: var(--t4-fs-micro) !important;
	letter-spacing:1.1px;text-transform:uppercase;font-weight:600 !important;display:flex;align-items:center;gap:6px;
	line-height:1.7;margin:0 !important;padding:0 !important;background:none !important;text-align:left !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__title::before{
	content:'';width:6px;height:6px;border-radius:50%;background:#9AA0A6;flex:none}
.t4-widget--cfgstage .extra-card--bronze .extra-card__title{color:#9C6633 !important}
.t4-widget--cfgstage .extra-card--bronze .extra-card__title::before{background:#C08552}
.t4-widget--cfgstage .extra-card--silver .extra-card__title{color:#6E7176 !important}
.t4-widget--cfgstage .extra-card--silver .extra-card__title::before{background:#9AA0A6}
.t4-widget--cfgstage .extra-card--gold .extra-card__title{color:#9A7B1F !important}
.t4-widget--cfgstage .extra-card--gold .extra-card__title::before{background:#D4AF37}
.t4-cfg__pksub{grid-column:2;grid-row:2;font-size: var(--t4-fs-micro);color:#4a4a4a;line-height:1.35;margin-top:3px;text-align:left}
.t4-cfg__pkworth{grid-column:2;grid-row:3;font-size: var(--t4-fs-micro);color:#8a8a8a;margin-top:3px;text-align:left}
.t4-cfg__pkworth s{color:#8a8a8a}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__price{
	grid-column:3;grid-row:1;justify-self:end;text-align:right !important;
	font-size: var(--t4-fs-body) !important;font-weight:800 !important;line-height:1.1 !important;
	margin:0 !important;padding:0 !important;color:#141414 !important;letter-spacing:-.2px}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__price *{
	font-size:inherit !important;font-weight:inherit !important;color:inherit !important;
	margin:0 !important;padding:0 !important;display:inline !important;vertical-align:baseline !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__price::before,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__price::after{display:none !important;content:none !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__saved{
	grid-column:3;grid-row:2;justify-self:end;font-size: var(--t4-fs-micro) !important;font-weight:600 !important;
	color:#1F7A3D !important;background:#e9f5ec !important;padding:2px 6px !important;border-radius:7px !important;
	margin:4px 0 0 !important;line-height:1.3 !important;display:inline-block !important;
	letter-spacing:0 !important;text-transform:none !important;width:auto !important;white-space:nowrap}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__old-price,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__list,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__btn,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card hr{display:none !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card .checkbox__input{position:absolute;opacity:0;pointer-events:none}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card .extra-card__sticker{
	position:absolute !important;top:0 !important;bottom:auto !important;right:10px !important;left:auto !important;
	transform:translateY(-50%) !important;width:auto !important;height:auto !important;
	background:#FF2800 !important;color:#fff !important;font-size:8px !important;font-weight:600 !important;
	letter-spacing:.7px !important;padding:2.5px 7px !important;border-radius:8px !important;
	white-space:nowrap !important;text-transform:uppercase !important;line-height:1.3 !important;margin:0 !important;
	display:inline-block !important;z-index:2}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__quantity{
	grid-column:2 / -1;grid-row:4;justify-self:start;display:flex !important;align-items:center !important;gap:0 !important;
	border:1px solid #e8e3d9 !important;border-radius:8px !important;overflow:hidden !important;
	margin:8px 0 0 !important;width:auto !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__quantity.hidden{display:none !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__quantity .quantity__btn{
	width:32px !important;height:32px !important;border:none !important;border-radius:0 !important;
	background:#f7f3ec !important;color:#141414 !important;font-size: var(--t4-fs-small) !important;
	display:flex !important;align-items:center;justify-content:center;padding:0 !important;min-width:0 !important;
	box-shadow:none !important}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__quantity .quantity__btn svg{
	width:12px !important;height:12px !important;stroke:#141414 !important;fill:none}
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card__quantity input{
	width:32px !important;height:32px !important;border:none !important;text-align:center !important;
	font-size: var(--t4-fs-micro) !important;font-weight:600 !important;background:#fff !important;padding:0 !important;
	color:#141414 !important;opacity:1 !important;display:block !important;min-width:0 !important}
/* "Continue without extras" = the 4th radio option, selected by default */
.t4-cfg__skip{display:flex;align-items:center;gap:9px;margin-top:7px;padding:11px 12px;
	border:1px solid #e8e3d9;border-radius:11px;font-size: var(--t4-fs-micro);color:#4a4a4a;
	cursor:pointer;background:#fff;width:100%;text-align:left}
.t4-cfg__skip .rdo{width:18px;height:18px;border-radius:50%;border:1.5px solid #cfc8ba;flex:none;
	background:#fff;box-sizing:border-box;transition:border-color .18s ease,border-width .18s cubic-bezier(.34,1.3,.64,1)}
.t4-cfg__skip.sel{border-color:#FF2800;box-shadow:inset 0 0 0 1px #FF2800;background:#ffece7;color:#141414;font-weight:600}
.t4-cfg__skip.sel .rdo{border-color:#FF2800;border-width:5.5px}

/* --- gateway redirect note (step-3, under the payment grid) --- */
.t4-cfg__redir{display:flex;align-items:flex-start;gap:8px;margin-top:9px;padding:10px 12px;
	background:#fbf9f5;border:1px solid #e8e3d9;border-radius:10px;font-size: var(--t4-fs-micro);color:#4a4a4a;line-height:1.4}
.t4-cfg__redir svg{width:13px;height:13px;stroke:#8a8a8a;fill:none;stroke-width:2;flex:none;margin-top:1px}

/* --- refund with Pay later: dimmed children (row opacity would dim the popover) --- */
.t4-refund--off{cursor:not-allowed !important}
.t4-refund--off > .t4-refund__label,
.t4-refund--off > .t4-refund__hint{opacity:.45}
.t4-cfg__pop{position:absolute;right:0;bottom:calc(100% + 10px);z-index:20;
	max-width:min(300px,calc(100vw - 48px));background:#17181c;color:#fff;border-radius:12px;padding:12px 14px;
	font-size: var(--t4-fs-micro);line-height:1.55;font-weight:400;box-shadow:0 12px 34px rgba(0,0,0,.28);
	animation:t4cfgPopIn .18s ease both}
.t4-cfg__pop::after{content:'';position:absolute;right:20px;top:100%;border:7px solid transparent;border-top-color:#17181c}
@keyframes t4cfgPopIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- unchecked terms: point at the row (V2 rule) --- */
.t4-cfg__terms--err{border:1px solid #C4271B !important;border-radius:10px;
	box-shadow:0 0 0 3px rgba(196,39,27,.12) !important;animation:t4cfgShake .4s ease 1}
@keyframes t4cfgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* ================= MOTION POLISH (V2, transform/opacity only) ================= */
.t4-cfg__opt,.t4-cfg__dur,.t4-cfg__tile,.t4-cfg__slot,.t4-cfg__addon,.t4-cfg__fam,
.t4-cfg__paxbtn,.t4-cfg__fullcal,.t4-cfg__skip,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card,
.t4-widget--cfgstage .booking-checkout__payment{
	transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,
		color .18s ease,transform .12s ease,opacity .18s ease}
.t4-cfg__opt:active,.t4-cfg__dur:active,.t4-cfg__tile:active,
.t4-cfg__slot:active:not(:disabled),.t4-cfg__addon:active,.t4-cfg__skip:active,
.t4-widget--cfgstage .booking-step[data-id="step-2"] .extra-card:active,
.t4-widget--cfgstage .booking-checkout__payment:active{transform:scale(.98)}
.t4-cfg__cta{transition:background-color .2s ease,transform .12s ease,filter .15s}
.t4-cfg__cta:active:not(:disabled){transform:scale(.985)}

@media (prefers-reduced-motion: reduce){
	.t4-cfg,.t4-cfg *,.t4-cfg *::before,.t4-cfg *::after{animation:none !important;transition:none !important}
}