/* ========================================================================== AWESTRUCK — "All Offerings From This Venue" (Resort / Staycation) widget Isolated, additive. Every rule is scoped under .pyd-rst-widget. Source design: handoff-resort-karishma/mobile/ (+ /desktop/) — same carbon-fibre card, room-photo carousel and sticky Continue bar language as the cafe widget, adapted for paid-only stays (no free tab, no custom step-2 form — Check-in/out, Adults, Kids, Rooms, Name, Email, Mobile are already the real booking form's own hotel-mode fields, so "Continue" just reveals that existing form, same as the desktop version already shipped). SAFETY NOTE: the mobile handoff's own CSS used `.sticky{position:fixed}` and a `.step2{position:fixed;inset:0}` sheet appended to — the exact pattern that caused the containment bugs fixed in the cafe widget (real form visible underneath, full-page overlay, homepage leak). This file keeps the same VISUAL language (a bar docked to the bottom with a Save tag, amount and Continue button) but implements it as `position:sticky` scoped to the widget's own container — never `position:fixed`, nothing ever appended to . THEME: keyed to the site's real html[data-bs-theme="dark|light"] attribute, same as pick-your-deal.css and the desktop resort preview. ========================================================================== */ .pyd-rst-widget{ --pyd-rst-blue:#4a4dff;--pyd-rst-blue2:#383bf1;--pyd-rst-yellow:#ffce3a;--pyd-rst-ydeep:#f6b800; --pyd-rst-green:#2bb96a;--pyd-rst-greenT:#7cefaa;--pyd-rst-pink:#ffacb4;--pyd-rst-pinkT:#7a1030; --pyd-rst-lav:#4a47a0; --pyd-rst-sharp:"Space Grotesk",sans-serif;--pyd-rst-body:"DM Sans",sans-serif;--pyd-rst-disp:"Bricolage Grotesque",sans-serif; /* dark defaults */ --pyd-rst-ink:#f0f0f0;--pyd-rst-dim:#9a9a9a;--pyd-rst-line:#2b2b2b;--pyd-rst-card:#161616; --pyd-rst-fld:#161616;--pyd-rst-fldln:#2e2e2e;--pyd-rst-chip:rgba(74,77,255,.28);--pyd-rst-chipink:#dfe0ff; --pyd-rst-imga:#242424;--pyd-rst-imgb:#2d2d2d; font-family:var(--pyd-rst-body); color:var(--pyd-rst-ink); position:relative; margin:0 0 16px; min-width:0;max-width:100%; } html[data-bs-theme="light"] .pyd-rst-widget{ --pyd-rst-ink:#141414;--pyd-rst-dim:#6f6f6f;--pyd-rst-line:#e7e3da;--pyd-rst-card:#fff; --pyd-rst-fld:#fff;--pyd-rst-fldln:#ecdcc2;--pyd-rst-chip:#eef0ff;--pyd-rst-chipink:#2b2b66; --pyd-rst-imga:#e8e2d4;--pyd-rst-imgb:#efe9dc; } .pyd-rst-widget *{box-sizing:border-box;} .pyd-rst-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-rst-carbon{background:#fbf4e6;background-image:none;} /* ══ Robust hide for the real booking form (+ its sibling price-bar / Checkout button — see pick-your-deal.css for why !important is needed and why these are separate elements, not children, of the form). ══ */ .pyd-rst-target-hidden{display:none !important;} /* See the identical note in pick-your-deal.css — these higher-specificity selectors only fire once JS has ALSO added .pyd-rst-target-hidden, so they only ever hide what resort-offerings.js already decided to hide. */ #experienceModal .ep-price-bar.pyd-rst-target-hidden, #experienceModal .book-now-btnn.ep-checkout-wrap.pyd-rst-target-hidden, #experienceModal .modal-booking.ep-mobile-bar.pyd-rst-target-hidden, .aw-v2 .price-bar.pyd-rst-target-hidden, /* See the matching note in pick-your-deal.css — the mobile fixed "Checkout" button on the details page's own booking card needs the same specificity-matching override. */ .aw-v2 .aw-checkout.pyd-rst-target-hidden{display:none !important;} .pyd-rst-imgph{ background:repeating-linear-gradient(45deg,var(--pyd-rst-imga) 0 12px,var(--pyd-rst-imgb) 12px 24px); display:flex;align-items:center;justify-content:center;font-family:var(--pyd-rst-sharp); font-size:10px;letter-spacing:.12em;color:var(--pyd-rst-dim); } /* ── "ALL OFFERINGS FROM THIS VENUE" card ───────────────────────────── */ .pyd-rst-deals{ border:1.5px solid var(--pyd-rst-line);border-radius:18px;padding:15px;position:relative;overflow:hidden; } .pyd-rst-deals::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--pyd-rst-ydeep),var(--pyd-rst-yellow),var(--pyd-rst-ydeep));} .pyd-rst-deyebrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;} .pyd-rst-deyebrow .pyd-rst-e{font-family:var(--pyd-rst-sharp);font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--pyd-rst-yellow);} html[data-bs-theme="light"] .pyd-rst-deyebrow .pyd-rst-e{color:var(--pyd-rst-blue);} .pyd-rst-deyebrow .pyd-rst-cnt{font-family:var(--pyd-rst-sharp);font-size:11px;font-weight:700;color:var(--pyd-rst-dim);} .pyd-rst-railwrap{position:relative;} .pyd-rst-cnav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%; background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.22);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-rst-cnav{background:#fff;color:#111;border-color:var(--pyd-rst-line);box-shadow:0 2px 8px rgba(0,0,0,.15);} .pyd-rst-cnav.pyd-rst-l{left:11px;}.pyd-rst-cnav.pyd-rst-r{right:11px;} .pyd-rst-cnav.pyd-rst-hide{opacity:0;pointer-events:none;} .pyd-rst-rail{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .pyd-rst-rail::-webkit-scrollbar{display:none;} /* Single card: center it in the rail instead of it sitting flush left (flex:0 0 85% otherwise leaves it stranded on the left with empty space on the right) — same technique as pick-your-deal.js's .pyd-deal:only-child. */ .pyd-rst-room:only-child{margin:0 auto;} @property --pyd-rst-awa{syntax:"";initial-value:0deg;inherits:false;} .pyd-rst-room{flex:0 0 85%;scroll-snap-align:start;border:2px solid var(--pyd-rst-line);border-radius:16px; overflow:hidden;position:relative;background:var(--pyd-rst-card);cursor:pointer; transition:border-color .2s, opacity .25s ease, filter .25s ease;} .pyd-rst-room:not(.pyd-rst-sel){opacity:.55;filter:grayscale(35%);} .pyd-rst-room:not(.pyd-rst-sel):hover{opacity:.85;filter:grayscale(10%);} .pyd-rst-room.pyd-rst-sel{border-color:transparent; background:linear-gradient(var(--pyd-rst-card),var(--pyd-rst-card)) padding-box, conic-gradient(from var(--pyd-rst-awa),var(--pyd-rst-ydeep),#fff0b8 25%,var(--pyd-rst-green) 50%,#fff0b8 75%,var(--pyd-rst-ydeep)) border-box; animation:pyd-rst-spin 6s linear infinite;} @keyframes pyd-rst-spin{to{--pyd-rst-awa:360deg;}} .pyd-rst-ph{height:190px;position:relative;background-size:cover;background-position:center;} .pyd-rst-ph .pyd-rst-tag{position:absolute;top:10px;left:10px;background:var(--pyd-rst-pink);color:var(--pyd-rst-pinkT); font-family:var(--pyd-rst-sharp);font-size:10px;font-weight:800;border-radius:999px;padding:3px 9px; animation:pyd-rst-blink 1.15s ease-in-out infinite alternate;} @keyframes pyd-rst-blink{to{opacity:.4;}} .pyd-rst-bd{padding:9px 13px 13px;} .pyd-rst-nm{font-family:var(--pyd-rst-disp);font-size:18px;font-weight:800;line-height:1.1;} .pyd-rst-amen{margin:9px 0 5px;overflow:hidden;} /* The fade-to-transparent mask is only a "there's more, scroll for it" hint for the marquee (.pyd-rst-amen-scroll, 4+ highlights) - applying it to the plain static row too (1-3 highlights, e.g. a single "per night"/"60 min" chip) faded its edge for no reason, reading as an odd shadow on a chip that isn't scrolling at all. */ .pyd-rst-amen-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-rst-amen-track{display:flex;flex-wrap:nowrap;gap:6px;width:max-content;} .pyd-rst-amen span{background:var(--pyd-rst-chip);border-radius:999px;padding:4px 10px;font-size:11.5px; font-weight:600;color:var(--pyd-rst-chipink);white-space:nowrap;flex:0 0 auto;} .pyd-rst-amen span::before{content:"\2713 ";color:var(--pyd-rst-greenT);font-weight:800;} /* 3 or fewer highlights: static row, no motion needed. More than that: the track (duplicated content, see render()) scrolls continuously left, kept slow/smooth so it reads well — pauses on hover/touch. Same technique and speed as pick-your-deal.js's .pyd-inc-scroll. */ .pyd-rst-amen-scroll .pyd-rst-amen-track{animation:pyd-rst-amen-marquee 35s linear infinite; animation-play-state:paused;} .pyd-rst-room.pyd-rst-sel .pyd-rst-amen-scroll .pyd-rst-amen-track{animation-play-state:running;}@keyframes pyd-rst-amen-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} .pyd-rst-prow{display:flex;align-items:flex-end;justify-content:space-between;} .pyd-rst-prow .pyd-rst-pr{font-family:var(--pyd-rst-sharp);font-size:21px;font-weight:800;} .pyd-rst-prow .pyd-rst-pr s{font-size:12.5px;color:var(--pyd-rst-dim);font-weight:500;margin-left:5px;} .pyd-rst-prow .pyd-rst-pr small{font-size:11px;color:var(--pyd-rst-dim);font-weight:600;display:block;margin-top:1px;} .pyd-rst-save{background:var(--pyd-rst-green);color:#08341c;font-family:var(--pyd-rst-sharp);font-size:12px; font-weight:800;border-radius:8px;padding:6px 10px;display:inline-flex;align-items:center;gap:5px;} html[data-bs-theme="light"] .pyd-rst-save{color:#fff;} .pyd-rst-save::before{content:"\2193";font-weight:900;} .pyd-rst-dots{display:flex;gap:6px;margin:13px 0 0;padding-left:2px;} .pyd-rst-dots i{width:7px;height:7px;border-radius:4px;background:rgba(127,127,127,.35);transition:all .25s;display:inline-block;} .pyd-rst-dots i.pyd-rst-on{width:22px;background:var(--pyd-rst-ydeep);} .pyd-rst-hint{margin:11px 0 0;font-size:12px;color:var(--pyd-rst-dim);text-align:center;font-family:var(--pyd-rst-sharp);font-weight:600;} /* ── Desktop: plain Continue button, no price readout — same simple, non-fixed, full-width style as the cafe/deals widget's own .pyd-continue. Never position:sticky/fixed — normal document flow only, so it can't repeat the earlier grid-column-squeeze bug. ── */ .pyd-rst-continue-plain{margin-top:16px;background:var(--pyd-rst-blue2);color:#fff;border:none;border-radius:14px;padding:15px; font-family:var(--pyd-rst-disp);font-size:17px;font-weight:800;text-align:center;cursor:pointer; position:relative;overflow:hidden;width:100%;} .pyd-rst-continue-plain::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-rst-cshine 3.2s ease-in-out infinite;} @keyframes pyd-rst-cshine{0%,55%{left:-100%;}100%{left:220%;}} /* ── Mobile only: replace the desktop plain price+button with a single bottom-docked bar (save badge + price + Continue) — same safe technique as the cafe/deals widget's .pyd-mbar (position:fixed removes it from layout entirely, so it can't affect grid sizing). Exactly one of .pyd-rst-desktop-cta / .pyd-rst-mbar is ever visible at a time via this media query, so this can't repeat the duplicate-button bug from before. ── */ .pyd-rst-mbar{display:none;} @media (max-width:991px){ .pyd-rst-desktop-cta{display:none;} .pyd-rst-mbar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1051; align-items:center;justify-content:space-between;gap:12px; padding:10px 16px; background:#111; border-top:2px solid var(--pyd-rst-ydeep); box-shadow:0 -10px 30px rgba(0,0,0,.35); } html[data-bs-theme="light"] .pyd-rst-mbar{background:#fff;} .pyd-rst-mbar-price{min-width:0;flex:1 1 auto;} .pyd-rst-mbar-save{background:var(--pyd-rst-green);color:#08341c;font-family:var(--pyd-rst-sharp); font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 7px;display:inline-block;margin-bottom:3px;} .pyd-rst-mbar-amt{font-family:var(--pyd-rst-sharp);font-size:20px;font-weight:900;color:var(--pyd-rst-ink); letter-spacing:-.02em;overflow-wrap:break-word;} .pyd-rst-mbar-amt small{font-size:12.5px;color:var(--pyd-rst-dim);font-weight:500;text-decoration:line-through;margin-left:6px;} .pyd-rst-mbar .pyd-rst-continue-plain{ width:auto;flex:0 0 auto;border-radius:999px;padding:13px 26px;box-shadow:none;margin-top:0; } } .pyd-rst-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--pyd-rst-dim);margin-top:10px;} .pyd-rst-trust svg{width:12px;height:12px;stroke:var(--pyd-rst-greenT);stroke-width:2;fill:none;} /* ── Recap chip shown above the UNCHANGED, existing (hotel-mode) booking form once "Continue" is pressed — purely informational. ── */ .pyd-rst-recap-strip{display:flex;align-items:center;gap:10px;background:var(--pyd-rst-fld); border:1.5px solid var(--pyd-rst-ydeep);border-radius:14px;padding:10px 12px;margin-bottom:12px; font-family:var(--pyd-rst-body);color:var(--pyd-rst-ink);} .pyd-rst-recap-strip .pyd-rst-rs-nm{font-weight:700;font-size:13.5px;} .pyd-rst-recap-strip .pyd-rst-rs-pr{margin-left:auto;font-family:var(--pyd-rst-sharp);font-weight:800;font-size:14px;} .pyd-rst-recap-strip .pyd-rst-rs-back{background:none;border:none;color:var(--pyd-rst-dim);font-size:12px; cursor:pointer;text-decoration:underline;} .pyd-rst-loading{font-size:12.5px;color:var(--pyd-rst-dim);text-align:center;padding:24px 0;} @media (max-width:480px){ .pyd-rst-room{flex:0 0 88%;} } .pyd-rst-loc { position: absolute; top: 10px; right: 10px; z-index: 5; background: rgba(255,255,255,0.95); color: #000; padding: 4px 9px 4px 7px; border-radius: 999px; font-family: var(--pyd-rst-sharp); font-weight: 700; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 3px; } .pyd-rst-loc svg { width: 8px; height: 8px; color: #000; flex-shrink: 0; } @media (max-width: 575px) { .pyd-rst-loc { font-size: 8.5px; padding: 3px 8px 3px 6px; } }