html {
scrollbar-gutter: stable;
overflow-y: scroll;
}
.prizequest-page {
--pq-surface: #f4f6f9;
--pq-surface-hover: #eef1f6;
--pq-surface-active: #e8ecf2;
--pq-edge: #e2e8f0;
--pq-ink: #3d4f63;
--pq-ink-muted: #5f7083;
--pq-elev: 0 1px 2px rgba(15, 25, 35, 0.07), 0 2px 8px rgba(15, 25, 35, 0.05);
--pq-elev-hover: 0 2px 4px rgba(15, 25, 35, 0.09), 0 4px 12px rgba(15, 25, 35, 0.07);
--spacing-md: 1rem;
--content-side-padding: 1rem;
--font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
--pq-nav-offset: 58px;
--pq-type-label: 0.8125rem;
--pq-type-chip: 0.75rem;
--pq-type-placeholder: 0.75rem;
--pq-type-input: 1rem;
}
body.prizequest-page.pq-has-cat-bar {
--pq-nav-offset: 108px;
}
@media (max-width: 767px) {
.prizequest-page,
body.prizequest-page.pq-has-cat-bar {
--pq-nav-offset: 132px;
}
}
.prizequest-page,
body.prizequest-page,
body.prizequest-page header.site-main-header,
body.prizequest-page header.site-main-header .nav-tabs {
font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.prizequest-page header.site-main-header,
body.prizequest-page footer,
body.prizequest-page .prizequest-hero {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.prizequest-page header.site-main-header {
flex-shrink: 0;
background-color: #0f1923 !important;
}
body.prizequest-page footer {
flex-shrink: 0;
background-color: #0f1923 !important;
border-top: 1px solid rgba(255,255,255,.08);
padding: 30px 0;
margin-top: 40px;
color: #fff;
min-height: 0;
}
body.prizequest-page .footer-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 90%;
margin: 0 auto;
padding: 0 20px;
}
body.prizequest-page .footer-links {
display: flex;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
justify-content: center;
}
body.prizequest-page .footer-links a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
body.prizequest-page .footer-legal {
font-size: 12px;
color: #fff;
max-width: 800px;
margin: 0 auto;
}
body.prizequest-page .safer-gambling-logos,
body.prizequest-page .gambling-support-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 15px 0;
flex-wrap: wrap;
}
body.prizequest-page .footer-logo { width: 35px; height: auto; }
body.prizequest-page .begambleaware-logo { width: 350px; max-width: 100%; }
body.prizequest-page .ukgc-logo { width: 165px; height: auto; }
body.prizequest-page .gambling-support-logos .footer-logo {
width: 100px;
height: 45px;
object-fit: contain;
}
body.prizequest-page .gamble-aware { margin: 15px 0; }
body.prizequest-page .footer-legal p { margin: 0.35rem 0; }
@media (min-width: 768px) {
body.prizequest-page footer p,
body.prizequest-page .footer-legal p { font-size: 14px; }
}
@media (max-width: 767px) {
body.prizequest-page footer p,
body.prizequest-page .footer-legal p { font-size: 12px; }
}
.prizequest-page .page-wrapper {
overflow-x: hidden;
max-width: 100vw;
background: #0f1923 !important;
}
@media (max-width: 767px) {
/* Navy wrapper was showing as a blue band when cards unpainted
during a fling. Header and hero keep their own navy. */
.prizequest-page .page-wrapper,
body.prizequest-page {
background: #fafbfc !important;
}
}
.prizequest-page .main-content {
opacity: 1;
visibility: visible;
display: block;
padding-bottom: 0.5rem;
background: #fafbfc !important;
}
.comp-box-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
max-width: 1400px;
margin: 0 auto;
box-sizing: border-box;
}
.comp-box {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
min-height: 0;
max-height: none;
box-sizing: border-box;
}
.comp-box-card-link {
display: block;
flex: 0 0 auto;
text-decoration: none !important;
color: inherit;
}
.prizequest-page .comp-box a,
.prizequest-page .comp-box a:hover,
.prizequest-page .comp-box a:focus,
.prizequest-page .comp-box a:visited,
.prizequest-favourites-grid .comp-box a,
.prizequest-favourites-grid .comp-box a:hover {
text-decoration: none !important;
}
.comp-box-image {
width: 100%;
aspect-ratio: 5 / 3;
position: relative;
overflow: hidden;
flex-shrink: 0;
background-color: #dce3ea;
}
.comp-box-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.comp-box-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
min-height: 40px;
background: #fff;
}
.prizequest-page .homepage-container.bq-carousel-stack {
overflow: visible !important;
margin-top: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Same wrapper geometry as body.homepage .main-content .games-section */
.prizequest-page .homepage-container.bq-carousel-stack > .betquest-carousel-wrapper.games-section {
padding-top: 15px !important;
min-height: 280px !important;
}
.prizequest-page .homepage-container.bq-carousel-stack > .betquest-carousel-wrapper.games-section + .betquest-carousel-wrapper.games-section {
margin-top: 0 !important;
}
/* home.php ≥920: .homepage .homepage-container { max-width: 1200px; padding: 0 1.5rem } */
@media (min-width: 920px) {
.prizequest-page .homepage-container.bq-carousel-stack {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
box-sizing: border-box !important;
}
}
@media (min-width: 1024px) {
.prizequest-page .homepage-container.bq-carousel-stack > .betquest-carousel-wrapper.games-section {
margin-top: 1rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
.prizequest-page .homepage-container.bq-carousel-stack > .betquest-carousel-wrapper.games-section .betquest-carousel-title {
padding-left: 0 !important;
padding-right: 0 !important;
}
.prizequest-page .homepage-container.bq-carousel-stack > .betquest-carousel-wrapper.games-section .betquest-carousel-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* Never paint desktop + mobile carousel titles together (carousel CSS is lazy). */
.betquest-carousel-title-desk { display: inline !important; }
.betquest-carousel-title-mob { display: none !important; }
@media (max-width: 767px) {
.betquest-carousel-title-desk { display: none !important; }
.betquest-carousel-title-mob { display: inline !important; }
}
/* Prizequest chrome: See All + card hover stay orange (Betquest stays green). */
.prizequest-page .betquest-carousel-see-all {
color: #ff5f00 !important;
}
.prizequest-page .betquest-carousel-see-all:hover {
color: #ff7a2e !important;
}
@media (hover: hover) {
body.prizequest-page .betquest-carousel-card:hover .betquest-carousel-footer {
background: rgba(255, 95, 0, 0.05) !important;
box-shadow: 0 2px 8px rgba(255, 95, 0, 0.2) !important;
}
}
.prizequest-prize-calculator { background-color: #ff5f00 !important; box-shadow: 0 4px 12px rgba(255, 95, 0, 0.25) !important; margin-bottom: 0 !important; }
.prizequest-page .prizequest-prize-calculator .prize-calculator { color: #ffffff !important; }
.prizequest-hero { background: #0f1923; border-radius: 0; padding: 48px 1rem 16px; margin: 0 0 0.45rem; width: 100%; margin-left: 0; border-bottom: none; color: #f4f7ff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; z-index: 1; isolation: isolate; min-height: 380px; box-sizing: border-box; }
.prizequest-hero .pq-hero-visual {
opacity: 1;
visibility: visible;
}
/* Desktop: fixed hero height wherever the mock card fan is present
(category/free + homepage) so cards share one geometry vs metrics. */
@media (min-width: 768px) {
body.prizequest-page.pq-scoped-page .prizequest-hero,
body.prizequest-page .prizequest-hero:has(.pq-hero-visual) {
min-height: 380px;
height: 380px;
overflow: hidden;
}
}
/* Kill the Betquest individual-page margin that common.js used to
mis-apply here (path contains "-competition"). Even if that class
is ever re-added, Prizequest main-content must never gain margin-top. */
body.prizequest-page.individual-competition-page .main-content,
body.prizequest-page .main-content {
margin-top: 0 !important;
}
/* Strict clip: filter blur can paint outside parent overflow; this layer keeps the orb inside the hero */
.pq-hero-orb-clip {
position: absolute;
inset: 0;
overflow: hidden;
clip-path: inset(0);
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.pq-hero-orb {
position: absolute;
top: -28%;
right: -24%;
width: 95%;
max-width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(
circle at center,
rgba(255, 95, 0, 0.42) 0%,
rgba(255, 95, 0, 0.22) 32%,
rgba(255, 95, 0, 0.10) 56%,
rgba(255, 95, 0, 0) 74%
);
pointer-events: none;
z-index: 0;
filter: blur(24px);
}
@media (min-width: 768px) {
.pq-hero-orb {
filter: none;
}
}
.prizequest-hero-inner { max-width: 1248px; margin: 0 auto; padding: 0; position: relative; }
/* Category hero decorative layer — absolute only; does not affect flow */
.pq-hero-visual {
position: absolute;
top: 0;
bottom: 148px;
/* Clear of the title text — band sits right of the headline */
/* Full-width canvas: never hard-cut side logos. Clip bottoms only
(into metrics) via clip-path; left/right can breathe. */
left: 0;
/* Never past the metric bar's right edge (content rail, min 1rem) */
right: max(1rem, calc((100% - 1248px) / 2));
width: auto;
pointer-events: none;
z-index: 0;
overflow: visible;
clip-path: none;
}
.pq-hero-cards {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.pq-hero-bubbles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* Dreamcar-behind layer (1000 only) — sits under cards while other logos stay on top */
.pq-hero-bubbles-back {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.pq-hero-mock {
position: absolute;
/* Footprint of a desktop .comp-box at scale(0.55): 300x~380 */
width: 165px;
height: 210px;
overflow: visible;
filter: none;
z-index: 2;
contain: layout;
content-visibility: visible;
}
.pq-hero-mock-rot {
width: 100%;
height: 100%;
transform-origin: center bottom;
border-radius: 10px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
filter: none;
isolation: auto;
}
/* Force desktop card width then scale — not width:100% of a tiny wrapper */
.pq-hero-mock .comp-box {
width: 300px !important;
max-width: none !important;
min-height: 0 !important;
flex: 0 0 300px;
transform: scale(0.55);
transform-origin: top left;
margin: 0;
pointer-events: none;
opacity: 1 !important;
visibility: visible !important;
overflow: hidden !important;
}
.pq-hero-mock .comp-box-card-link {
pointer-events: none;
cursor: default;
}
/* Bubbles retired — cards carry the hero. Keep selectors inert. */
.pq-hero-bubbles,
.pq-hero-bubbles-back,
.pq-hero-attach {
display: none !important;
}
/* Overlapping fan, dropped low so lower card halves clip below the band.
Right-anchored inside the stage; ≥1200 centres that stage between title & metrics.
Base = tuned 3-card fan (0.55). 4th card only bumps size/spacing at ≥1200. */
.pq-hero-mock--1 {
right: 52px;
left: auto;
bottom: -52px;
top: auto;
z-index: 4;
}
.pq-hero-mock--1 .pq-hero-mock-rot {
transform: rotate(-7deg);
}
.pq-hero-mock--2 {
right: 166px;
left: auto;
bottom: -44px;
top: auto;
z-index: 3;
}
.pq-hero-mock--2 .pq-hero-mock-rot {
transform: rotate(6deg);
}
.pq-hero-mock--3 {
right: 280px;
left: auto;
bottom: -50px;
top: auto;
z-index: 2;
}
.pq-hero-mock--3 .pq-hero-mock-rot {
transform: rotate(-5deg);
}
.pq-hero-mock--4 {
display: none;
right: 394px;
left: auto;
bottom: -46px;
top: auto;
z-index: 1;
}
.pq-hero-mock--4 .pq-hero-mock-rot {
transform: rotate(4deg);
}
.pq-hero-bubble {
border-radius: 50%;
background: transparent;
border: none; /* last-resort A/B: no orange ring */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
box-sizing: border-box;
overflow: hidden;
z-index: 1;
}
/* Brand tiles fill the circle — assets sized with inner circle guide in Canva */
.pq-hero-bubble img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 50%;
display: block;
transform: none;
}
/* BOTB wheel: white plate, image zoomed so the wheel rim fills the circle */
.pq-hero-bubble--white {
background: #fff;
}
.pq-hero-bubble--white img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 50%;
transform: none;
}
/* Non-house / non-cash heroes: same positions, empty white discs */
.pq-hero-bubble--blank {
background: #fff;
}
/* Legacy zoom helpers — disabled; new WebP bubbles are pre-framed for the ring */
.pq-hero-bubble--zoom img,
.pq-hero-bubble--zoom7 img,
.pq-hero-bubble--zoomdc img {
transform: none;
}
/* Live timer green on the mockup timers */
.pq-hero-mock .comp-box .comp-box-timer {
color: rgb(0, 136, 68) !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
}
/* Rev £100k cash art: crop north so £100,000 / CASH sits more central in the slot */
.pq-hero-mock .comp-box[data-comp-id="hero-mock-cash-rev-100k"] .comp-box-image,
.pq-hero-mock .pq-hero-card[data-comp-id="hero-mock-cash-rev-100k"] .pq-hero-card-image {
background-position: center 40%;
}
.pq-hero-mock .comp-box[data-comp-id="hero-mock-holidays-tgg-med-cruise"] .comp-box-image,
.pq-hero-mock .pq-hero-card[data-comp-id="hero-mock-holidays-tgg-med-cruise"] .pq-hero-card-image {
background-position: 85% 80%;
}
.pq-hero-mock .comp-box[data-comp-id="hero-mock-free-llf-golf-r"] .comp-box-image,
.pq-hero-mock .pq-hero-card[data-comp-id="hero-mock-free-llf-golf-r"] .pq-hero-card-image {
background-size: cover !important;
background-position: 42% 0% !important;
}
.pq-hero-mock .comp-box[data-comp-id="hero-mock-free-llf-golf-r"] .comp-box-image img,
.pq-hero-mock .pq-hero-card[data-comp-id="hero-mock-free-llf-golf-r"] .pq-hero-card-image img {
object-fit: cover !important;
object-position: 42% 0% !important;
}
/* Similar sizes — only slight variation, no tiny/huge outliers */
.pq-hero-bubble--sm { width: 56px; height: 56px; }
.pq-hero-bubble--md { width: 62px; height: 62px; }
.pq-hero-bubble--lg { width: 68px; height: 68px; }
.pq-hero-bubble--xl { width: 74px; height: 74px; }
/* Loose scatter hugging the 3-card group (locked with ≥1200 cards).
Staggered heights/offsets so it reads random, never touching the cards. */
.pq-hero-bubble:nth-child(1) { right: 528px; left: auto; bottom: 118px; top: auto; transform: rotate(-10deg); } /* upper-left */
.pq-hero-bubble:nth-child(4) { right: 508px; left: auto; bottom: 8px; top: auto; transform: rotate(5deg); } /* lower-left */
.pq-hero-bubble:nth-child(2) { right: 392px; left: auto; bottom: 152px; top: auto; transform: rotate(8deg); } /* Elite: just kisses the card top, tiny tuck behind */
.pq-hero-bubble:nth-child(5) { right: 248px; left: auto; bottom: 172px; top: auto; transform: rotate(-4deg); } /* BOTB: clear of the card, small gap */
.pq-hero-bubble:nth-child(6) { right: 112px; left: auto; bottom: 168px; top: auto; transform: rotate(7deg); } /* top-right, lower again */
.pq-hero-bubble:nth-child(3) { right: 60px; left: auto; bottom: 58px; top: auto; transform: rotate(-6deg); } /* right flank, tucks behind edge */
body.prizequest-page .prizequest-trust-stats {
overflow: visible;
position: relative;
z-index: 4;
}
/* ============================================================
HERO VISUAL — DESKTOP CARD LADDER (exact mins)
<900 off (until mobile ≤767)
≥900 1 card (small)
≥975 2 cards (small)
≥1024 3 cards (small) — 3rd tucked; slight peel toward 1115
≥1115 3 cards (small) — normal spacing
≥1200 3 cards (large 0.62) — same size as 1270, no 4th yet
≥1270 4 cards (large 0.62)
Mobile ≤767 unchanged below.
============================================================ */
/* ≥1270: 4-card fan (large) */
@media (min-width: 1270px) {
.pq-hero-visual {
--pq-rail: max(1rem, calc((100% - 1248px) / 2));
left: calc(var(--pq-rail) + 560px);
right: var(--pq-rail);
overflow: visible;
clip-path: inset(0 -120px 0 -48px);
}
.pq-hero-cards,
.pq-hero-bubbles {
left: 50%;
right: auto;
width: 760px;
height: 100%;
top: 0;
bottom: 0;
transform: translateX(-50%);
}
.pq-hero-cards { z-index: 3; }
.pq-hero-bubbles { display: none !important; }
.pq-hero-mock {
width: 186px;
height: 236px;
}
.pq-hero-mock .comp-box {
transform: scale(0.62);
}
.pq-hero-mock--4 { display: block; }
.pq-hero-mock--1 { right: 78px; left: auto; bottom: -52px; }
.pq-hero-mock--2 { right: 194px; left: auto; bottom: -44px; }
.pq-hero-mock--3 { right: 310px; left: auto; bottom: -50px; }
.pq-hero-mock--4 { right: 426px; left: auto; bottom: -46px; }
}
/* 1115–1199: 3 cards SMALL (0.55) */
@media (min-width: 1115px) and (max-width: 1199px) {
.pq-hero-visual {
--pq-rail: max(1rem, calc((100% - 1248px) / 2));
left: calc(var(--pq-rail) + 560px);
right: var(--pq-rail);
overflow: visible;
clip-path: inset(0 -120px 0 -48px);
}
.pq-hero-cards,
.pq-hero-bubbles {
left: 50%;
right: auto;
width: 660px;
height: 100%;
top: 0;
bottom: 0;
transform: translateX(-50%);
}
.pq-hero-cards { z-index: 3; }
.pq-hero-bubbles { display: none !important; }
.pq-hero-mock {
width: 165px;
height: 210px;
}
.pq-hero-mock .comp-box {
transform: scale(0.55);
}
.pq-hero-mock--4 { display: none !important; }
.pq-hero-mock--3 { display: block; }
.pq-hero-mock--1 { right: 108px; left: auto; bottom: -44px; }
.pq-hero-mock--2 { right: 222px; left: auto; bottom: -36px; }
.pq-hero-mock--3 { right: 336px; left: auto; bottom: -42px; }
}
/* 1200–1269: 3 cards at the LARGE 1270 size (no 4th yet) */
@media (min-width: 1200px) and (max-width: 1269px) {
.pq-hero-visual {
--pq-rail: max(1rem, calc((100% - 1248px) / 2));
left: calc(var(--pq-rail) + 560px);
right: var(--pq-rail);
overflow: visible;
clip-path: inset(0 -120px 0 -48px);
}
.pq-hero-cards,
.pq-hero-bubbles {
left: 50%;
right: auto;
width: 760px;
height: 100%;
top: 0;
bottom: 0;
transform: translateX(-50%);
}
.pq-hero-cards { z-index: 3; }
.pq-hero-bubbles { display: none !important; }
.pq-hero-mock {
width: 186px;
height: 236px;
}
.pq-hero-mock .comp-box {
transform: scale(0.62);
}
.pq-hero-mock--4 { display: none !important; }
.pq-hero-mock--3 { display: block; }
.pq-hero-mock--1 { right: 78px; left: auto; bottom: -52px; }
.pq-hero-mock--2 { right: 194px; left: auto; bottom: -44px; }
.pq-hero-mock--3 { right: 310px; left: auto; bottom: -50px; }
}
/* 1024–1114: cluster drifts right; leftmost peels left (more visible); NO vertical move */
@media (min-width: 1024px) and (max-width: 1114px) {
.pq-hero-visual {
overflow: visible;
clip-path: inset(0 -120px 0 -48px);
}
.pq-hero-bubbles { display: none !important; }
.pq-hero-mock {
width: 165px;
height: 210px;
}
.pq-hero-mock .comp-box {
transform: scale(0.55);
}
.pq-hero-mock--4 { display: none !important; }
.pq-hero-mock--3 { display: block; }
.pq-hero-mock--2 { display: block; }
/* Whole fan slides right gently (1024→1115) — keep final point on the metric bar */
.pq-hero-cards {
transform: translateX(calc((100vw - 1024px) * 0.05));
}
/* Hang: 8px up from 1115-bar so blurb isn't cropped */
.pq-hero-mock--1 {
right: 36px;
left: auto;
bottom: -44px;
}
.pq-hero-mock--2 {
right: 118px;
left: auto;
bottom: -36px;
}
/* Leftmost: slight peel only — ~halfway reveal, don't shove --1/--2 off */
.pq-hero-mock--3 {
right: calc(168px + (100vw - 1024px) * 0.35);
left: auto;
bottom: -42px;
z-index: 1;
}
}
/* 975–1023: 2 cards */
@media (min-width: 975px) and (max-width: 1023px) {
.pq-hero-visual {
overflow: visible;
clip-path: inset(0 -120px 0 -48px);
}
.pq-hero-bubbles { display: none !important; }
.pq-hero-mock--3,
.pq-hero-mock--4 { display: none !important; }
.pq-hero-mock--2 { display: block; }
.pq-hero-mock--1 { right: 40px; left: auto; bottom: -28px; }
.pq-hero-mock--2 { right: 140px; left: auto; bottom: -20px; }
}
/* 900–974: 1 card only */
@media (min-width: 900px) and (max-width: 974px) {
.pq-hero-visual {
overflow: visible;
clip-path: inset(0 -120px 0 -48px);
}
.pq-hero-bubbles { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: none !important; }
.pq-hero-mock--1 { right: 40px; left: auto; bottom: -28px; display: block; }
}
/* 768–899: no hero cards at all (desktop fan starts at 900) */
@media (max-width: 899px) and (min-width: 768px) {
.pq-hero-visual { display: none !important; }
}
/*
* MOBILE CARDS — one size everywhere ≤767 for the mock fan.
* Card chrome (logo/timer) locked so competition-box 450/600 bumps
* never change the decorative hero. Count changes only: 2 → 3 → 4.
*/
@media (max-width: 767px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 108px; /* tighter to title — shorter hero ≤599 */
}
.pq-hero-visual {
display: block;
position: absolute;
left: 6px;
right: 6px;
margin: 0;
width: auto;
top: auto;
bottom: 62px;
height: 148px;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.pq-hero-mock .comp-box { border-radius: 12px !important; }
.pq-hero-mock .comp-box-image,
.pq-hero-mock .comp-box-image img { border-radius: 0 !important; }
/* Same footprint as 415+ — no mini scale jumps */
.pq-hero-mock {
width: 140px;
height: 178px;
}
.pq-hero-mock-rot {
width: 140px;
height: 178px;
}
.pq-hero-mock .comp-box {
width: 300px !important;
transform: scale(0.47);
transform-origin: top left;
}
/* Freeze logo/timer/blurb at desktop-small sizes inside hero mocks */
.pq-hero-mock .comp-box-top {
min-height: 40px !important;
padding: 0.5rem 0.75rem !important;
}
.pq-hero-mock .comp-box-logo img {
max-width: 60px !important;
max-height: 32px !important;
min-width: 44px !important;
min-height: 28px !important;
}
.pq-hero-mock .comp-box .comp-box-timer {
font-size: 0.75rem !important;
}
.pq-hero-mock .comp-box-bottom {
padding: 0.75rem !important;
min-height: 0 !important;
}
.pq-hero-mock .comp-box-blurb,
.pq-hero-mock .comp-box-button {
font-size: 0.75rem !important;
}
.pq-hero-mock .comp-box-button {
padding: 0.5rem 1rem !important;
}
.pq-hero-mock--1,
.pq-hero-mock--2 { display: none; }
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block; }
.pq-hero-mock--4 { left: calc(50% - 106px); right: auto; bottom: -38px; }
.pq-hero-mock--3 { left: calc(50% - 10px); right: auto; bottom: -36px; }
}
/* Card-attached bubbles: desktop off. sm = ≤479, md = 480–599, lg = 650–767. */
.pq-hero-attach { display: none; }
/*
* ≤479: logos CHILDREN of the comp cards — glued (restored).
* Left: 7Days above/right of Omaze + Rafflhouse · Right: Elite + BOTB + Dreamcar.
*/
@media (max-width: 479px) {
.prizequest-hero:has(.pq-hero-visual) .hero-title {
margin-bottom: 6px !important;
}
/* ≤399 keeps the shorter 2-card hero; 400+ overridden below */
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 108px;
}
.pq-hero-visual {
height: 148px;
overflow: visible;
clip-path: inset(-40px -28px 0 -28px);
}
.pq-hero-bubbles { display: none !important; }
.pq-att-sm { display: none !important; }
.pq-hero-mock { overflow: visible; }
.pq-hero-mock-rot {
position: relative;
z-index: 2;
}
}
/*
* 400–474: 3 cards in a line — shifted left, BOTB raised.
*/
@media (max-width: 449px) and (min-width: 400px) {
.prizequest-hero:has(.pq-hero-visual) .hero-title {
margin-bottom: 2px !important;
}
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 136px; /* bar down — more blurb */
}
.pq-hero-visual {
bottom: 62px;
height: 168px;
overflow: visible;
clip-path: inset(-240px -120px 0 -48px);
}
.pq-hero-bubbles { display: none !important; }
.pq-att-sm { display: none !important; }
.pq-hero-mock { overflow: visible; }
.pq-hero-mock-rot {
position: relative;
z-index: 2;
}
.pq-hero-mock {
width: 140px;
height: 178px;
}
.pq-hero-mock-rot {
width: 140px;
height: 178px;
}
.pq-hero-mock .comp-box {
transform: scale(0.47);
}
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block; }
.pq-hero-mock--4 { left: calc(50% - 174px); right: auto; bottom: -16px; }
.pq-hero-mock--3 { left: calc(50% - 78px); right: auto; bottom: -16px; }
.pq-hero-mock--2 { left: calc(50% + 18px); right: auto; bottom: -16px; }
}
@media (max-width: 399px) and (min-width: 360px) {
body.prizequest-page.pq-home-page .pq-hero-mock--2 { display: none !important; }
body.prizequest-page.pq-home-page .pq-hero-mock--1 {
display: block;
left: calc(50% + 2px);
right: auto;
bottom: -16px;
z-index: 3;
}
body.prizequest-page.pq-home-page .pq-hero-mock--1 .pq-hero-mock-rot { transform: rotate(6deg); }
}
@media (max-width: 449px) and (min-width: 400px) {
body.prizequest-page.pq-home-page .pq-hero-mock--2 { display: none !important; }
body.prizequest-page.pq-home-page .pq-hero-mock--1 {
display: block;
left: calc(50% + 18px);
right: auto;
bottom: -16px;
z-index: 3;
}
body.prizequest-page.pq-home-page .pq-hero-mock--1 .pq-hero-mock-rot { transform: rotate(6deg); }
}
/*
* 450–599: 4 cards. Metrics + fan drop together so blurbs stay visible.
*/
@media (max-width: 599px) and (min-width: 450px) {
.prizequest-hero:has(.pq-hero-visual) .hero-title {
margin-bottom: 2px !important;
}
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 152px;
}
.pq-hero-visual {
bottom: 62px;
height: 168px;
overflow: visible;
clip-path: inset(-240px -120px 0 -48px);
}
.pq-hero-bubbles { display: none !important; }
.pq-att-sm,
.pq-att-md { display: none !important; }
.pq-hero-mock { overflow: visible; }
.pq-hero-mock {
width: 140px;
height: 178px;
}
.pq-hero-mock-rot {
width: 140px;
height: 178px;
position: relative;
z-index: 2;
}
.pq-hero-mock .comp-box {
transform: scale(0.47);
}
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block; }
.pq-hero-mock--1 { left: calc(50% + 72px); right: auto; bottom: -18px; z-index: 4; }
.pq-hero-mock--2 { left: calc(50% - 24px); right: auto; bottom: -22px; z-index: 3; }
.pq-hero-mock--3 { left: calc(50% - 120px); right: auto; bottom: -22px; z-index: 2; }
.pq-hero-mock--4 { left: calc(50% - 216px); right: auto; bottom: -22px; z-index: 1; }
}
/* 475–599: freeze metric-bar width until 600 */
@media (min-width: 475px) and (max-width: 599px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
width: 467px;
max-width: 467px;
margin-left: auto;
margin-right: auto;
}
.pq-hero-visual {
left: 50%;
right: auto;
width: 467px;
margin-left: -233.5px;
}
}
/* 600–649: 2 cards parked on the far right of the metric bar */
@media (max-width: 649px) and (min-width: 600px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 22px;
}
.pq-hero-visual {
top: auto;
bottom: 52px;
height: 168px;
left: 10px;
right: 8px;
overflow: visible;
clip-path: inset(-240px -120px 0 -48px);
}
.pq-hero-mock {
width: 140px;
height: 178px;
}
.pq-hero-mock-rot {
width: 140px;
height: 178px;
}
.pq-hero-mock .comp-box {
transform: scale(0.47);
}
.pq-hero-mock--1,
.pq-hero-mock--4 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3 { display: block; position: absolute; }
.pq-hero-mock--3 { left: auto; right: 122px; bottom: 0; }
.pq-hero-mock--2 { left: auto; right: 26px; bottom: -8px; }
body.prizequest-page.pq-home-page .pq-hero-mock--2 { display: none !important; }
body.prizequest-page.pq-home-page .pq-hero-mock--1 {
display: block !important;
position: absolute;
left: auto;
right: 26px;
bottom: -8px;
z-index: 3;
}
body.prizequest-page.pq-home-page .pq-hero-mock--1 .pq-hero-mock-rot { transform: rotate(6deg); }
.pq-hero-bubbles { display: none !important; }
.pq-att-lg { display: none !important; }
.pq-hero-cards { z-index: 2; }
}
/* 650–699: 3-card fan on the far right of the metric bar */
@media (max-width: 699px) and (min-width: 650px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 14px;
}
.pq-hero-visual {
top: auto;
bottom: 70px;
height: 168px;
left: 10px;
right: 8px;
overflow: visible;
clip-path: inset(-240px -120px 0 -48px);
}
.pq-hero-mock {
width: 140px;
height: 178px;
}
.pq-hero-mock-rot {
width: 140px;
height: 178px;
}
.pq-hero-mock .comp-box {
transform: scale(0.47);
}
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block; position: absolute; }
.pq-hero-mock--4 { left: auto; right: 194px; bottom: -50px; }
.pq-hero-mock--3 { left: auto; right: 102px; bottom: -48px; }
.pq-hero-mock--2 { left: auto; right: 10px; bottom: -50px; }
.pq-hero-bubbles { display: none !important; }
.pq-att-lg { display: none !important; }
.pq-hero-cards { z-index: 2; }
}
/* 700–767: same fan, slightly further left */
@media (max-width: 767px) and (min-width: 700px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 14px;
}
.pq-hero-visual {
top: auto;
bottom: 70px;
height: 168px;
left: 10px;
right: 8px;
overflow: visible;
clip-path: inset(-240px -120px 0 -48px);
}
.pq-hero-mock {
width: 140px;
height: 178px;
}
.pq-hero-mock-rot {
width: 140px;
height: 178px;
}
.pq-hero-mock .comp-box {
transform: scale(0.47);
}
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block; position: absolute; }
.pq-hero-mock--4 { left: auto; right: 218px; bottom: -50px; }
.pq-hero-mock--3 { left: auto; right: 126px; bottom: -48px; }
.pq-hero-mock--2 { left: auto; right: 34px; bottom: -50px; }
.pq-hero-bubbles { display: none !important; }
.pq-att-lg { display: none !important; }
.pq-hero-cards { z-index: 2; }
}
/*
* HOMEPAGE — fan parked a touch further right on desktop.
*/
@media (min-width: 900px) and (max-width: 1023px) {
body.prizequest-page.pq-home-page .pq-hero-cards {
transform: translateX(32px);
}
}
@media (min-width: 1024px) and (max-width: 1114px) {
/* Gentler end-point: stay over metrics, not past the right edge */
body.prizequest-page.pq-home-page .pq-hero-cards {
transform: translateX(calc(20px + (100vw - 1024px) * 0.05));
}
}
@media (min-width: 1115px) and (max-width: 1199px) {
body.prizequest-page.pq-home-page .pq-hero-cards {
transform: translateX(calc(-50% + 28px));
}
}
@media (min-width: 1200px) and (max-width: 1269px) {
/* Large 3-card band: further left onto the metric bar */
body.prizequest-page.pq-home-page .pq-hero-cards {
transform: translateX(calc(-50% - 20px));
}
}
@media (min-width: 1270px) {
body.prizequest-page.pq-home-page .pq-hero-cards {
transform: translateX(calc(-50% + 12px));
}
}
/*
* Small mobile: 3 cards above metrics as soon as they fit (~360+).
* Under-title pack — shared across homepage + scoped landings.
*/
@media (max-width: 399px) and (min-width: 360px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 136px;
}
.pq-hero-visual {
bottom: 62px;
height: 168px;
overflow: visible;
clip-path: inset(-240px -120px 0 -48px);
}
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block; }
.pq-hero-mock--4 { left: calc(50% - 158px); right: auto; bottom: -16px; }
.pq-hero-mock--3 { left: calc(50% - 78px); right: auto; bottom: -16px; }
.pq-hero-mock--2 { left: calc(50% + 2px); right: auto; bottom: -16px; }
}
/* Extra card height hangs behind the metric bar — do not lift blurbs. */
.pq-hero-mock .comp-box-bottom {
min-height: 0 !important;
padding-bottom: 2.75rem !important;
}
.pq-hero-card-body {
padding-bottom: 28px;
}
.pq-hero-mock .prizequest-cash-alt,
.pq-hero-mock .prizequest-progress-row,
.pq-hero-mock .prizequest-sold-count,
.pq-hero-mock .prizequest-entry-row,
.pq-hero-mock .prizequest-bulk-sticker,
.pq-hero-mock .comp-box-button,
.pq-hero-card-action {
display: none !important;
}
@media (max-width: 599px) {
.prizequest-hero:has(.pq-hero-visual) {
padding-left: 8px !important;
padding-right: 8px !important;
}
.prizequest-hero .pq-hero-visual {
overflow: visible !important;
clip-path: inset(-240px -120px 0 -48px) !important;
left: 4px !important;
right: 4px !important;
}
.prizequest-hero .prizequest-trust-stats {
z-index: 8;
}
.pq-hero-mock,
.pq-hero-mock-rot {
width: 140px;
height: 178px;
}
}
@media (max-width: 474px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
max-width: none;
}
}
@media (min-width: 475px) and (max-width: 599px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
width: 467px !important;
max-width: 467px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.prizequest-hero .pq-hero-visual {
left: 50% !important;
right: auto !important;
width: 467px !important;
margin-left: -233.5px !important;
}
}
@media (min-width: 600px) and (max-width: 767px) {
.prizequest-hero:has(.pq-hero-visual) {
padding-left: 10px !important;
padding-right: 8px !important;
overflow: hidden !important;
}
.prizequest-hero .pq-hero-visual {
overflow: visible !important;
clip-path: inset(-240px -120px 0 -48px) !important;
}
.prizequest-hero .prizequest-trust-stats {
z-index: 8;
}
.pq-hero-mock,
.pq-hero-mock-rot {
width: 140px;
height: 178px;
}
}
@media (min-width: 768px) and (max-width: 899px) {
.prizequest-hero .pq-hero-visual { display: none !important; }
.pq-hero-mobile-card { display: none !important; }
}
/* ≤359: 2 cards — logos clear of the bar; hard cutoff at the bar bottom */
@media (max-width: 359px) {
.prizequest-hero:has(.pq-hero-visual) {
overflow: hidden !important;
}
.pq-hero-mock--1,
.pq-hero-mock--2 { display: none !important; }
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block !important; }
.pq-hero-mock--4 {
left: calc(50% - 106px) !important;
right: auto !important;
bottom: -38px !important;
top: auto !important;
z-index: 1 !important;
}
.pq-hero-mock--3 {
left: calc(50% - 10px) !important;
right: auto !important;
bottom: -36px !important;
top: auto !important;
z-index: 2 !important;
}
}
/* 360–399: bar down + cards up so more blurb shows */
@media (max-width: 399px) and (min-width: 360px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 136px !important;
}
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block !important; }
.pq-hero-mock--4 {
left: calc(50% - 158px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 1 !important;
}
.pq-hero-mock--3 {
left: calc(50% - 78px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 2 !important;
}
.pq-hero-mock--2 {
left: calc(50% + 2px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 3 !important;
}
}
/* 400–449: same */
@media (max-width: 449px) and (min-width: 400px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 136px !important;
}
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block !important; }
.pq-hero-mock--4 {
left: calc(50% - 174px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 1 !important;
}
.pq-hero-mock--3 {
left: calc(50% - 78px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 2 !important;
}
.pq-hero-mock--2 {
left: calc(50% + 18px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 3 !important;
}
}
/* Homepage 3-card: 7 Days McLaren sits in the UKCC slot until 450 */
@media (max-width: 399px) and (min-width: 360px) {
body.prizequest-page.pq-home-page .pq-hero-mock--2 { display: none !important; }
body.prizequest-page.pq-home-page .pq-hero-mock--1 {
display: block !important;
left: calc(50% + 2px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 3 !important;
}
body.prizequest-page.pq-home-page .pq-hero-mock--1 .pq-hero-mock-rot {
transform: rotate(6deg);
}
}
@media (max-width: 449px) and (min-width: 400px) {
body.prizequest-page.pq-home-page .pq-hero-mock--2 { display: none !important; }
body.prizequest-page.pq-home-page .pq-hero-mock--1 {
display: block !important;
left: calc(50% + 18px) !important;
right: auto !important;
bottom: -16px !important;
top: auto !important;
z-index: 3 !important;
}
body.prizequest-page.pq-home-page .pq-hero-mock--1 .pq-hero-mock-rot {
transform: rotate(6deg);
}
}
@media (max-width: 599px) and (min-width: 450px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 152px !important;
}
.pq-hero-mock--1,
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block !important; }
.pq-hero-mock--1 {
left: calc(50% + 72px) !important;
right: auto !important;
bottom: -18px !important;
top: auto !important;
z-index: 4 !important;
}
.pq-hero-mock--2 {
left: calc(50% - 24px) !important;
right: auto !important;
bottom: -22px !important;
top: auto !important;
z-index: 3 !important;
}
.pq-hero-mock--3 {
left: calc(50% - 120px) !important;
right: auto !important;
bottom: -22px !important;
top: auto !important;
z-index: 2 !important;
}
.pq-hero-mock--4 {
left: calc(50% - 216px) !important;
right: auto !important;
bottom: -22px !important;
top: auto !important;
z-index: 1 !important;
}
}
/* 600–649: 2 cards on the far right of the metric bar; BOTB slightly up */
@media (min-width: 600px) and (max-width: 649px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 22px !important;
}
.prizequest-hero:has(.pq-hero-visual) .hero-title {
max-width: none !important;
}
.prizequest-hero .pq-hero-visual {
display: block !important;
top: auto !important;
bottom: 52px !important;
height: 168px !important;
left: 10px !important;
right: 8px !important;
overflow: visible !important;
clip-path: inset(-240px -120px 0 -48px) !important;
}
.pq-hero-mobile-card { display: block !important; }
.pq-hero-card { display: none !important; }
.pq-hero-mock,
.pq-hero-mock-rot { width: 140px; height: 178px; }
.pq-hero-mock--1,
.pq-hero-mock--4 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3 { display: block !important; position: absolute; }
.pq-hero-mock--3 {
left: auto !important;
right: 122px !important;
bottom: 0 !important;
top: auto !important;
z-index: 2 !important;
}
.pq-hero-mock--2 {
left: auto !important;
right: 26px !important;
bottom: -8px !important;
top: auto !important;
z-index: 3 !important;
}
body.prizequest-page.pq-home-page .pq-hero-mock--2 { display: none !important; }
body.prizequest-page.pq-home-page .pq-hero-mock--1 {
display: block !important;
left: auto !important;
right: 26px !important;
bottom: -8px !important;
top: auto !important;
z-index: 3 !important;
}
body.prizequest-page.pq-home-page .pq-hero-mock--1 .pq-hero-mock-rot {
transform: rotate(6deg);
}
}
/* 650–699: unchanged 3-card park */
@media (min-width: 650px) and (max-width: 699px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 14px !important;
}
.prizequest-hero:has(.pq-hero-visual) .hero-title {
max-width: none !important;
}
.prizequest-hero .pq-hero-visual {
display: block !important;
top: auto !important;
bottom: 70px !important;
height: 168px !important;
left: 10px !important;
right: 8px !important;
overflow: visible !important;
clip-path: inset(-240px -120px 0 -48px) !important;
}
.pq-hero-mobile-card { display: block !important; }
.pq-hero-card { display: none !important; }
.pq-hero-mock,
.pq-hero-mock-rot { width: 140px; height: 178px; }
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block !important; position: absolute; }
.pq-hero-mock--4 {
left: auto !important;
right: 194px !important;
bottom: -50px !important;
top: auto !important;
z-index: 1 !important;
}
.pq-hero-mock--3 {
left: auto !important;
right: 102px !important;
bottom: -48px !important;
top: auto !important;
z-index: 2 !important;
}
.pq-hero-mock--2 {
left: auto !important;
right: 10px !important;
bottom: -50px !important;
top: auto !important;
z-index: 3 !important;
}
}
/* 700–767: same 3-card fan, slightly further left */
@media (min-width: 700px) and (max-width: 767px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
margin-top: 14px !important;
}
.prizequest-hero:has(.pq-hero-visual) .hero-title {
max-width: none !important;
}
.prizequest-hero .pq-hero-visual {
display: block !important;
top: auto !important;
bottom: 70px !important;
height: 168px !important;
left: 10px !important;
right: 8px !important;
overflow: visible !important;
clip-path: inset(-240px -120px 0 -48px) !important;
}
.pq-hero-mobile-card { display: block !important; }
.pq-hero-card { display: none !important; }
.pq-hero-mock,
.pq-hero-mock-rot { width: 140px; height: 178px; }
.pq-hero-mock--1 { display: none !important; }
.pq-hero-mock--2,
.pq-hero-mock--3,
.pq-hero-mock--4 { display: block !important; position: absolute; }
.pq-hero-mock--4 {
left: auto !important;
right: 218px !important;
bottom: -50px !important;
top: auto !important;
z-index: 1 !important;
}
.pq-hero-mock--3 {
left: auto !important;
right: 126px !important;
bottom: -48px !important;
top: auto !important;
z-index: 2 !important;
}
.pq-hero-mock--2 {
left: auto !important;
right: 34px !important;
bottom: -50px !important;
top: auto !important;
z-index: 3 !important;
}
}
@media (min-width: 900px) {
.pq-hero-mock { height: 210px; }
.pq-hero-card { height: 210px; }
.pq-hero-mock--1 { bottom: -52px; }
.pq-hero-mock--2 { bottom: -44px; }
.pq-hero-mock--3 { bottom: -50px; }
.pq-hero-mock--4 { bottom: -46px; }
}
/* 900–1023: smidge up so 2-line title/blurb isn't cropped */
@media (min-width: 900px) and (max-width: 1023px) {
.pq-hero-mock--1 { bottom: -48px; }
.pq-hero-mock--2 { bottom: -40px; }
.pq-hero-mock--3 { bottom: -46px; }
.pq-hero-mock--4 { bottom: -42px; }
}
/* 1024–1199: 8px up so blurb isn't cropped; 1200+ stays on the bar */
@media (min-width: 1024px) and (max-width: 1199px) {
.pq-hero-mock--1 { bottom: -44px; }
.pq-hero-mock--2 { bottom: -36px; }
.pq-hero-mock--3 { bottom: -42px; }
.pq-hero-mock--4 { bottom: -38px; }
}
@media (min-width: 1200px) {
.pq-hero-mock { height: 236px; }
.pq-hero-card { height: 236px; }
}
.prizequest-logo-row { display: flex; align-items: center; gap: 0; margin-bottom: 0; }
.prizequest-logo-row,
.prizequest-hero .hero-title,
.prizequest-hero-subtext { position: relative; z-index: 7; }
.prizequest-trust-stats { position: relative; z-index: 4; }
.prizequest-logo-wordmark { font-size: 20px; font-weight: 600; color: #fff; }
.prizequest-logo-wordmark .quest { color: #ff5f00; }
.prizequest-logo-wordmark img { height: 50px; width: auto; display: block; }
.prizequest-hero .hero-title { margin: 0 0 6px !important; font-family: "Cabinet Grotesk", "Cabinet Grotesk Fallback", "MontserratPQ Fallback", MontserratPQ, sans-serif !important; font-size: 52px !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; color: #ffffff !important; max-width: 1100px; text-transform: none !important; min-height: calc(52px * 1.05 * 2); }
.pq-accent { color: #ff5f00; }
.prizequest-hero .hero-title .mobile-title { display: none; }
.prizequest-hero .hero-title .desktop-title { display: inline; }
.prizequest-hero-subtext {
margin-top: 4px !important;
margin-bottom: 12px !important;
font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif !important;
font-size: 20px !important;
color: #c0cdd8 !important;
line-height: 1.45 !important;
max-width: 680px !important;
font-weight: 700 !important;
min-height: calc(20px * 1.45 * 2);
height: auto !important;
max-height: calc(20px * 1.45 * 2);
overflow: hidden;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
body.prizequest-page .betquest-carousel-title {
font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif !important;
}
body.prizequest-page .betquest-carousel-title {
font-size: 1.125rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
body.prizequest-page .betquest-carousel-title .betquest-carousel-see-all {
font-size: 0.875rem !important;
font-weight: 600 !important;
}
/* Same one-line ticking timer as home.php — no bouncing as digits change. */
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments {
display: inline-block !important;
white-space: nowrap !important;
min-width: 10ch !important;
font-variant-numeric: tabular-nums;
}
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments span,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-d-wrap,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-h-wrap,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-m-wrap,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .timer-s-wrap {
display: inline !important;
min-width: 0 !important;
}
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .t-d,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .t-h,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .t-m,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .t-s10,
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments .t-s1 {
display: inline !important;
font-variant-numeric: tabular-nums;
}
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-days-mode .timer-s-wrap {
display: none !important;
}
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-seconds-mode .timer-d-wrap {
display: none !important;
}
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-no-hours .timer-h-wrap {
display: none !important;
}
body.prizequest-page .betquest-carousel-card .betquest-carousel-timer .timer-segments.timer-no-minutes .timer-m-wrap {
display: none !important;
}
@media (min-width: 768px) {
body.prizequest-page .betquest-carousel-title {
font-size: 1.25rem !important;
}
}
body.prizequest-page .prizequest-blurb,
body.prizequest-page .comp-box-blurb.prizequest-blurb {
font-weight: 700 !important;
}
.prizequest-hero .hero-title .pq-title-line2 {
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
}
.prizequest-faq-section {
max-width: 860px;
margin: 4rem auto 4.5rem;
padding: 0 1rem;
}
.prizequest-faq-layout {
display: block;
}
.prizequest-faq-intro {
margin: 0 0 0.45rem;
max-width: 36rem;
}
.prizequest-faq-eyebrow {
display: block;
margin: 0 0 0.35rem;
padding: 0;
border: 0;
background: none;
color: #ff5f00;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.2;
}
.prizequest-faq-heading {
margin: 0 0 0.4rem;
font-family: "Cabinet Grotesk", "Cabinet Grotesk Fallback", MontserratPQ, sans-serif;
color: #0f1923;
font-size: clamp(1.9rem, 3vw, 2.55rem);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1.05;
text-transform: none;
min-height: calc(1em * 1.05 * 2);
}
.prizequest-faq-lead {
margin: 0;
max-width: none;
color: #667788;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.55;
min-height: calc(1em * 1.55 * 2);
}
.prizequest-faq-list {
display: block;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #dbe3ee;
}
.prizequest-faq-item {
margin: 0;
background: transparent;
border: 0;
border-bottom: 1px solid #dbe3ee;
border-radius: 0;
border-left: 0;
overflow: hidden;
box-shadow: none;
transition: background 0.2s ease;
}
.prizequest-faq-item:hover {
background: rgba(15, 25, 35, 0.015);
border-color: #dbe3ee;
box-shadow: none;
transform: none;
}
.prizequest-faq-item.is-open {
background: transparent;
border-color: #dbe3ee;
box-shadow: none;
transform: none;
}
.prizequest-faq-trigger {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
margin: 0;
padding: 1.1rem 0.15rem 1.1rem 0;
border: 0;
background: transparent;
color: #0f1923;
font-family: inherit;
font-size: 1.12rem;
font-weight: 700;
letter-spacing: -0.02em;
text-align: left;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: color 0.18s ease;
}
.prizequest-faq-trigger:hover {
color: #ff5f00;
}
.prizequest-faq-item.is-open .prizequest-faq-trigger {
color: #0f1923;
padding-bottom: 0.7rem;
}
.prizequest-faq-trigger:focus-visible {
outline: 2px solid #ff5f00;
outline-offset: 4px;
border-radius: 4px;
}
.prizequest-faq-q {
flex: 1;
min-width: 0;
line-height: 1.35;
padding-right: 0.25rem;
}
.prizequest-faq-chevron {
flex-shrink: 0;
width: 1.35rem;
height: 1.35rem;
margin-top: 0.12rem;
border: 0;
border-radius: 0;
background: transparent;
color: #94a3b4;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s ease;
}
.prizequest-faq-chevron svg {
width: 16px;
height: 16px;
display: block;
}
.prizequest-faq-item:hover .prizequest-faq-chevron,
.prizequest-faq-item.is-open .prizequest-faq-chevron {
color: #ff5f00;
background: transparent;
border-color: transparent;
}
.prizequest-faq-item.is-open .prizequest-faq-chevron {
transform: rotate(180deg);
}
.prizequest-faq-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.prizequest-faq-item.is-open .prizequest-faq-panel {
grid-template-rows: 1fr;
}
.prizequest-faq-panel-inner {
overflow: hidden;
min-height: 0;
}
.prizequest-faq-a {
margin: 0;
max-width: 40rem;
padding: 0 2.5rem 1.45rem 0;
color: #5a6b7c;
font-size: 1rem;
font-weight: 500;
line-height: 1.65;
}
@media (max-width: 767px) {
.prizequest-faq-section {
margin: 2.75rem auto 3.25rem;
padding: 0 0.85rem;
}
.prizequest-faq-intro {
margin-bottom: 0.35rem;
}
.prizequest-faq-heading {
font-size: 1.75rem;
}
.prizequest-faq-lead {
font-size: 0.98rem;
}
.prizequest-faq-trigger {
gap: 1rem;
padding: 1.15rem 0;
font-size: 1.02rem;
}
.prizequest-faq-item.is-open .prizequest-faq-trigger {
padding-bottom: 0.55rem;
}
.prizequest-faq-a {
padding: 0 0 1.2rem;
font-size: 0.95rem;
}
}
.prizequest-trust-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #243442; border-radius: 10px; overflow: hidden; min-height: 128px; width: 100%; max-width: 100%; box-sizing: border-box; }
.prizequest-stat { background: #1a2733; padding: 26px 20px; text-align: center; min-width: 0; min-height: 128px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0; }
.prizequest-trust-stats .prizequest-stat:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.prizequest-trust-stats .prizequest-stat:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
/* Straw rule: Cash Alts / Available is a metric-bar cell like Live Now and
Physical — same .prizequest-stat-main / .prizequest-stat-sub sizes at every
breakpoint. Never add a font-size override for --cash-alts-available. */
.prizequest-stat--grabs { display: flex; padding: 26px 12px; }
.prizequest-stat--free-banner .prizequest-stat-main,
.prizequest-stat--home-pound .prizequest-stat-main {
font-size: clamp(1.15rem, 2.4vw, 2.15rem);
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
line-height: 1.12;
letter-spacing: -0.02em;
}
.prizequest-stat-main { font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif; font-size: 54px; font-weight: 900; letter-spacing: -0.03em; color: #ff5f00; line-height: 1; margin: 0 0 6px; white-space: nowrap; min-height: 54px; font-variant-numeric: tabular-nums; }
.prizequest-stat-main.live-state { font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif; font-weight: 900; color: #ff5f00; display: block; }
.prizequest-stat-main.live-state.is-sleeping { color: #ff5f00; }
.prizequest-stat-main.live-state.is-offline { color: #ff5f00; }
#prizequest-live-state .pq-live-state-mob { display: none !important; }
#prizequest-live-state .pq-live-state-desk { display: inline !important; }
@media (max-width: 900px) {
#prizequest-live-state .pq-live-state-desk { display: none !important; }
#prizequest-live-state .pq-live-state-mob { display: inline !important; }
}
.prizequest-stat-sub {
font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
font-size: 16px;
color: #c0cdd8;
line-height: 1.2;
margin: 0;
font-weight: 700;
min-height: calc(16px * 1.2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
min-width: 7.5ch;
display: inline-block;
text-align: left;
}
.prizequest-stat-sub .pq-stat-sub-short { display: none; }
.prizequest-stat-sub .pq-stat-sub-long { display: inline; }
.prizequest-stat--grabs .pq-grabs-mob { display: none; }
.prizequest-stat--grabs .pq-grabs-desk { display: inline; }
.prizequest-favourites-head {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
max-width: 1248px;
margin: 0 auto 0.65rem;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.prizequest-favourites-title {
margin: 0 !important;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.05rem;
font-weight: 800;
color: #1a3347;
letter-spacing: -0.02em;
line-height: 1.2;
}
.prizequest-clear-saved-btn {
flex: 0 0 auto;
white-space: nowrap;
border: 1px solid var(--pq-edge);
background: var(--pq-surface);
color: var(--pq-ink);
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: var(--pq-elev);
}
/* Saved view = main-grid filter; keep Clear All reachable without page jump */
.prizequest-favourites-section.pq-saved-toolbar {
position: fixed;
left: 50%;
bottom: max(1rem, env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 1000010;
width: auto;
max-width: calc(100vw - 2rem);
margin: 0;
padding: 0.55rem 0.75rem;
background: #ffffff;
border: 1px solid #e3eaf5;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(7, 19, 30, 0.18);
}
.prizequest-favourites-section.pq-saved-toolbar .prizequest-favourites-grid {
display: none !important;
}
.prizequest-favourites-section.pq-saved-toolbar .prizequest-favourites-head {
margin: 0;
gap: 0.75rem;
}
.prizequest-favourites-section.pq-saved-toolbar .prizequest-favourites-title {
font-size: 0.92rem;
}
.prizequest-clear-saved-btn:hover { background: var(--pq-surface-hover); }
.prizequest-filters { position: sticky; top: 0; z-index: 90; max-width: 1272px; margin: 0 auto; padding: 0.15rem 0.6rem 0; background: transparent; }
.prizequest-filter-card { background: #ffffff; border: 1px solid #e3eaf5; border-radius: 12px; box-shadow: 0 4px 16px rgba(9, 25, 44, 0.06); padding: 0.55rem 0.65rem 0.6rem; min-height: 72px; box-sizing: border-box; }
/* 2×2: col1 = CATEGORY + SORT, col2 = BUDGET + MORE (same vertical line as budget) */
.prizequest-filter-grid {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.72rem;
}
.prizequest-filter-cell {
min-width: 0;
}
.prizequest-filter-cell--category {
width: 100%;
max-width: 100%;
align-self: stretch;
}
.prizequest-filter-cell--category .prizequest-filter-line {
width: 100%;
max-width: 100%;
min-width: 0;
}
.prizequest-v-divider { display: none; }
.prizequest-filter-line { display: flex; flex-direction: column; align-items: flex-start; gap: 0.32rem; margin-bottom: 0; }
.prizequest-filter-section-label {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
color: #213d53;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.04em;
white-space: nowrap;
flex-shrink: 0;
padding-top: 0;
text-transform: uppercase !important;
}
.prizequest-filters .prizequest-filter-section-label::before {
content: '';
display: block;
width: 3px;
height: 12px;
background: #ff6b00;
border-radius: 2px;
flex-shrink: 0;
}
.prizequest-filter-row { display: flex; gap: 0.42rem; margin-bottom: 0; overflow: visible; flex-wrap: wrap; padding-bottom: 0; min-width: 0; flex: 1; }
.prizequest-filters .prizequest-chip { padding: 0.42rem 0.72rem; font-size: 0.88rem; }
.prizequest-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid #d4dde8;
border-radius: 999px;
background: #f6f9fd;
color: #123246;
padding: 0.5rem 0.82rem;
font-size: 0.94rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
box-shadow: var(--pq-elev);
transition: background 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.pq-chip-icon-slot {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: visible;
}
.pq-chip-icon {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
.prizequest-page .prizequest-prize-calculator .pq-prize-calc-icon {
width: 1.65em;
height: 1.65em;
min-width: 1.65em;
min-height: 1.65em;
}
.pq-chip-label {
line-height: 1.15;
}
.prizequest-chip:hover:not(.active):not(:disabled):not(.is-unavailable) {
background: var(--pq-surface-hover);
box-shadow: var(--pq-elev-hover);
}
.prizequest-chip.active {
background: #ff5f00;
color: #fff;
border-color: #ff5f00;
box-shadow: 0 1px 3px rgba(255, 95, 0, 0.35);
}
#cash-alt-only.active { background: #ff5f00; color: #fff; border-color: #ff5f00; }
.prizequest-custom-wrap { display: inline-flex; align-items: center; border: 1px solid #d4dde8; border-radius: 10px; background: #f6f9fd; color: #123246; min-width: 150px; max-width: 186px; padding: 0.42rem 0.62rem 0.42rem 0.58rem; box-sizing: border-box; }
.prizequest-custom-prefix { font-size: 0.94rem; font-weight: 800; color: #092f44; margin-right: 0.24rem; flex-shrink: 0; line-height: 1; display: flex; align-items: center; height: 1.2em; }
.prizequest-custom { border: 0; outline: 0; background: transparent; width: 100%; padding: 0; margin: 0; font-size: 0.94rem; font-weight: 800; line-height: 1; height: 1.2em; color: #123246; min-width: 0; box-sizing: border-box; }
.prizequest-custom::placeholder { color: #9aa9b7; font-weight: 700; }
/* Category chips: always wrapped, no show-more behavior */
.prizequest-type-filters-wrap {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.12rem;
width: 100%;
min-width: 0;
}
.prizequest-type-subfilters {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-top: 0.35rem;
width: 100%;
padding-top: 0.15rem;
}
.prizequest-subfilter-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.38rem;
width: 100%;
}
.prizequest-subfilter-group[hidden],
#tax-free-cash-tree[hidden],
#house-prize-tree[hidden] {
display: none !important;
}
.prizequest-type-subfilters:not(:has(.prizequest-subfilter-group:not([hidden]))) {
display: none;
}
@media (min-width: 768px) {
.prizequest-subfilter-group {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.4rem;
}
.prizequest-subfilter-options {
display: inline-flex;
flex-wrap: wrap;
width: auto;
flex: 0 1 auto;
}
}
.prizequest-subfilter-options {
display: flex;
flex-wrap: wrap;
gap: 0.32rem;
width: 100%;
}
.prizequest-filter-sub-label {
margin: 0;
padding: 0;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #587188;
white-space: nowrap;
flex-shrink: 0;
}
.prizequest-filters #tax-free-cash-tree .prizequest-chip,
.prizequest-filters #house-prize-tree .prizequest-chip {
padding: 0.34rem 0.62rem !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
box-shadow: 0 1px 2px rgba(15, 25, 35, 0.05) !important;
}
#type-filters {
width: 100%;
min-width: 0;
}
.prizequest-type-filters-wrap .prizequest-filter-row--categories-primary,
.prizequest-type-filters-wrap .prizequest-filter-row--categories-extra {
gap: 0.38rem 0.42rem;
}
#type-filters-primary {
width: 100%;
max-width: 100%;
min-width: 0;
}
.prizequest-category-chip-rows {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
gap: 0.28rem;
width: 100%;
min-width: 0;
}
.prizequest-category-chip-rows > .prizequest-filter-row {
width: 100%;
max-width: 100%;
min-width: 0;
justify-content: flex-start;
}
.prizequest-category-chip-rows > .prizequest-chip,
.prizequest-category-chip-rows > .prizequest-filter-row > .prizequest-chip {
flex: 0 0 auto !important;
flex-grow: 0 !important;
width: auto !important;
max-width: 100%;
align-self: flex-start;
justify-content: flex-start;
}
.prizequest-filter-row--categories-compact {
flex-wrap: nowrap !important;
gap: 0.28rem !important;
}
.prizequest-filter-row--categories-compact .prizequest-chip {
padding: 0.34rem 0.5rem !important;
font-size: 0.76rem !important;
gap: 0.32rem !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0;
align-self: flex-start;
}
.prizequest-filter-row--categories-compact .pq-chip-icon-slot,
.prizequest-filter-row--categories-compact .pq-chip-icon {
width: 20px;
height: 20px;
}
.prizequest-filter-row--categories-compact .pq-chip-label {
white-space: nowrap;
}
@media (max-width: 767px) {
.prizequest-filter-row--categories-compact {
flex-wrap: wrap !important;
}
}
.prizequest-min-prize-wrap {
display: inline-flex;
align-items: center;
gap: 0.22rem;
border: 1px solid #d4dde8;
border-radius: 10px;
background: #f6f9fd;
box-sizing: border-box;
padding: 0 0.62rem;
min-height: 44px;
height: 44px;
flex: 0 0 auto;
width: 100%;
max-width: none;
min-width: 0;
}
.prizequest-min-prize-label {
flex-shrink: 0;
margin: 0;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.2;
color: #123246;
}
#prizequest-min-prize {
border: 0;
outline: 0;
background: transparent;
flex: 1 1 auto;
width: 12ch;
min-width: 8ch;
max-width: none;
padding: 0;
font-size: 0.88rem;
font-weight: 700;
line-height: 1.2;
color: #123246;
font-variant-numeric: tabular-nums;
}
#prizequest-min-prize::placeholder { color: #9aa9b7; font-weight: 700; }
.prizequest-options-row { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; margin: 0; }
.prizequest-sort-prize-price-pair {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.45rem;
}
.prizequest-filter-label { color: #526a7f; font-size: 0.78rem; font-weight: 700; }
.prizequest-site-dropdown { position: relative; flex: 0 0 auto; min-width: 0; }
/* Same pill look as .prizequest-chip; extra class on the button for parity with Next 24h / Cash Alt / Favourites */
.prizequest-site-trigger.prizequest-chip {
width: auto;
max-width: 220px;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
text-align: left;
position: relative;
padding-right: 1.85rem;
overflow: hidden;
text-overflow: ellipsis;
}
.prizequest-site-trigger.prizequest-chip::after { content: '▾'; position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); color: #7f8ea0; font-size: 11px; pointer-events: none; }
.prizequest-site-trigger.prizequest-chip.active {
background: #ff5f00;
color: #fff;
border-color: #ff5f00;
}
.prizequest-site-trigger.prizequest-chip.active::after { color: rgba(255, 255, 255, 0.9); }
.prizequest-site-option.is-disabled,
.prizequest-site-option:disabled {
opacity: 0.45;
cursor: default;
color: #8a97a8;
background: #f3f5f8;
}
.prizequest-site-option.is-disabled.active,
.prizequest-site-option.active:disabled {
opacity: 0.55;
border-color: #c5ced9;
background: #eef1f5;
}
.prizequest-site-menu { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; min-width: 280px; max-height: 300px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 10px; border: 0.5px solid #ddd; z-index: 120; box-shadow: 0 12px 32px rgba(19, 37, 56, 0.2); }
.prizequest-site-menu[hidden] { display: none !important; }
.prizequest-site-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 0.5px solid #f0f0f0; position: sticky; top: 0; background: #fff; z-index: 2; }
.prizequest-site-menu-title { font-size: 10px; color: #5f7083; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.prizequest-site-menu-clear { font-size: 10px; color: #ff5f00; font-weight: 700; cursor: pointer; }
.prizequest-site-option { width: 100%; border: 0; background: #fff; text-align: left; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 0.5px solid #f0f0f0; cursor: pointer; }
.prizequest-site-check { width: 14px; height: 14px; border-radius: 3px; border: 0.5px solid #ccc; position: relative; flex-shrink: 0; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.prizequest-site-option.active .prizequest-site-check { background: #ff5f00; border-color: #ff5f00; }
.prizequest-site-option.active .prizequest-site-check::after {
content: '';
position: static;
display: block;
width: 11px;
height: 11px;
transform: none;
margin: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
}
.prizequest-site-name { font-size: 12px; color: #243f56; font-weight: 700; }
.prizequest-meta-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
width: 100%;
box-sizing: border-box;
border-top: 0.5px solid var(--color-border-tertiary, #e3eaf5);
margin-top: 8px;
padding: 8px 0 9px;
--pq-match-font-size: 15px;
}
.prizequest-meta-left {
display: flex;
align-items: center;
flex-shrink: 0;
min-width: 0;
}
.prizequest-meta-disclaimer {
margin: 0;
padding: 0;
text-align: right;
font-weight: 700;
color: #5f7083;
white-space: normal;
flex: 1 1 auto;
min-width: 0;
font-size: calc(var(--pq-match-font-size) * 2 / 3);
line-height: 1.25;
}
.prizequest-meta-disclaimer-short {
display: none;
}
@media (max-width: 474px) {
.prizequest-meta-disclaimer-full {
display: none;
}
.prizequest-meta-disclaimer-short {
display: inline;
}
}
.prizequest-chip,
.prizequest-site-trigger,
.prizequest-site-option,
.prizequest-site-menu-clear,
#cash-alt-only,
.prizequest-btn-filters,
.prizequest-btn-saved,
.prizequest-panel-btn {
-webkit-tap-highlight-color: transparent;
}
.prizequest-chip:focus,
.prizequest-chip:focus-visible,
.prizequest-site-trigger:focus,
.prizequest-site-trigger:focus-visible,
.prizequest-site-option:focus,
.prizequest-site-option:focus-visible,
.prizequest-site-menu-clear:focus,
.prizequest-site-menu-clear:focus-visible,
#cash-alt-only:focus,
#cash-alt-only:focus-visible,
.prizequest-btn-filters:focus,
.prizequest-btn-filters:focus-visible,
.prizequest-btn-saved:focus,
.prizequest-btn-saved:focus-visible,
.prizequest-panel-btn:focus,
.prizequest-panel-btn:focus-visible,
#prizequest-min-prize:focus,
#prizequest-min-prize:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.prizequest-match-count { margin: 0; color: #182f43; font-size: var(--pq-match-font-size); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 0; line-height: 1.25; flex-shrink: 0; }
.prizequest-match-count::before { display: none; }
/* Sort pills: fully rounded in filter panel (see drawer block below) */
.prizequest-results-summary { display: none; }
.prizequest-grid-wrap { max-width: 1248px; margin: 0.72rem auto 0; }
.prizequest-load-more-wrap { display: none !important; }
.prizequest-empty-state {
max-width: 1248px;
margin: 1.35rem auto 0.35rem;
padding: 0.35rem var(--spacing-md) 0.35rem;
text-align: center;
background: none;
border: none;
box-shadow: none;
}
.prizequest-empty-state[hidden] { display: none !important; }
.prizequest-empty-title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 800;
color: #123246;
letter-spacing: -0.01em;
}
.prizequest-empty-copy {
margin: 0 auto 0.65rem;
max-width: 26rem;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.45;
color: #5f7083;
}
.prizequest-empty-actions {
margin: 0;
font-size: 0.88rem;
font-weight: 700;
color: #5f7083;
}
.prizequest-empty-link-btn {
border: 0;
background: none;
padding: 0;
margin: 0;
font: inherit;
font-weight: 700;
color: #ff5f00;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.prizequest-empty-link-btn:hover {
color: #e85600;
}
.prizequest-empty-sep {
margin: 0 0.35rem;
color: #9aa9b7;
}
/* Do NOT use content-visibility on cards — on iOS Safari it unpaints
off-screen boxes and leaves blank white gaps during real-device fling. */
#prizequest-grid { min-height: 420px; }
#prizequest-grid-spacer {
grid-column: 1 / -1;
width: 100%;
pointer-events: none;
visibility: hidden;
}
#prizequest-grid:empty { min-height: 0; }
body:has(#prizequest-empty-state:not([hidden])) #prizequest-grid {
min-height: 0;
}
.prizequest-favourites-section { max-width: 1248px; margin: 0.4rem auto 1.5rem; }
.prizequest-favourites-grid { max-width: 1248px; margin-left: auto; margin-right: auto; }
/* Card internals live only in competition-box.css. */
.prizequest-page .comp-box-grid,
.prizequest-favourites-grid {
align-items: stretch;
}
.pq-gameshow-badge {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0;
border-radius: 999px;
padding: 0.18rem 0.42rem;
line-height: 1;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #3d2a5c;
background: #e8dff5;
border: 1px solid #9b7bc4;
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
text-align: center;
white-space: nowrap;
}
.pq-gameshow-badge .pq-gs-line2 { display: none !important; }
.pq-gameshow-badge .pq-gs-mob { display: none; }
.pq-checked-prefix { display: inline; }
.pq-mystery-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
border-radius: 999px;
padding: 0.18rem 0.42rem;
line-height: 1;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #3d2a5c;
background: #f3e8d4;
border: 1px solid #c4a574;
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
text-align: center;
white-space: nowrap;
pointer-events: auto;
cursor: help;
}
.pq-card-image-meta .pq-gameshow-badge,
.pq-card-image-meta .pq-iw-source-badge,
.pq-card-image-meta .pq-mystery-badge {
pointer-events: auto;
}
.prizequest-blurb,
.comp-blurb {
margin-bottom: 0;
font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
font-size: 0.8rem;
color: #092f44;
font-weight: 700;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
min-height: 4.5em;
max-height: 4.5em;
line-height: 1.5;
flex-grow: 0;
flex-shrink: 0;
}
@media (min-width: 768px) {
.prizequest-blurb,
.comp-blurb { font-size: 1rem; }
}
.prizequest-last-checked { position: absolute; left: 6px; top: 6px; font-size: 0.58rem; background: rgba(248, 251, 255, 0.94); color: #62778c; border: 1px solid rgba(180, 196, 212, 0.9); border-radius: 999px; padding: 0.18rem 0.42rem; line-height: 1; z-index: 2; font-weight: 700; display: inline-block; min-width: 10ch; font-variant-numeric: tabular-nums; }
.pq-card-image-meta {
position: absolute;
left: 6px;
top: 6px;
z-index: 2;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.28rem;
max-width: calc(100% - 48px);
pointer-events: none;
}
.pq-card-image-meta .prizequest-last-checked {
position: static;
left: auto;
top: auto;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
min-width: 0;
max-width: none;
flex-shrink: 0;
}
.pq-iw-source-badge--on-image {
margin: 0;
border-radius: 999px;
padding: 0.18rem 0.42rem;
line-height: 1;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #0b3d1f;
background: #c8f0d4;
border: 1px solid #6fbf84;
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
display: inline-block;
}
@media (max-width: 767px) {
.pq-card-image-meta {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
max-width: calc(100% - 40px);
gap: 0.22rem;
}
.pq-checked-prefix { display: none !important; }
.pq-gameshow-badge .pq-gs-desk { display: none !important; }
.pq-gameshow-badge .pq-gs-mob { display: inline !important; }
.pq-card-image-meta .prizequest-last-checked,
.pq-iw-source-badge--on-image,
.pq-gameshow-badge {
flex-shrink: 0;
}
}
.prizequest-watch-btn {
position: absolute;
top: 6px;
right: 6px;
width: 32px;
height: 32px;
padding: 0;
border-radius: 999px;
border: 0;
display: grid;
place-items: center;
line-height: 0;
background: rgba(0,0,0,0.72);
color: #fff;
cursor: pointer;
z-index: 2;
}
@media (hover: hover) {
.prizequest-watch-btn { opacity: 0; pointer-events: none; }
.comp-box:hover .prizequest-watch-btn,
.prizequest-watch-btn.saved,
.prizequest-watch-btn:focus { opacity: 1; pointer-events: auto; }
}
.prizequest-watch-btn.saved { background: #ff5f00; color: #ffffff; }
.prizequest-watch-btn .heart {
width: 16px;
height: 16px;
display: block;
line-height: 0;
margin: 0;
padding: 0;
}
.prizequest-watch-btn .heart-svg {
width: 16px;
height: 16px;
display: block;
margin: 0;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transform: none;
}
.prizequest-watch-btn.saved .heart-svg {
fill: currentColor;
stroke: currentColor;
}
.pq-info-icon,
.pq-icon.pq-info-icon {
display: block;
width: 12px;
height: 12px;
min-width: 12px;
min-height: 12px;
flex-shrink: 0;
overflow: visible;
vertical-align: 0;
line-height: 0;
}
.prizequest-cash-alt-value { text-align: center; font-size: 0.76rem; color: #425e72 !important; margin-top: 0; margin-bottom: 0; font-weight: 700; line-height: 1.25; min-height: 3.75em; max-height: 3.75em; white-space: normal; overflow: hidden; }
.prizequest-cash-alt .pq-biggest-line1,
.prizequest-cash-alt .pq-biggest-label {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
color: #425e72 !important;
font-weight: 700;
}
.prizequest-cash-alt .pq-biggest-line2,
.prizequest-cash-alt .pq-biggest-prize {
display: inline;
width: auto;
overflow: visible;
text-overflow: unset;
white-space: normal;
line-height: 1.2;
color: #425e72 !important;
font-weight: 700;
}
.prizequest-page .comp-box a:not(.comp-box-button),
.prizequest-page .comp-box a:not(.comp-box-button):hover,
.prizequest-page .comp-box a:not(.comp-box-button):focus,
.prizequest-page .comp-box a:not(.comp-box-button):visited,
.prizequest-favourites-grid .comp-box a:not(.comp-box-button),
.prizequest-favourites-grid .comp-box a:not(.comp-box-button):hover,
.prizequest-favourites-grid .comp-box a:not(.comp-box-button):focus,
.prizequest-favourites-grid .comp-box a:not(.comp-box-button):visited {
text-decoration: none !important;
color: inherit !important;
}
.prizequest-page .comp-box .comp-box-blurb,
.prizequest-page .comp-box .prizequest-blurb,
.prizequest-favourites-grid .comp-box .comp-box-blurb,
.prizequest-favourites-grid .comp-box .prizequest-blurb {
color: #092f44 !important;
text-decoration: none !important;
}
/* UKCC hero art: stronger upward nudge to keep lower copy visible */
.prizequest-page .comp-box[data-site-slug="ukcc"] .comp-box-image {
overflow: hidden;
}
.prizequest-page .comp-box[data-site-slug="ukcc"] .comp-box-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
}
@media (hover: hover) {
.prizequest-page .comp-box {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.prizequest-page .comp-box:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(12, 34, 56, 0.18), 0 2px 8px rgba(12, 34, 56, 0.1);
}
}
.prizequest-hero-disclaimer {
display: none;
}
@media (max-width: 767px) {
/* Calculator fights the chip rail on phones — desktop only */
.prizequest-page .prizequest-prize-calculator {
display: none !important;
}
/* Compact hero: title close to chips, no forced empty air.
Must clear the desktop pq-scoped-page height:380px lock. */
.prizequest-hero,
body.prizequest-page.pq-scoped-page .prizequest-hero,
body.prizequest-page .prizequest-hero:has(.pq-hero-visual) {
padding: 14px var(--spacing-md) 10px;
margin-top: 0;
margin-bottom: 0.25rem;
border-radius: 0;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
overflow: hidden;
isolation: isolate;
min-height: 0;
height: auto;
}
.pq-hero-orb {
top: -18%;
right: -18%;
width: 85%;
filter: blur(20px);
}
.prizequest-hero-inner { padding: 0; }
.prizequest-logo-wordmark { font-size: 16px; font-weight: 600; }
.prizequest-logo-wordmark img { height: 50px; }
.prizequest-hero .hero-title {
font-size: 26px !important;
line-height: 1.06 !important;
letter-spacing: -0.025em !important;
margin: 0 0 12px !important;
font-weight: 900 !important;
min-height: calc(26px * 1.06 * 2) !important;
}
.prizequest-hero .hero-title .mobile-title { display: inline; }
.prizequest-hero .hero-title .desktop-title { display: none; }
/* Truncated one-line subtitles look broken — hide on mobile */
.prizequest-hero-subtext { display: none !important; }
/* House hero (≥600px phones): subtitle returns beside the 3-card fan */
@media (min-width: 600px) {
.prizequest-hero:has(.pq-hero-visual) .prizequest-hero-subtext {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 14px !important;
line-height: 1.35 !important;
margin: 4px 0 10px !important;
max-width: 46% !important;
height: auto !important;
min-height: calc(14px * 1.35 * 2) !important;
max-height: calc(14px * 1.35 * 2) !important;
white-space: normal !important;
overflow: hidden;
}
}
.prizequest-trust-stats {
min-height: 0;
border-radius: 10px;
}
.prizequest-stat {
min-height: 0;
padding: 10px 6px;
}
.prizequest-stat-main {
font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
font-size: 24px;
font-weight: 900;
min-height: 24px;
margin: 0 0 4px;
}
.prizequest-stat-sub {
font-family: MontserratPQ, "MontserratPQ Fallback", Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
font-size: clamp(9.5px, 2.7vw, 11px);
font-weight: 700;
min-height: calc(11px * 1.2);
letter-spacing: -0.04em;
max-width: 100%;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
min-width: 0;
display: block;
text-align: center;
}
.prizequest-stat-sub .pq-stat-sub-long { display: none; }
.prizequest-stat-sub .pq-stat-sub-short { display: inline; }
#prizequest-live-updated .pq-stat-sub-long { display: inline; }
#prizequest-live-updated .pq-stat-sub-short { display: none; }
.prizequest-cash-alt .pq-cash-alt-desk { display: none !important; }
.prizequest-cash-alt .pq-cash-alt-mob { display: inline !important; }
.prizequest-cash-alt-value {
white-space: normal;
overflow: hidden;
max-width: 100%;
}
.prizequest-stat--grabs .pq-grabs-desk { display: none; }
.prizequest-stat--grabs .pq-grabs-mob { display: inline; }
.prizequest-stat--free-banner .prizequest-stat-main,
.prizequest-stat--home-pound .prizequest-stat-main {
font-size: 18px;
min-height: 0;
line-height: 1.1;
white-space: nowrap;
}
.prizequest-stat--grabs .prizequest-stat-sub {
max-width: 100%;
}
.prizequest-filters { padding-top: 0.5rem; }
.prizequest-filter-card { border-radius: 10px; padding: 10px 10px 2px; }
.prizequest-v-divider { display: none; }
.prizequest-filter-cell--category .prizequest-filter-line {
padding-bottom: 0.35rem;
}
.prizequest-filter-line {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem !important;
margin-bottom: 0 !important;
}
.prizequest-filter-section-label {
margin: 0 !important;
padding: 0 !important;
color: #213d53 !important;
font-size: var(--pq-type-label, 0.8125rem) !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
.prizequest-filter-row { width: 100%; overflow: visible; flex-wrap: wrap; gap: 6px; padding-bottom: 0; }
.prizequest-chip { padding: 4px 8px; border-radius: 999px; font-size: 11px; border: 1px solid #d4dde8; background: #f6f9fd; color: #123246; font-weight: 700; }
.prizequest-filter-section-label { font-size: 0.68rem !important; }
.prizequest-min-prize-wrap { min-height: 36px; height: 36px; }
.prizequest-sort-trigger { padding: 6px 8px; font-size: 12px; }
.prizequest-chip.active { background: #ff5f00; color: #fff; border-color: #ff5f00; }
.prizequest-custom-wrap { min-width: 130px; max-width: 170px; border: 1px solid #d4dde8; background: #f6f9fd; }
/* Hero/legacy budget fields only — filter drawer overrides below */
.prizequest-hero .prizequest-custom-prefix,
.prizequest-hero .prizequest-custom { font-size: 16px; }
.prizequest-hero .prizequest-custom { font-size: 16px !important; }
.prizequest-min-prize-label { font-size: 13px; }
#prizequest-min-prize { font-size: 16px !important; width: 10ch; min-width: 9ch; max-width: 11rem; font-variant-numeric: tabular-nums; }
.prizequest-filters #prizequest-min-prize,
.prizequest-filters .prizequest-custom,
.prizequest-filters .prizequest-custom-prefix {
font-size: 16px !important;
line-height: 1.25 !important;
}
#sort-options.prizequest-options-row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
#sort-options .prizequest-chip,
#sort-options .prizequest-sort-pill { border-radius: 50px !important; }
.prizequest-site-actions { width: 100%; display: flex; gap: 10px; flex-wrap: wrap; }
.prizequest-site-dropdown { flex: 0 0 auto; max-width: 100%; width: 100%; min-width: 0; }
.prizequest-site-trigger.prizequest-chip { width: 100%; max-width: none; min-width: 0; font-size: 12px; }
.prizequest-site-menu { width: 100%; max-height: 260px; }
.prizequest-site-name { font-size: 12px; }
.prizequest-meta-row {
padding: 7px 0 8px;
margin-top: 6px;
gap: 6px 8px;
border-top: 0.5px solid var(--color-border-tertiary, #e3eaf5);
--pq-match-font-size: 12px;
}
.prizequest-match-count { font-weight: 700; white-space: nowrap; line-height: 1.15; }
.prizequest-meta-disclaimer { line-height: 1.15; white-space: normal; text-align: right; }
.prizequest-favourites-section { margin: 0.35rem auto 1.2rem; padding: 0 0.5rem; }
.prizequest-favourites-head {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.prizequest-favourites-title { font-size: 0.92rem; }
.prizequest-favourites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
/* Titles: long names wrap inside the canonical card copy slot. */
.prizequest-page .comp-box-blurb.prizequest-blurb,
.prizequest-page .prizequest-blurb,
.prizequest-page .comp-blurb {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100%;
font-size: 0.86rem !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: manual;
}
/* Empty copy sits under filters / saved — nudged down a bit on all sizes */
.prizequest-page .prizequest-empty-state {
margin: 1.1rem auto 0.25rem;
padding: 0.25rem var(--spacing-md) 0.3rem;
}
.prizequest-page .prizequest-grid-wrap {
min-height: 0;
}
.prizequest-page.pq-free-page .main-content {
display: flex;
flex-direction: column;
}
.prizequest-page.pq-free-page .bq-carousel-stack {
margin-top: 0.5rem;
}
}
@media (max-width: 649px) {
.prizequest-hero {
padding-bottom: 8px;
padding-top: 12px;
}
.prizequest-hero-inner {
display: flex;
flex-direction: column;
}
}
/* Provider line in the hero below the metric bar through 767 */
@media (max-width: 767px) {
.prizequest-hero-inner {
display: flex;
flex-direction: column;
}
.prizequest-hero .prizequest-hero-disclaimer {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 4px 0 2px;
padding: 0;
position: relative;
z-index: 9;
font-size: 12px !important;
font-weight: 600 !important;
font-style: normal !important;
color: #9eb0c0 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: center;
}
.prizequest-hero .prizequest-hero-disclaimer span {
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
}
.prizequest-hero .prizequest-hero-disclaimer i,
.prizequest-hero .prizequest-hero-disclaimer .pq-icon {
font-size: 12px !important;
width: 12px;
height: 12px;
line-height: 1;
flex-shrink: 0;
opacity: 0.9;
}
.prizequest-filter-launcher .prizequest-filter-disclaimer {
display: none !important;
}
}
@media (min-width: 768px) {
.prizequest-hero-disclaimer {
display: none !important;
}
}
.prizequest-filter-disclaimer .pq-filter-disc-compact { display: none; }
.prizequest-filter-disclaimer .pq-filter-disc-short { display: none; }
.prizequest-filter-disclaimer .pq-filter-disc-full { display: inline; }
@media (min-width: 768px) and (max-width: 809px) {
.prizequest-filter-disclaimer .pq-filter-disc-compact { display: inline; }
.prizequest-filter-disclaimer .pq-filter-disc-short,
.prizequest-filter-disclaimer .pq-filter-disc-full { display: none; }
}
@media (min-width: 810px) and (max-width: 929px) {
.prizequest-filter-disclaimer .pq-filter-disc-short { display: inline; }
.prizequest-filter-disclaimer .pq-filter-disc-compact,
.prizequest-filter-disclaimer .pq-filter-disc-full { display: none; }
}
/* 450–767: site picker + Cash alt + Favourites on one row */
@media (min-width: 450px) and (max-width: 767px) {
.prizequest-site-actions {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.prizequest-site-dropdown {
flex: 0 0 auto;
width: 100%;
min-width: 0;
}
.prizequest-site-actions #cash-alt-only {
flex: 0 0 auto;
}
}
@media (min-width: 768px) {
.prizequest-filter-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 12px;
row-gap: 8px;
align-items: start;
}
.prizequest-filter-cell--budget,
.prizequest-filter-cell--more {
padding-left: 14px;
border-left: 1px solid #e3eaf5;
}
.prizequest-site-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; row-gap: 6px; }
.prizequest-site-actions .prizequest-site-dropdown { flex: 0 0 auto; min-width: 0; }
.prizequest-site-actions #cash-alt-only { flex: 0 0 auto; white-space: nowrap; }
.prizequest-site-menu { max-height: 300px; overflow: auto; }
#sort-options.prizequest-options-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
/* 3-up: one outer track matches .prizequest-filters; grids are full width inside */
@media (min-width: 768px) and (max-width: 1199px) {
.prizequest-grid-wrap {
max-width: min(1272px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--spacing-md) !important;
padding-right: var(--spacing-md) !important;
box-sizing: border-box !important;
}
.prizequest-grid-wrap .grid-row-wrapper {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.prizequest-favourites-section {
max-width: min(1272px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--spacing-md) !important;
padding-right: var(--spacing-md) !important;
box-sizing: border-box !important;
}
.prizequest-page .comp-box-grid,
.prizequest-favourites-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
justify-content: stretch !important;
gap: 1rem !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.prizequest-page .comp-box-grid .comp-box,
.prizequest-favourites-grid .comp-box {
max-width: none !important;
width: 100% !important;
}
.prizequest-page .comp-box .comp-box-image {
min-height: clamp(140px, 18vw, 200px) !important;
}
.prizequest-filters {
max-width: min(1272px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--spacing-md) !important;
padding-right: var(--spacing-md) !important;
box-sizing: border-box !important;
}
}
@media (min-width: 1200px) {
.prizequest-page .comp-box-grid {
grid-template-columns: repeat(4, 300px);
justify-content: center;
gap: 1rem;
padding: 0 4rem;
box-sizing: border-box;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.prizequest-page .comp-box-grid .comp-box {
max-width: 300px;
}
.prizequest-favourites-grid {
grid-template-columns: repeat(4, 300px);
justify-content: center;
gap: 1rem;
padding: 0 4rem;
box-sizing: border-box;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.prizequest-favourites-grid .comp-box {
max-width: 300px;
}
}
/* Filter bar: cohesive raised controls */
.prizequest-filter-launcher {
max-width: 1248px;
margin: 0.7rem auto 0;
padding: 0 var(--spacing-md);
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
width: 100%;
box-sizing: border-box;
min-height: 56px;
}
.prizequest-filter-launcher-main {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.prizequest-btn-filters,
.prizequest-btn-saved,
.prizequest-btn-ends-today,
.prizequest-btn-instant-wins,
.prizequest-panel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 9px 16px;
border-radius: 8px;
border: 1px solid var(--pq-edge);
background: var(--pq-surface);
color: var(--pq-ink);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
box-shadow: var(--pq-elev);
transition: background 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
-webkit-tap-highlight-color: transparent;
}
.prizequest-btn-filters:hover,
.prizequest-btn-saved:hover,
.prizequest-btn-ends-today:hover,
.prizequest-btn-instant-wins:hover,
.prizequest-panel-btn:hover {
background: var(--pq-surface-hover);
box-shadow: var(--pq-elev-hover);
}
.prizequest-btn-instant-wins.is-on,
.prizequest-btn-instant-wins[aria-pressed="true"] {
background: var(--pq-surface);
border-color: var(--pq-edge);
color: var(--pq-ink);
box-shadow: var(--pq-elev);
}
.prizequest-btn-instant-wins.is-on:hover,
.prizequest-btn-instant-wins[aria-pressed="true"]:hover,
.prizequest-btn-instant-wins:hover {
background: var(--pq-surface-hover);
box-shadow: var(--pq-elev-hover);
color: var(--pq-ink);
}
.prizequest-btn-instant-wins .pq-iw-knob {
position: relative;
width: 2.15rem;
height: 1.15rem;
border-radius: 999px;
background: #1a7a3a;
border: 1px solid #146330;
flex-shrink: 0;
margin-left: 0.15rem;
transition: background 0.15s ease, border-color 0.15s ease;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.prizequest-btn-instant-wins .pq-iw-knob::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 0.95rem;
height: 0.95rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.28);
transition: transform 0.15s ease;
transform: translateX(0.95rem);
}
.prizequest-btn-instant-wins.is-off .pq-iw-knob,
.prizequest-btn-instant-wins[aria-pressed="false"] .pq-iw-knob {
background: #c62828;
border-color: #9e1c1c;
}
.prizequest-btn-instant-wins.is-off .pq-iw-knob::after,
.prizequest-btn-instant-wins[aria-pressed="false"] .pq-iw-knob::after {
transform: translateX(0);
}
.pq-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
flex-shrink: 0;
}
.pq-icon.pq-info-icon {
display: block;
width: 12px;
height: 12px;
min-width: 12px;
min-height: 12px;
vertical-align: 0;
line-height: 0;
}
.prizequest-btn-filters i,
.prizequest-btn-saved i,
.prizequest-btn-filters .pq-icon,
.prizequest-btn-saved .pq-icon {
font-size: 14px;
line-height: 1;
color: inherit;
}
.prizequest-btn-filters[aria-expanded="true"],
.prizequest-btn-saved.active {
background: var(--pq-surface-active);
border-color: #d0dae6;
color: #1a3347;
}
.prizequest-btn-ends-today.active {
background: #ff5f00;
border-color: #ff5f00;
color: #fff;
}
.prizequest-btn-ends-today.active:hover {
background: #e65600;
border-color: #e65600;
color: #fff;
}
/* Saved: block clicks when empty — same look as Filter / Ends Today (no grey flash). */
.prizequest-btn-saved:disabled,
.prizequest-btn-saved[aria-disabled="true"],
.pq-nav-saved:disabled,
.pq-nav-saved[aria-disabled="true"] {
cursor: default;
pointer-events: none;
}
.prizequest-saved-badge {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
padding: 0;
margin: 0;
border-radius: 50%;
background: #b8c5d4;
color: #fff;
font-size: 10px;
font-weight: 700;
font-family: inherit;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
}
.prizequest-saved-badge--active {
background: #ff5f00;
}
.prizequest-sort-launcher {
display: inline-flex;
align-items: center;
flex-shrink: 1;
min-width: 0;
position: relative;
}
@media (max-width: 359px) {
.prizequest-sort-launcher { display: none !important; }
}
.pq-sort-short { display: none; }
.pq-sort-full { display: inline; }
.pq-sort-asc-icon {
display: none;
width: 11px;
height: 11px;
margin-left: 5px;
flex-shrink: 0;
stroke: currentColor;
fill: none;
}
.prizequest-sort-label-short.is-price .pq-sort-asc-icon,
#prizequest-sort-label-short.is-price .pq-sort-asc-icon {
display: inline-block;
}
@media (max-width: 499px) {
.pq-sort-full { display: none !important; }
.pq-sort-short {
display: inline-flex !important;
align-items: center;
}
.prizequest-sort-trigger {
min-width: 0 !important;
max-width: 8.6rem;
padding: 9px 10px;
}
.prizequest-sort-menu {
left: auto !important;
right: 0 !important;
min-width: 10.25rem;
width: max-content;
max-width: min(14rem, calc(100vw - 2rem));
}
}
@media (min-width: 500px) {
.pq-sort-short { display: none !important; }
.pq-sort-full { display: inline !important; }
}
@media (max-width: 767px) {
.prizequest-filter-launcher .prizequest-btn-saved {
display: none !important;
}
}
@media (max-width: 768px) {
.prizequest-filter-launcher {
overflow: visible;
}
.prizequest-sort-trigger {
min-width: 0 !important;
max-width: 9.25rem;
}
.prizequest-sort-menu {
left: auto !important;
right: 0 !important;
min-width: 10.5rem;
width: max-content;
max-width: min(14rem, calc(100vw - 2rem));
}
}
.prizequest-sort-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 168px;
max-width: 220px;
min-height: 38px;
padding: 9px 14px;
border-radius: 8px;
border: 1px solid var(--pq-edge);
background: var(--pq-surface);
color: var(--pq-ink);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
box-shadow: var(--pq-elev);
cursor: pointer;
transition: background 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.prizequest-sort-trigger:hover,
.prizequest-sort-trigger[aria-expanded="true"] {
background: var(--pq-surface-hover);
box-shadow: var(--pq-elev-hover);
}
.prizequest-sort-trigger:focus,
.prizequest-sort-trigger:focus-visible {
outline: none;
box-shadow: var(--pq-elev-hover);
}
.prizequest-sort-chevron {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #5a738a;
flex-shrink: 0;
}
.prizequest-sort-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 40;
min-width: 100%;
max-width: min(18rem, calc(100vw - 2rem));
padding: 6px;
border-radius: 8px;
border: 1px solid var(--pq-edge);
background: var(--pq-surface);
box-shadow: var(--pq-elev-hover);
flex-direction: column;
gap: 4px;
box-sizing: border-box;
display: none !important;
}
.prizequest-sort-menu[hidden] {
display: none !important;
}
.prizequest-sort-menu.is-open {
display: flex !important;
}
.prizequest-sort-option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--pq-ink);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
padding: 9px 12px;
cursor: pointer;
outline: none;
}
.prizequest-sort-option:hover,
.prizequest-sort-option:focus-visible {
background: var(--pq-surface-hover);
}
.prizequest-sort-option.active {
background: var(--pq-surface-active);
}
.prizequest-filter-disclaimer {
margin: 0;
padding: 0;
flex: 1 1 auto;
min-width: 0;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
font-size: 13px;
font-weight: 600;
font-style: normal;
color: var(--pq-ink-muted);
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
}
.prizequest-filter-disclaimer i,
.prizequest-filter-disclaimer .pq-icon,
.prizequest-hero-disclaimer i,
.prizequest-hero-disclaimer .pq-icon,
.pq-info-icon {
font-size: 12px;
width: 12px;
min-width: 12px;
height: 12px;
line-height: 0;
color: currentColor;
fill: currentColor;
flex-shrink: 0;
margin: 0;
display: block;
vertical-align: 0;
overflow: visible;
}
body.prizequest-page #prizequest-clear-filters,
body.prizequest-page #prizequest-close-filters {
background: var(--pq-surface);
border: 1px solid var(--pq-edge);
color: var(--pq-ink);
box-shadow: var(--pq-elev);
}
body.prizequest-page #prizequest-clear-filters:hover,
body.prizequest-page #prizequest-close-filters:hover {
background: var(--pq-surface-hover);
box-shadow: var(--pq-elev-hover);
color: var(--pq-ink);
}
.prizequest-filter-disclaimer span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 599px) {
.prizequest-filter-launcher {
flex-wrap: wrap;
}
.prizequest-filter-disclaimer {
flex: 1 1 100%;
margin-left: 0;
justify-content: flex-start;
white-space: normal;
}
.prizequest-filter-disclaimer span {
overflow: visible;
text-overflow: unset;
}
}
.prizequest-filter-overlay {
position: fixed;
inset: 0;
background: rgba(5, 16, 26, 0.55);
z-index: 1000020;
}
.prizequest-filter-overlay[hidden] {
display: none !important;
pointer-events: none !important;
}
/* Fixed drawer: flush under sticky header + category rail, down to viewport bottom.
Closed state MUST be non-hittable — transform alone still receives taps on mobile Safari. */
body.prizequest-page .prizequest-filters {
position: fixed !important;
top: var(--pq-nav-offset, 0px);
right: 0 !important;
bottom: 0 !important;
z-index: 1000021 !important;
width: min(560px, 92vw) !important;
height: auto !important;
max-height: none !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
border-left: 1px solid #e3eaf5;
border-top: 0 !important;
box-shadow: -16px 0 42px rgba(7, 19, 30, 0.22);
transform: translateX(102%);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 200ms;
overflow: hidden;
visibility: hidden;
pointer-events: none;
}
body.prizequest-page.filter-panel-open .prizequest-filters,
body.prizequest-page .prizequest-filters[aria-hidden="false"] {
visibility: visible;
pointer-events: auto;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.prizequest-filter-card {
display: flex;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
background: #fff;
}
.prizequest-filter-panel-head {
flex-shrink: 0;
position: relative;
background: #ffffff;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.55rem 1rem 0.5rem;
border-bottom: 1px solid #e8edf5;
margin-bottom: 0;
}
.prizequest-filter-panel-title-row {
display: flex;
justify-content: center;
align-items: center;
}
.prizequest-filter-panel-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.7rem;
}
.prizequest-filter-panel-actions {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.prizequest-filter-grid {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0.28rem 0.85rem 0.45rem;
}
.prizequest-filter-panel-section {
display: block;
border-bottom: 1px solid #edf2f8;
padding: 0.42rem 0;
margin: 0;
}
.prizequest-filter-panel-section:first-of-type {
padding-top: 0.22rem;
}
.prizequest-filter-panel-section:last-child {
border-bottom: 0;
padding-bottom: 0.15rem;
}
.prizequest-filter-panel-section--sites .prizequest-filter-line {
gap: 0.42rem !important;
}
.pq-filter-drill-row {
display: none;
}
.prizequest-filter-panel-section--type {
padding-bottom: 0.42rem;
}
.prizequest-filter-cell {
border-bottom: 1px solid #edf2f8;
padding-bottom: 0.85rem;
}
.prizequest-filter-cell:last-child {
border-bottom: 0;
padding-bottom: 0.2rem;
}
.prizequest-filter-line {
gap: 0.42rem !important;
align-items: flex-start;
text-align: left;
}
.prizequest-filter-inline-count {
margin-left: 0.35rem;
font-size: 0.72rem;
color: #5a738a;
font-weight: 800;
}
.prizequest-filters .prizequest-chip {
font-size: 0.82rem !important;
font-weight: 700;
line-height: 1.2;
min-height: 44px;
box-sizing: border-box;
padding: 0.48rem 0.68rem !important;
border: 1px solid var(--pq-edge) !important;
background: var(--pq-surface) !important;
box-shadow: var(--pq-elev) !important;
}
.prizequest-filters .prizequest-chip:hover:not(.active):not(:disabled):not(.is-unavailable) {
background: var(--pq-surface-hover) !important;
box-shadow: var(--pq-elev-hover) !important;
}
.prizequest-filters #type-filters .prizequest-chip.is-unavailable,
.prizequest-filters #type-filters .prizequest-chip.is-unavailable.active {
opacity: 0.42;
cursor: default;
background: #eef1f5 !important;
border-color: #c5ced9 !important;
color: #8a97a8 !important;
box-shadow: none !important;
}
.prizequest-filters .prizequest-chip.active,
.prizequest-filters #cash-alt-only.active,
.prizequest-filters #date-options .prizequest-chip.active,
.prizequest-filters #tax-free-cash-tree .prizequest-chip.active,
.prizequest-filters #house-prize-tree .prizequest-chip.active,
.prizequest-filters #price-presets .prizequest-chip.active,
.prizequest-filters #free-only-chip.active {
background: #ff5f00 !important;
border-color: #ff5f00 !important;
color: #fff !important;
box-shadow: 0 1px 3px rgba(255, 95, 0, 0.35) !important;
}
.prizequest-filter-section-label {
font-size: var(--pq-type-label, 0.8125rem) !important;
letter-spacing: 0.09em !important;
color: #587188 !important;
font-weight: 800 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.prizequest-filters .prizequest-filter-section-label::before {
content: '';
display: block;
width: 3px;
height: 12px;
background: #ff6b00;
border-radius: 2px;
flex-shrink: 0;
}
#sort-options {
width: 100%;
display: flex !important;
flex-wrap: wrap !important;
gap: 0.42rem;
overflow: visible;
padding-bottom: 0;
}
#sort-options .prizequest-chip,
#sort-options .prizequest-sort-pill {
flex: 0 0 auto;
text-align: left;
justify-content: flex-start;
padding: 6px 14px !important;
border-radius: 50px !important;
border: 1px solid var(--pq-edge) !important;
background: var(--pq-surface) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--pq-ink) !important;
box-shadow: var(--pq-elev) !important;
}
#sort-options .prizequest-chip:hover:not(.active),
#sort-options .prizequest-sort-pill:hover:not(.active) {
background: var(--pq-surface-hover) !important;
box-shadow: var(--pq-elev-hover) !important;
}
#sort-options .prizequest-chip.active,
#sort-options .prizequest-sort-pill.active {
background: #ff5f00 !important;
border-color: #ff5f00 !important;
color: #fff !important;
}
.prizequest-sort-prize-price-pair {
display: contents;
}
#type-filters-primary {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap: 0.28rem !important;
}
#type-filters-primary > .prizequest-chip {
display: inline-flex !important;
flex: 0 0 auto !important;
flex-grow: 0 !important;
width: auto !important;
max-width: 100%;
min-width: 0;
align-self: flex-start;
justify-content: flex-start;
padding: 0.32rem 0.55rem !important;
font-size: 0.78rem !important;
gap: 0.32rem !important;
}
#type-filters-primary > .prizequest-filter-row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start;
gap: 0.35rem !important;
}
#tax-free-cash-tree {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.38rem;
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
}
@media (min-width: 768px) {
#tax-free-cash-tree,
#house-prize-tree {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.4rem;
}
#tax-free-cash-tree .prizequest-subfilter-options,
#house-prize-tree .prizequest-subfilter-options {
display: inline-flex;
width: auto;
}
}
.prizequest-filters #tax-free-cash-tree,
.prizequest-filters #house-prize-tree {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.35rem 0.4rem !important;
}
.prizequest-filters #tax-free-cash-tree .prizequest-subfilter-options,
.prizequest-filters #house-prize-tree .prizequest-subfilter-options {
display: inline-flex !important;
flex-wrap: wrap !important;
width: auto !important;
flex: 1 1 auto;
min-width: 0;
}
#tax-free-cash-tree .prizequest-chip {
white-space: nowrap;
}
.pq-cash-view-label-short,
.pq-cash-alt-short {
display: none;
}
#tax-free-cash-tree.is-disabled {
opacity: 0.55;
}
#tax-free-cash-tree .prizequest-chip:disabled {
cursor: default;
pointer-events: none;
}
#house-prize-tree {
display: flex;
align-items: flex-start;
gap: 0.38rem;
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
}
.pq-house-view-label-short,
.pq-house-tickets-short {
display: none;
}
#house-prize-tree .prizequest-chip {
white-space: nowrap;
}
#house-prize-tree.is-disabled {
opacity: 0.55;
}
#house-prize-tree .prizequest-chip:disabled {
cursor: default;
pointer-events: none;
}
#price-presets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.38rem;
}
#price-presets .prizequest-chip {
width: 100%;
border-radius: 9px !important;
text-align: left;
justify-content: flex-start;
}
.prizequest-filter-expand {
border: 0;
background: transparent;
color: #2f5f86;
font-size: 0.8rem;
font-weight: 800;
padding: 0.18rem 0;
text-align: left;
cursor: pointer;
}
.prizequest-site-actions {
display: flex !important;
align-items: center;
gap: 0.5rem !important;
flex-wrap: nowrap;
}
.prizequest-site-dropdown {
width: 100%;
}
.prizequest-site-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.65rem 0.42rem;
border: 0;
margin: 0;
border-bottom: 1px solid #edf2f8;
background: transparent;
position: static;
}
.prizequest-site-menu-title {
font-size: 0.72rem;
letter-spacing: 0.08em;
color: #5a738a;
font-weight: 800;
text-transform: uppercase;
}
.prizequest-site-menu-clear {
border: 0;
background: transparent;
color: #ff5f00;
font-size: 0.78rem;
font-weight: 800;
padding: 0;
cursor: pointer;
}
.prizequest-filters .prizequest-site-trigger.prizequest-chip {
min-width: 180px;
max-width: 100%;
width: 100%;
min-height: 40px;
border-radius: 8px !important;
border: 1px solid var(--pq-edge) !important;
background: var(--pq-surface) !important;
padding: 10px 1.85rem 10px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--pq-ink) !important;
box-shadow: var(--pq-elev) !important;
}
.prizequest-filters .prizequest-site-trigger.prizequest-chip:hover {
background: var(--pq-surface-hover) !important;
box-shadow: var(--pq-elev-hover) !important;
}
.prizequest-filters .prizequest-site-trigger.prizequest-chip.active {
background: var(--pq-surface-active) !important;
border-color: #d0dae6 !important;
color: #1a3347 !important;
}
.prizequest-filters .prizequest-site-menu {
border-radius: 10px !important;
border: 1px solid var(--pq-edge) !important;
box-shadow: var(--pq-elev-hover) !important;
}
#site-filter-menu {
padding: 0.3rem 0.4rem 0.45rem;
}
#site-filter-options {
display: grid;
grid-template-columns: 1fr;
gap: 0.32rem;
padding: 0.35rem 0.25rem 0.1rem;
max-height: 248px;
overflow-y: auto;
overflow-x: hidden;
}
.prizequest-site-option { font-size: 0.82rem; font-weight: 700; }
.prizequest-site-actions .prizequest-chip,
.prizequest-site-actions .prizequest-site-dropdown,
.prizequest-site-actions .prizequest-min-prize-wrap {
flex: 0 0 auto;
}
.prizequest-filters .prizequest-min-prize-wrap {
width: auto !important;
max-width: none !important;
min-width: 175px;
flex: 0 0 auto;
border: 1px solid var(--pq-edge) !important;
border-radius: 8px !important;
background: var(--pq-surface) !important;
box-shadow: var(--pq-elev) !important;
padding: 6px 10px !important;
gap: 0.35rem !important;
}
.prizequest-filters .prizequest-min-prize-label {
font-size: 12px !important;
font-weight: 700 !important;
color: #123246 !important;
line-height: 1.25 !important;
}
.prizequest-filters #prizequest-min-prize {
font-size: 16px !important; /* iOS auto-zoom lock — do not lower */
font-weight: 700 !important;
color: #123246 !important;
line-height: 1.25 !important;
width: 12ch !important;
min-width: 10ch !important;
max-width: 14ch !important;
background: transparent !important;
}
.prizequest-filters #prizequest-min-prize::placeholder {
color: #9aa9b7 !important;
font-weight: 700 !important;
font-size: 16px !important;
}
.prizequest-filters .prizequest-custom-wrap {
width: auto !important;
max-width: none !important;
min-width: 175px;
min-height: 44px;
height: 44px;
flex: 0 0 auto;
box-sizing: border-box;
border: 1px solid var(--pq-edge) !important;
border-radius: 9px !important;
background: var(--pq-surface) !important;
box-shadow: var(--pq-elev) !important;
padding: 0 10px !important;
gap: 0.35rem !important;
display: inline-flex;
align-items: center;
}
.prizequest-filters .prizequest-custom-prefix {
font-size: 16px !important; /* iOS auto-zoom lock — do not lower */
font-weight: 700 !important;
line-height: 1.25 !important;
}
.prizequest-filters .prizequest-custom {
font-size: 16px !important; /* iOS auto-zoom lock — do not lower */
font-weight: 700 !important;
line-height: 1.25 !important;
color: #123246 !important;
background: transparent !important;
}
.prizequest-filters .prizequest-custom::placeholder {
color: #9aa9b7 !important;
font-weight: 700 !important;
font-size: 16px !important;
}
#date-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#date-options .prizequest-chip { flex: 0 0 auto; }
.prizequest-filter-panel-title {
font-size: 0.9rem;
font-weight: 900;
letter-spacing: 0.08em;
color: #123246;
text-transform: uppercase;
}
.prizequest-filter-panel-head .prizequest-match-count {
font-size: 0.86rem;
font-weight: 800;
color: #1a3347;
line-height: 1.15;
}
.prizequest-filter-panel-actions .prizequest-panel-btn {
flex: 0 0 auto;
}
.prizequest-page.filter-panel-open .prizequest-filters {
transform: translateX(0);
}
/* Do not overflow:hidden html/body — that clips the sticky/fixed nav
and leaves a blank strip the drawer still reserves. */
html.pq-filter-lock,
html.pq-filter-lock-desktop,
html.pq-filter-lock body.prizequest-page,
html.pq-filter-lock-desktop body.prizequest-page {
overscroll-behavior: none;
}
html.pq-filter-lock .prizequest-filters,
html.pq-filter-lock .prizequest-filter-card {
touch-action: pan-y;
overscroll-behavior: contain;
pointer-events: auto;
}
html.pq-filter-lock .prizequest-filter-launcher,
html.pq-filter-lock .main-content,
html.pq-filter-lock .comp-box-grid,
html.pq-filter-lock .page-wrapper {
pointer-events: none !important;
}
html.pq-filter-lock header.site-main-header,
html.pq-filter-lock header.site-main-header *,
html.pq-filter-lock .prizequest-filters,
html.pq-filter-lock .prizequest-filters * {
pointer-events: auto !important;
}
/* Kill 300ms double-tap zoom delay on interactive controls */
body.prizequest-page .prizequest-chip,
body.prizequest-page .prizequest-btn-filters,
body.prizequest-page .prizequest-btn-saved,
body.prizequest-page .prizequest-panel-btn,
body.prizequest-page .prizequest-watch-btn,
body.prizequest-page .comp-box-button,
body.prizequest-page .comp-box-card-link,
body.prizequest-page .prizequest-filter-launcher button,
body.prizequest-page .pq-cat-link,
body.prizequest-page .pq-mobile-menu-btn,
body.prizequest-page .pq-mobile-menu-link,
body.prizequest-page .prizequest-sort-trigger,
body.prizequest-page [data-pq-budget-input],
body.prizequest-page .pq-nav-budget-input,
body.prizequest-page .prizequest-custom,
body.prizequest-page .prizequest-min-prize-wrap input {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.prizequest-page.filter-panel-open header.site-main-header {
position: sticky !important;
top: 0 !important;
pointer-events: auto !important;
z-index: 1000040 !important;
border-bottom: none !important;
box-shadow: none !important;
}
body.prizequest-page.filter-panel-open .pq-cat-bar {
border-bottom: none !important;
box-shadow: none !important;
}
@media (max-width: 767px) {
body.prizequest-page.filter-panel-open header.site-main-header {
z-index: 1000040 !important;
}
body.prizequest-page.filter-panel-open .prizequest-filters {
z-index: 1000025 !important;
}
}
body.pq-free-page .prizequest-filter-panel-section--budget {
display: none !important;
}
@media (min-width: 768px) {
body.prizequest-page .prizequest-filters {
top: var(--pq-nav-offset, 0px);
bottom: 0 !important;
height: auto !important;
max-height: none !important;
}
.prizequest-filter-card {
height: 100%;
max-height: 100%;
}
.prizequest-filter-overlay {
background: rgba(5, 16, 26, 0.28);
}
.prizequest-filter-grid {
padding-top: 0.2rem;
}
.prizequest-filter-panel-section:first-of-type {
padding-top: 0.12rem;
}
.prizequest-type-subfilters {
margin-top: 0.18rem;
}
.prizequest-category-chip-rows {
gap: 0.26rem;
}
}
@media (max-width: 767px) {
body.prizequest-page .prizequest-filters {
bottom: 0 !important;
max-height: none !important;
}
body.prizequest-page.filter-panel-open .prizequest-filter-overlay {
background: rgba(5, 16, 26, 0.55) !important;
top: var(--pq-nav-offset, 0px) !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
height: auto !important;
max-height: none !important;
}
.prizequest-filters .prizequest-filter-section-label,
.prizequest-filter-card .prizequest-filter-section-label {
font-size: var(--pq-type-label, 0.8125rem) !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
color: #213d53 !important;
}
.prizequest-filters .prizequest-custom-prefix,
.prizequest-filters .prizequest-min-prize-label,
.prizequest-filters .prizequest-custom,
.prizequest-filters .prizequest-custom::placeholder,
.prizequest-filters #prizequest-min-prize,
.prizequest-filters #prizequest-min-prize::placeholder {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
.prizequest-filter-card {
height: 100%;
max-height: none;
}
.prizequest-filter-grid {
gap: 0.5rem !important;
}
.prizequest-filter-launcher {
margin-top: 0.45rem;
align-items: center;
gap: 0.45rem;
}
.prizequest-btn-filters,
.prizequest-btn-saved {
padding: 9px 14px;
flex-shrink: 0;
}
.prizequest-filter-disclaimer {
font-size: 13px;
line-height: 1.2;
}
.prizequest-filters,
body.prizequest-page .prizequest-filters {
top: var(--pq-nav-offset, 0px);
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: auto !important;
border-left: 0;
border-top: 0;
border-radius: 0;
box-shadow: none;
/* Mobile: brief fade, no slide — avoids scroll-then-slide nav jolt */
transform: none !important;
opacity: 0;
transition: opacity 140ms ease, visibility 0s linear 140ms;
}
body.prizequest-page.filter-panel-open .prizequest-filters,
body.prizequest-page .prizequest-filters[aria-hidden="false"] {
transform: none !important;
opacity: 1;
visibility: visible;
transition: opacity 140ms ease, visibility 0s;
}
.prizequest-filter-overlay {
transition: opacity 140ms ease;
inset: 0;
background: rgba(5, 16, 26, 0.92);
}
/* Do not hide hero/launcher: that flashes white when the drawer opens mid-scroll. */
.prizequest-filter-launcher .prizequest-btn-saved {
display: none !important;
}
/* Instant Wins toggle: no room in the Filters / Ends Today / Best Value row. */
body.prizequest-page #include-iw-switch,
body.prizequest-page .prizequest-btn-instant-wins {
display: none !important;
}
.prizequest-filter-panel-head {
padding: 0.75rem 1rem 0.55rem;
}
.prizequest-filter-panel-meta-row {
flex-wrap: wrap;
row-gap: 0.35rem;
}
.prizequest-filter-panel-actions {
flex-shrink: 0;
}
.prizequest-filter-panel-actions .prizequest-panel-btn {
min-height: 36px;
padding: 8px 12px;
font-size: 12px;
}
.prizequest-filter-grid {
padding-bottom: 1.1rem;
}
.prizequest-chip {
min-height: 44px;
}
.prizequest-filters .prizequest-custom-wrap,
.prizequest-filters .prizequest-min-prize-wrap {
width: 100% !important;
max-width: none !important;
min-height: 44px;
height: 44px;
}
.pq-cash-view-label-long,
.pq-cash-alt-long,
.pq-house-view-label-long,
.pq-house-tickets-long {
display: none;
}
.pq-cash-view-label-short,
.pq-cash-alt-short,
.pq-house-view-label-short,
.pq-house-tickets-short {
display: inline;
}
/* Phone + large-phone landscape: always show compact card cash alt */
.prizequest-cash-alt .pq-cash-alt-desk { display: none !important; }
.prizequest-cash-alt .pq-cash-alt-mob { display: inline !important; }
#price-presets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#sort-options {
flex-wrap: nowrap !important;
overflow-x: auto;
}
.prizequest-filter-panel-meta-row {
gap: 0.5rem;
}
.prizequest-filter-panel-head .prizequest-match-count {
font-size: 0.82rem;
}
.prizequest-site-actions .prizequest-min-prize-wrap,
.prizequest-site-actions .prizequest-site-dropdown {
width: 100%;
}
.prizequest-site-actions {
flex-wrap: wrap;
align-items: stretch;
}
.prizequest-filter-panel-section--sites {
padding-top: 0;
padding-bottom: 0;
}
.prizequest-filter-panel-section--sites .prizequest-filter-line {
gap: 0.5rem !important;
}
#site-filter-options {
grid-template-columns: 1fr;
max-height: calc(52vh - 46px);
}
.prizequest-site-menu {
min-width: 0;
max-height: 52vh;
top: calc(100% - 1px);
border-radius: 10px;
}
.prizequest-site-trigger.prizequest-chip {
width: 100%;
max-width: none;
min-width: 0;
}
/* —— Mobile Selfridges-style drill-in (Categories / Competition Sites) —— */
.prizequest-filter-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
.pq-filter-drill-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 0.75rem;
margin: 0;
padding: 1.05rem 0.2rem;
min-height: 64px;
box-sizing: border-box;
border: 0;
border-bottom: none;
background: transparent;
color: #213d53;
font: inherit;
font-size: var(--pq-type-label, 0.8125rem);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pq-filter-drill-row-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pq-filter-drill-row-label::before {
content: '';
display: block;
width: 3px;
height: 16px;
background: #ff6b00;
border-radius: 2px;
flex-shrink: 0;
}
.pq-filter-drill-row:active {
background: #f4f7fb;
}
.pq-filter-drill-row-text {
display: flex;
align-items: baseline;
gap: 0.45rem;
min-width: 0;
}
.pq-filter-drill-row-meta:empty {
display: none;
}
.pq-filter-drill-row-meta {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.09em;
color: #ff5f00;
text-transform: none;
}
.pq-filter-drill-chevron {
flex-shrink: 0;
color: #7a8a9c;
font-size: 22px;
line-height: 1;
font-weight: 400;
}
#prizequest-competition-type-section,
#prizequest-comp-sites-section,
#prizequest-cash-view-toggle-section,
#prizequest-house-ticket-toggle-section {
padding-top: 0;
padding-bottom: 0;
border-bottom: 0;
}
/* Divider centred between paired rows — section border, not row border */
#prizequest-competition-type-section,
#prizequest-cash-view-toggle-section,
#prizequest-house-ticket-toggle-section {
border-bottom: 1px solid #edf2f8;
}
#prizequest-comp-sites-section .pq-filter-drill-row {
border-bottom: 1px solid #edf2f8;
}
#prizequest-competition-type-section .prizequest-filter-section-label,
#prizequest-comp-sites-section .prizequest-filter-section-label {
display: none;
}
.prizequest-filter-card:not(.is-pq-drill-open) .pq-filter-drill-pane {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Until drill class is set, never paint category/site panes in the main stack. */
.prizequest-filter-card .pq-filter-drill-pane[hidden] {
display: none !important;
visibility: hidden !important;
}
.prizequest-filter-card.is-pq-drill-open .prizequest-filter-panel-head {
display: none;
}
.prizequest-filter-card.is-pq-drill-open .prizequest-filter-grid {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding-bottom: 0;
overflow: hidden;
}
.prizequest-filter-card.is-pq-drill-open .prizequest-filter-grid > .prizequest-filter-panel-section:not(.is-pq-drill-active) {
display: none !important;
}
.prizequest-filter-card.is-pq-drill-open .prizequest-filter-grid > .prizequest-filter-panel-section.is-pq-drill-active {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 0;
border: 0;
}
.prizequest-filter-card.is-pq-drill-open .pq-filter-drill-row {
display: none !important;
}
.prizequest-filter-card.is-pq-drill-open .pq-filter-drill-pane {
display: flex !important;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.pq-filter-drill-pane-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: 0.5rem;
flex-shrink: 0;
padding: 0.7rem 0.15rem 0.65rem;
border-bottom: 1px solid #e8edf4;
}
.pq-filter-drill-back,
.pq-filter-drill-clear {
border: 0;
background: transparent;
color: #ff5f00;
font: inherit;
font-size: 14px;
font-weight: 700;
padding: 0.35rem 0.15rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
line-height: 1.2;
}
.pq-filter-drill-back {
justify-self: start;
}
.pq-filter-drill-clear {
justify-self: end;
}
.pq-filter-drill-pane-title {
justify-self: center;
text-align: center;
font-size: 15px;
font-weight: 800;
color: #0f1923;
}
/* Categories bar has no Clear — keep title centred via empty third column */
.pq-filter-drill-pane[data-pq-drill-pane="categories"] .pq-filter-drill-pane-bar::after {
content: '';
justify-self: end;
width: 1px;
visibility: hidden;
}
.pq-filter-drill-row.is-disabled,
.pq-filter-drill-row:disabled {
opacity: 0.38;
color: #8a97a8;
pointer-events: none !important;
cursor: not-allowed;
}
.pq-filter-drill-row.is-disabled .pq-filter-drill-chevron,
.pq-filter-drill-row:disabled .pq-filter-drill-chevron {
color: #b0bac6;
}
.pq-filter-drill-row-meta {
font-variant-numeric: tabular-nums;
}
.pq-filter-drill-pane .prizequest-filter-line {
flex: 1;
min-height: 0;
overflow: auto;
padding: 0.35rem 0 1.25rem;
-webkit-overflow-scrolling: touch;
}
/* Shared list rows inside Categories / Sites drill panes */
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] .prizequest-filter-line,
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] .prizequest-filter-line {
display: flex;
flex-direction: column;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] .prizequest-filter-section-label,
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] .prizequest-filter-section-label {
display: none !important;
}
/* Categories drill: same clickable list as sites (not pills) */
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters {
width: 100%;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters-primary,
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters-primary.prizequest-category-chip-rows {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters-primary > .prizequest-chip {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: none !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0.9rem 0.55rem !important;
border: 0 !important;
border-radius: 0 !important;
border-bottom: 0.5px solid #f0f0f0 !important;
background: #fff !important;
color: #243f56 !important;
box-shadow: none !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
gap: 0.65rem !important;
text-align: left !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters-primary > .prizequest-chip::before {
content: '';
width: 16px;
height: 16px;
border-radius: 3px;
border: 0.5px solid #ccc;
flex-shrink: 0;
background: #fff;
box-sizing: border-box;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters-primary > .prizequest-chip.active {
background: #fff !important;
color: #243f56 !important;
border-color: transparent !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters-primary > .prizequest-chip.active::before {
background-color: #ff5f00;
border-color: #ff5f00;
box-shadow: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.2l3.1 3.2L12.4 4.8'/%3E%3C/svg%3E");
background-size: 10px 10px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] #type-filters-primary > .prizequest-chip.is-unavailable {
opacity: 0.45;
background: #f3f5f8 !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="categories"] .prizequest-type-subfilters {
margin-top: 0.65rem;
padding: 0 0.35rem;
}
/* Sites drill: plain list only — no trigger / dropdown chrome */
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] .prizequest-site-dropdown {
position: static !important;
width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] #site-filter-trigger {
display: none !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] #site-filter-menu {
position: static !important;
display: flex !important;
flex-direction: column;
width: 100% !important;
min-width: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
overflow: visible !important;
z-index: auto !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] #site-filter-menu[hidden] {
display: flex !important;
}
/* Mobile Sites drill: no nested dropdown header — Clear lives in the pane bar. */
.prizequest-site-menu-header--desktop,
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] .prizequest-site-menu-header {
display: none !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] #site-filter-options {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
max-height: none !important;
padding: 0 !important;
overflow: visible !important;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] .prizequest-site-option {
width: 100%;
padding: 0.9rem 0.55rem;
gap: 0.65rem;
border-bottom: 0.5px solid #f0f0f0;
font-size: 0.92rem;
font-weight: 700;
background: #fff;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] .prizequest-site-check {
width: 16px;
height: 16px;
}
.prizequest-filter-card.is-pq-drill-open[data-pq-drill="sites"] .prizequest-site-name {
font-size: 0.92rem;
color: #243f56;
}
/* Cash / Houses category pages — drill-row chrome; single 1px divider like Categories / Sites */
#prizequest-cash-view-toggle-section .prizequest-filter-line,
#prizequest-house-ticket-toggle-section .prizequest-filter-line {
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
gap: 0.42rem !important;
margin: 0;
padding: 0.75rem 0;
min-height: 48px;
box-sizing: border-box;
border: 0;
border-bottom: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#prizequest-cash-view-toggle-section .prizequest-filter-section-label,
#prizequest-house-ticket-toggle-section .prizequest-filter-section-label {
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
}
#prizequest-cash-view-toggle-section #tax-free-cash-tree,
#prizequest-house-ticket-toggle-section #house-prize-tree {
flex-direction: row !important;
flex: 1 1 auto;
min-width: 0;
width: auto !important;
align-items: center !important;
}
#prizequest-cash-view-toggle-section .prizequest-subfilter-options,
#prizequest-house-ticket-toggle-section .prizequest-subfilter-options {
display: inline-flex !important;
flex-wrap: wrap;
gap: 0.35rem;
width: auto !important;
}
#prizequest-cash-view-toggle-section .prizequest-chip,
#prizequest-house-ticket-toggle-section .prizequest-chip {
flex-shrink: 0;
}
}
/* Category page view toggles — label row inline with chips on desktop too */
@media (min-width: 768px) {
#prizequest-cash-view-toggle-section .prizequest-filter-line,
#prizequest-house-ticket-toggle-section .prizequest-filter-line {
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
gap: 0.42rem 0.55rem !important;
}
#prizequest-cash-view-toggle-section #tax-free-cash-tree,
#prizequest-house-ticket-toggle-section #house-prize-tree {
flex-direction: row !important;
flex: 0 1 auto;
min-width: 0;
width: auto !important;
align-items: center !important;
}
}
/* Desktop: drill UI chrome off; pane children lay out like before */
@media (min-width: 768px) {
.pq-filter-drill-row {
display: none !important;
}
.pq-filter-drill-pane-bar {
display: none !important;
}
.pq-filter-drill-pane,
.pq-filter-drill-pane[hidden] {
display: contents !important;
}
}
@media (max-width: 767px) {
/* Visual is a sibling AFTER hero-inner. Cards may rise into the
metric bar (negative top clip), but must never paint below the
bar. Mock left/right/bottom positions are unchanged. */
body.prizequest-page .prizequest-hero-inner {
position: relative;
z-index: 2;
}
body.prizequest-page .prizequest-hero .pq-hero-visual {
z-index: 0 !important;
overflow: visible !important;
/* Allow tops into the bar; hard-cut at the visual bottom edge. */
clip-path: inset(-240px -120px 0 -48px) !important;
}
body.prizequest-page .prizequest-hero:has(.pq-hero-visual) {
overflow: hidden !important;
}
body.prizequest-page .prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats {
position: relative;
z-index: 8;
/* So the below-bar mask can paint outside the stats box. */
overflow: visible !important;
}
body.prizequest-page .prizequest-hero:has(.pq-hero-visual) .prizequest-trust-stats::after {
content: "";
position: absolute;
left: -100vw;
right: -100vw;
top: 100%;
height: 240px;
background: #0f1923;
pointer-events: auto;
z-index: 1;
}
}
/* 650–767: same bottom cut; keep side bleed for the fan */
@media (min-width: 650px) and (max-width: 767px) {
body.prizequest-page .prizequest-hero .pq-hero-visual {
overflow: visible !important;
clip-path: inset(-240px -120px 0 -48px) !important;
}
}
/* LAST RULE IN THIS BLOCK. iOS Safari auto-zooms focused text inputs under 16px.
Input, placeholder, and the left-hand £ / Min Prize Value label stay the same size. */
body.prizequest-page .pq-nav-budget-input,
body.prizequest-page [data-pq-budget-input],
body.prizequest-page .prizequest-filters .prizequest-custom,
body.prizequest-page .prizequest-filters #prizequest-min-prize {
font-size: 16px !important;
}
@media (max-width: 767px) {
body.prizequest-page .pq-nav-budget-prefix,
body.prizequest-page .pq-nav-budget-input,
body.prizequest-page .pq-nav-budget-input::placeholder,
body.prizequest-page [data-pq-budget-input]::placeholder,
body.prizequest-page .prizequest-filters .prizequest-custom-prefix,
body.prizequest-page .prizequest-filters .prizequest-min-prize-label,
body.prizequest-page .prizequest-filters .prizequest-custom,
body.prizequest-page .prizequest-filters .prizequest-custom::placeholder,
body.prizequest-page .prizequest-filters #prizequest-min-prize,
body.prizequest-page .prizequest-filters #prizequest-min-prize::placeholder {
font-size: 16px !important;
line-height: 1.25 !important;
}
}
@media (min-width: 768px) {
body.prizequest-page .pq-nav-budget-input::placeholder,
body.prizequest-page [data-pq-budget-input]::placeholder,
body.prizequest-page .prizequest-filters .prizequest-custom::placeholder,
body.prizequest-page .prizequest-filters #prizequest-min-prize::placeholder {
font-size: 12px !important;
font-weight: 600 !important;
}
body.prizequest-page .pq-nav-budget-prefix,
body.prizequest-page .prizequest-filters .prizequest-custom-prefix {
font-size: 12px !important;
font-weight: 700 !important;
}
}
/* Mobile filter box: one 16px size for every label, chip, toggle, and field.
Desktop sizing above is intentionally left alone. */
@media (max-width: 767px) {
body.prizequest-page #prizequest-filters-panel,
body.prizequest-page #prizequest-filters-panel button,
body.prizequest-page #prizequest-filters-panel label,
body.prizequest-page #prizequest-filters-panel span,
body.prizequest-page #prizequest-filters-panel input,
body.prizequest-page #prizequest-filters-panel select,
body.prizequest-page #prizequest-filters-panel a,
body.prizequest-page #prizequest-filters-panel p,
body.prizequest-page #prizequest-filters-panel .prizequest-chip,
body.prizequest-page #prizequest-filters-panel .prizequest-sort-pill,
body.prizequest-page #prizequest-filters-panel .prizequest-filter-section-label,
body.prizequest-page #prizequest-filters-panel .prizequest-filter-sub-label,
body.prizequest-page #prizequest-filters-panel .prizequest-filter-inline-count,
body.prizequest-page #prizequest-filters-panel .prizequest-match-count,
body.prizequest-page #prizequest-filters-panel .prizequest-panel-btn,
body.prizequest-page #prizequest-filters-panel .prizequest-filter-panel-title,
body.prizequest-page #prizequest-filters-panel .pq-filter-drill-row,
body.prizequest-page #prizequest-filters-panel .pq-filter-drill-row-label,
body.prizequest-page #prizequest-filters-panel .pq-filter-drill-row-meta,
body.prizequest-page #prizequest-filters-panel .pq-filter-drill-pane-title,
body.prizequest-page #prizequest-filters-panel .pq-filter-drill-back,
body.prizequest-page #prizequest-filters-panel .prizequest-site-option,
body.prizequest-page #prizequest-filters-panel .prizequest-site-trigger {
font-size: 16px !important;
line-height: 1.35;
}
body.prizequest-page #prizequest-filters-panel .prizequest-custom,
body.prizequest-page #prizequest-filters-panel #prizequest-min-prize {
scroll-margin-bottom: 20px;
scroll-margin-top: 12px;
}
}