s inside the SAME widget container, toggled with display:none/block. Nothing here is position:fixed, nothing is appended to . That single change fixes the containment bug at the root for both mobile and desktop. THEME: keyed to html[data-bs-theme="dark|light"] — the site's own real theme attribute (see the inline script in details.html that syncs #aw-v2-dark-theme) — not a separate/invented toggle. ========================================================================== */ .pyd-widget{ --pyd-blue:#4a4dff;--pyd-blue2:#383bf1;--pyd-yellow:#ffce3a;--pyd-ydeep:#f6b800; --pyd-green:#2bb96a;--pyd-greenT:#7cefaa;--pyd-dgreen:#0e7a42;--pyd-pink:#ffacb4;--pyd-pinkT:#7a1030; --pyd-lav:#4a47a0; --pyd-sharp:"Space Grotesk",sans-serif;--pyd-body:"DM Sans",sans-serif;--pyd-disp:"Bricolage Grotesque",sans-serif; /* dark defaults */ --pyd-ink:#f0f0f0;--pyd-dim:#9a9a9a;--pyd-line:#2b2b2b;--pyd-card:#0f0f0f; --pyd-fld:#161616;--pyd-fldln:#2e2e2e;--pyd-chip:rgba(74,77,255,.28);--pyd-chipink:#dfe0ff; font-family:var(--pyd-body); color:var(--pyd-ink); position:relative; margin:0 0 16px; min-width:0;max-width:100%; } html[data-bs-theme="light"] .pyd-widget{ --pyd-ink:#141414;--pyd-dim:#6f6f6f;--pyd-line:#e7e3da;--pyd-card:#fff; --pyd-fld:#fff;--pyd-fldln:#ecdcc2;--pyd-chip:#eef0ff;--pyd-chipink:#2b2b66; } .pyd-widget *{box-sizing:border-box;} .pyd-widget{min-width:0;max-width:100%;} .pyd-carbon{ background-color:#111; background-image: linear-gradient(27deg,#191919 5px,transparent 5px), linear-gradient(207deg,#191919 5px,transparent 5px), linear-gradient(27deg,#141414 5px,transparent 5px), linear-gradient(207deg,#141414 5px,transparent 5px), linear-gradient(90deg,#181818,#141414); background-size:10px 10px,10px 10px,10px 10px,10px 10px,20px 10px; background-position:0 0,5px 5px,5px 0,10px 5px,0 0; } html[data-bs-theme="light"] .pyd-carbon{background:#fbf4e6;background-image:none;} /* ══ Robust hide for the real booking form ══ Using a class with !important instead of an inline style means it always wins even if other page JS (e.g. home.js) later sets style.display on the same element — no race condition either way. */ .pyd-target-hidden{display:none !important;} /* Some pre-existing page CSS force-shows these exact elements with a higher-specificity !important rule (e.g. `#experienceModal .ep-price-bar` and `.aw-v2 .price-bar` on mobile) that would otherwise beat the plain `.pyd-target-hidden` class above and leak the real price bar/checkout button behind this widget on the very first (pre-Continue) screen. These extra, more-specific selectors only fire when JS has ALSO added .pyd-target-hidden, so they can't hide anything this file didn't already intend to hide — see resolveTargets()/hideTarget() in pick-your-deal.js. */ #experienceModal .ep-price-bar.pyd-target-hidden, #experienceModal .book-now-btnn.ep-checkout-wrap.pyd-target-hidden, #experienceModal .modal-booking.ep-mobile-bar.pyd-target-hidden, .aw-v2 .price-bar.pyd-target-hidden, /* Mobile "Checkout" fixed button on the details page's own booking card (#experienceDetailPageBookingButton / .aw-checkout) is forced visible by `.aw-v2 .aw-checkout{display:inline-flex!important}` in awestruck-details-mobile.css — same specificity-war pattern as the rest of this list, just a selector that list didn't cover yet. Without this, the free-table "Reserve Your Table" form on the details page (mobile) showed a floating, non-functional "Checkout" pill underneath it. */ .aw-v2 .aw-checkout.pyd-target-hidden{display:none !important;} /* ── PICK YOUR DEAL card ─────────────────────────────────────────────── */ .pyd-deals{ border:1.5px solid var(--pyd-line);border-radius:18px;padding:15px;position:relative;overflow:hidden; } .pyd-deals::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--pyd-ydeep),var(--pyd-yellow),var(--pyd-ydeep));} .pyd-deyebrow{display:flex;align-items:center;justify-content:space-between;} .pyd-deyebrow .pyd-e{font-family:var(--pyd-sharp);font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--pyd-yellow);} html[data-bs-theme="light"] .pyd-deyebrow .pyd-e{color:var(--pyd-blue);} .pyd-dtoggle{display:flex;gap:5px;margin:12px 0;padding:4px;background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);border-radius:13px;} html[data-bs-theme="light"] .pyd-dtoggle{background:#f4e7d3;border-color:transparent;} .pyd-tg{flex:1;min-height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center; gap:8px;font-family:var(--pyd-sharp);font-weight:800;font-size:16px;color:var(--pyd-dim);cursor:pointer; line-height:1.1;transition:background .2s,color .2s;background:none;border:none;} .pyd-tg.pyd-free{flex:.9;flex-direction:column;font-weight:700;font-size:13px;gap:1px;} .pyd-tg.pyd-on{background:var(--pyd-yellow);color:#111;} .pyd-tg small{font-size:10px;font-weight:600;opacity:.6;} .pyd-sticker{background:var(--pyd-pink);color:var(--pyd-pinkT);font-family:var(--pyd-sharp);font-size:10px; font-weight:800;border-radius:999px;padding:2px 8px;animation:pyd-blink 1.15s ease-in-out infinite alternate;} .pyd-tg.pyd-on .pyd-sticker{background:#111;color:var(--pyd-yellow);} @keyframes pyd-blink{to{opacity:.4;}} .pyd-tg.pyd-disabled{opacity:.45;cursor:not-allowed;} .pyd-tg.pyd-disabled.pyd-on{background:none;color:var(--pyd-dim);} .pyd-freepopup{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px); background:#1c1c1c;border:1.5px solid #3a3a3a;border-radius:12px;padding:5px 10px; display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#f0f0f0; box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:1400;opacity:0;pointer-events:none; transition:opacity .2s,transform .2s;max-width:90vw;} .pyd-freepopup.show{opacity:1;transform:translateX(-50%) translateY(0);} .pyd-freepopup-ic{font-size:16px;line-height:1;display:none;} .pyd-freepopup-br{display:none;} .pyd-railwrap{position:relative;} .pyd-cnav{position:absolute;top:42%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%; background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center; justify-content:center;font-size:16px;z-index:5;cursor:pointer;transition:opacity .2s;} html[data-bs-theme="light"] .pyd-cnav{background:#fff;color:#111;border-color:var(--pyd-line);box-shadow:0 2px 8px rgba(0,0,0,.15);} .pyd-cnav.pyd-l{left:11px;}.pyd-cnav.pyd-r{right:11px;} .pyd-cnav.pyd-hide{opacity:0;pointer-events:none;} .pyd-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-right:34px;} .pyd-rail::-webkit-scrollbar{display:none;} /* padding-right:34px above is a "peek" hint that there's another card to scroll to — with only one deal there's nothing to peek at, so it just read as lopsided empty space on the right. A lone card also fills the full row width (flex:0 0 100%) instead of the 87% carousel width below, so it lines up edge-to-edge with the Deals/Just-a-table toggle above it instead of looking narrower/smaller than the rest of the widget. */ .pyd-rail:has(.pyd-deal:only-child){padding-right:0;} .pyd-deal:only-child{flex:0 0 100%;margin:0;padding:18px;} @property --pyd-awa{syntax:"";initial-value:0deg;inherits:false;} .pyd-deal{flex:0 0 87%;min-width:0;scroll-snap-align:start;border:2px solid var(--pyd-line);border-radius:14px; padding:13px;position:relative;background:var(--pyd-card);cursor:pointer;overflow:hidden;} .pyd-deal.pyd-sel{border-color:transparent; background:linear-gradient(var(--pyd-card),var(--pyd-card)) padding-box, conic-gradient(from var(--pyd-awa),var(--pyd-ydeep),#fff0b8 25%,var(--pyd-green) 50%,#fff0b8 75%,var(--pyd-ydeep)) border-box; animation:pyd-spin 6s linear infinite;} @keyframes pyd-spin{to{--pyd-awa:360deg;}} .pyd-deal .pyd-dtop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;} .pyd-deal .pyd-nm{font-family:var(--pyd-disp);font-size:17px;font-weight:800;line-height:1.1;} .pyd-badge{flex:0 0 auto;background:none;border:none;padding:0;font-family:var(--pyd-sharp);font-size:11px; font-weight:600;color:var(--pyd-dim);display:flex;align-items:center;gap:5px;} .pyd-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pyd-dim);} .pyd-inc{margin:9px 0 11px;overflow:hidden;} /* Same reasoning as resort-offerings.css's .pyd-rst-amen-scroll: the fade-to-transparent mask is only a "there's more, scroll for it" hint for the marquee (.pyd-inc-scroll, 4+ highlights) - applying it to the plain static row too (1-3 highlights, e.g. a single "Per person" chip) faded its edge for no reason, reading as an odd shadow on a chip that isn't scrolling at all. */ .pyd-inc-scroll{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent); } .pyd-inc-track{display:flex;flex-wrap:nowrap;gap:6px;width:max-content;} .pyd-inc span{background:var(--pyd-chip);border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:600; color:var(--pyd-chipink);white-space:nowrap;flex:0 0 auto;} .pyd-inc span::before{content:"\2713 ";color:var(--pyd-green);font-weight:800;} /* 3 or fewer highlights: static row, no motion needed. More than that: the track (duplicated content, see renderDeals()) scrolls continuously left so every highlight is visible in turn, making it obvious there are more than fit on screen — pauses on hover/touch so it's readable. */ .pyd-inc-scroll .pyd-inc-track{animation:pyd-inc-marquee 35s linear infinite; animation-play-state:paused;} .pyd-deal.pyd-sel .pyd-inc-scroll .pyd-inc-track{animation-play-state:running;} @keyframes pyd-inc-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} .pyd-prow{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;} .pyd-prow .pyd-pr{font-family:var(--pyd-sharp);font-size:21px;font-weight:800;white-space:nowrap;min-width:0;} .pyd-prow .pyd-pr s{font-size:13px;color:var(--pyd-dim);font-weight:500;margin-left:5px;} .pyd-prow .pyd-pr small{font-size:11px;color:var(--pyd-dim);font-weight:600;margin-left:3px;} .pyd-save{background:var(--pyd-green);color:#fff;font-family:var(--pyd-sharp);font-size:12px;font-weight:800; border-radius:8px;padding:6px 11px;display:inline-flex;align-items:center;gap:5px; box-shadow:0 3px 10px -3px rgba(43,185,106,.7);white-space:nowrap;flex-shrink:0;} html[data-bs-theme="dark"] .pyd-save{color:#08341c;} .pyd-save::before{content:"\2193";font-size:12px;font-weight:900;} .pyd-dots{display:flex;gap:6px;margin-top:11px;justify-content:center;} .pyd-dots i{width:7px;height:7px;border-radius:4px;background:var(--pyd-dim);opacity:.5;transition:all .25s;display:inline-block;} .pyd-dots i.pyd-on{width:20px;opacity:1;background:var(--pyd-ydeep);} .pyd-freecard{display:none;border:1.5px solid var(--pyd-line);border-radius:14px;padding:15px;background:var(--pyd-card);} .pyd-freecard .pyd-ttl{font-family:var(--pyd-disp);font-size:17px;font-weight:800;} .pyd-freecard .pyd-fs{font-size:13px;color:var(--pyd-dim);line-height:1.5;margin-top:5px;} .pyd-freecard .pyd-fpill{display:inline-flex;align-items:center;gap:7px;background:var(--pyd-green);color:#111; font-family:var(--pyd-sharp);font-size:12px;font-weight:800;border-radius:999px;padding:6px 13px;margin-top:11px;} .pyd-freecard .pyd-fpill::before{content:"";width:8px;height:8px;border-radius:50%;background:#111; animation:pyd-blink 1.5s ease-in-out infinite alternate;} .pyd-mbar{margin-top:16px;} .pyd-mbar-price{display:none;} .pyd-continue{background:var(--pyd-blue2);color:#fff;border:none;border-radius:14px;padding:15px; font-family:var(--pyd-disp);font-size:17px;font-weight:800;text-align:center;cursor:pointer; position:relative;overflow:hidden;width:100%;} .pyd-continue::before{content:"";position:absolute;top:0;left:-100%;width:45%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:pyd-cshine 3.2s ease-in-out infinite;} @keyframes pyd-cshine{0%,55%{left:-100%;}100%{left:220%;}} /* ── Mobile: turn the plain Continue button into a bottom-docked bar with price + save badge on the left (same info the real checkout bar used to show) and Continue on the right — WITHOUT touching document flow/grid sizing. position:fixed removes the whole bar from layout entirely (the same safe technique the site's own real .modal-booking.ep-mobile-bar already uses), so this can never repeat the earlier grid-column-squeeze bug that position:sticky caused when the price content lived inline. ── */ @media (max-width:991px){ .pyd-mbar{ position:fixed;left:0;right:0;bottom:0;margin-top:0;z-index:1051; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 16px; background:#111; border-top:2px solid var(--pyd-ydeep); box-shadow:0 -10px 30px rgba(0,0,0,.35); } html[data-bs-theme="light"] .pyd-mbar{background:#fff;} .pyd-mbar-price{display:block;min-width:0;flex:1 1 auto;} .pyd-mbar-save{background:var(--pyd-green);color:#08341c;font-family:var(--pyd-sharp); font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 7px;display:inline-block;margin-bottom:3px;} .pyd-mbar-amt{font-family:var(--pyd-sharp);font-size:20px;font-weight:900;color:var(--pyd-ink); letter-spacing:-.02em;overflow-wrap:break-word;} .pyd-mbar-amt small{font-size:12.5px;color:var(--pyd-dim);font-weight:500;text-decoration:line-through;margin-left:6px;} .pyd-continue{ width:auto;flex:0 0 auto;border-radius:999px;padding:13px 26px;box-shadow:none; } } /* Reserve-table form: on narrow phones, Email/Mobile and Date/Time-Slot were forced into two equal side-by-side columns regardless of width, cramming each field too narrow for its own icon + placeholder text and making inputs look clipped/cut off. Stack them to one column instead. */ @media (max-width:520px){ .pyd-two{flex-direction:column;gap:0;} } /* "Not available for this Offer" popup: on phones, drop the icon and give the text a bit more width/less font so it sits comfortably as a stable (non-scrolling) box, same look as desktop otherwise. Desktop (>520px) is untouched. */ @media (max-width:520px){ .pyd-freepopup{max-width:99vw;padding:7px 12px;} .pyd-freepopup-ic{display:none;} .pyd-freepopup [data-pyd-freepopup-text]{font-size:11px;line-height:1.3;} .pyd-freepopup-br{display:block;} } /* Price + Save badge on one line at narrow widths - the price shrinks its font instead of wrapping (badge is already flex-shrink:0/nowrap so it never breaks; this is the other half of that same fit-on-one-line fix). */ @media (max-width:400px){ .pyd-prow .pyd-pr{font-size:17px;} .pyd-prow .pyd-pr s{font-size:11px;} .pyd-prow .pyd-pr small{font-size:9px;} } .pyd-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--pyd-dim);margin-top:10px;} .pyd-trust svg{width:12px;height:12px;stroke:var(--pyd-greenT);stroke-width:2;fill:none;} /* ── Reserve-table form (Just a Table → Continue) — a plain sibling view, contained inside the SAME widget box. Nothing here is position:fixed. ── */ .pyd-backrow{display:flex;align-items:center;gap:8px;font-family:var(--pyd-sharp);font-size:13px;font-weight:700; color:var(--pyd-dim);cursor:pointer;margin-bottom:12px;background:none;border:none;padding:0;} .pyd-recap{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,209,83,.14),transparent); border:1.5px solid var(--pyd-ydeep);border-radius:14px;padding:12px 13px;margin-bottom:4px;} .pyd-recap .pyd-ic{width:40px;height:40px;border-radius:11px;background:var(--pyd-yellow);display:flex; align-items:center;justify-content:center;flex:0 0 auto;} .pyd-recap .pyd-nm{font-family:var(--pyd-disp);font-size:16px;font-weight:800;} .pyd-recap .pyd-sub{font-size:12px;color:var(--pyd-dim);margin-top:1px;} .pyd-recap .pyd-sub.pyd-freehl{color:var(--pyd-green);font-weight:700;line-height:1.4;} .pyd-recap .pyd-pr{margin-left:auto;text-align:right;font-family:var(--pyd-sharp);font-weight:800;font-size:16px;flex:0 0 auto;} .pyd-recap .pyd-pr .pyd-free{color:var(--pyd-green);} .pyd-form{margin-top:16px;} .pyd-lbl{font-family:var(--pyd-sharp);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--pyd-dim);display:block;margin:0 0 6px;} .pyd-fld{display:flex;align-items:center;gap:10px;background:var(--pyd-fld);border:1.5px solid var(--pyd-fldln); border-radius:11px;padding:4px 10px;margin-bottom:12px;} .pyd-fld svg{width:18px;height:18px;stroke:var(--pyd-dim);stroke-width:1.8;fill:none;flex:0 0 auto;} .pyd-fld input,.pyd-fld select{background:none;border:none;outline:none;color:var(--pyd-ink);font-family:var(--pyd-body); font-size:14.5px;width:100%;} .pyd-fld select{-webkit-appearance:none;appearance:none;cursor:pointer;} /* The dropdown's OWN popup list (