/* Competitions (raffles v2, 27 Sep 2026). Built on the site's own tokens (style.css :root), so the Theme set in
   ArmsLink restyles these pages too. Everything is scoped under .cx-. */

.cx-hero { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%); color: var(--text-on-accent); padding: 44px 0 38px; }
.cx-hero h1 { color: var(--text-on-accent); font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: .5px; margin: 0 0 8px; text-transform: uppercase; }
.cx-hero p { margin: 0; font-size: 17px; opacity: .92; max-width: 640px; }
.cx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.cx-step { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.cx-step b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; font-weight: 800; }
.cx-step span { font-size: 14px; line-height: 1.4; }
.cx-step strong { display: block; font-size: 15px; }
@media (max-width: 820px) { .cx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cx-section { padding: 34px 0 10px; }
.cx-section h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; margin: 0 0 4px; text-transform: uppercase; color: var(--text-primary); }
.cx-section .cx-sub { margin: 0 0 20px; color: var(--text-muted); }

.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.cx-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column;
    text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.cx-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.10); transform: translateY(-2px); }
.cx-card-img { position: relative; aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; border-bottom: 1px solid var(--border); }
.cx-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; }
.cx-badge { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
    background: var(--accent); color: var(--text-on-accent); }
.cx-badge.soon { background: #1a1a2e; }
.cx-badge.done { background: #6b7280; }
.cx-badge.win { background: #f5b301; color: #1a1a2e; }
.cx-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cx-card-title { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--text-primary); }
.cx-price { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.cx-price small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.cx-meter { height: 8px; border-radius: 999px; background: var(--bg-secondary); overflow: hidden; }
.cx-meter i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cx-meter-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); }
.cx-meter-line b { color: var(--text-primary); }
.cx-draw { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.cx-draw svg { flex: none; color: var(--accent); }

.cx-empty { text-align: center; padding: 50px 20px; border: 1px dashed var(--border); border-radius: var(--radius-xl); color: var(--text-muted); background: var(--bg-card); }
.cx-empty h3 { color: var(--text-primary); margin: 0 0 6px; }

.cx-lookup { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.cx-lookup label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.cx-lookup input { width: 100%; box-sizing: border-box; height: 44px; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px; font-size: 15px; font-family: inherit; }
.cx-lookup-out { grid-column: 1 / -1; }
@media (max-width: 700px) { .cx-lookup { grid-template-columns: 1fr; } }
.cx-tickets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cx-ticket { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: 15px; letter-spacing: 1px; padding: 7px 12px; border-radius: 8px;
    background: var(--accent-glow-strong); color: var(--accent-dim); border: 1px dashed var(--border-accent); }
.cx-ticket.won { background: #f5b301; color: #1a1a2e; border-color: #d69b00; }
.cx-ticket.muted { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border); }

/* ── One competition ─────────────────────────────────────────── */
/* One grid: the photo with the prize and how it works under it on the left, the title and ticket box on the right
   (spanning both rows), so neither column leaves a hole beside a long one. On a phone, in buying order: the photo,
   the title and ticket box, then the details. */
.cx-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media summary" "info summary"; grid-template-rows: auto 1fr;
    column-gap: 34px; row-gap: 22px; padding: 30px 0 50px; align-items: start; }
.cx-media { grid-area: media; }
.cx-summary { grid-area: summary; }
.cx-detail > .cx-info { grid-area: info; }
@media (max-width: 900px) {
    .cx-detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "summary" "info"; grid-template-rows: none; padding: 16px 0 36px; row-gap: 18px; }
}
.cx-photo { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; overflow: hidden; }
/* Laid over the whole frame and scaled to fit, so the complete picture always shows, whatever its shape */
.cx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; box-sizing: border-box; }
@media (max-width: 900px) { .cx-photo { aspect-ratio: 16 / 10; } .cx-photo img { padding: 12px; } }
.cx-crumb { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.cx-crumb a { color: var(--accent); text-decoration: none; }
.cx-title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; line-height: 1.08; margin: 0 0 8px; text-transform: uppercase; color: var(--text-primary); }
.cx-value { color: var(--text-muted); font-size: 15px; margin-bottom: 18px; }
/* The figures and how far sales have got, in one card: the three numbers side by side with thin dividers, the bar
   under them */
.cx-stats { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px 18px 14px; margin-bottom: 18px; }
.cx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.cx-fact { padding: 0 14px; border-left: 1px solid var(--border); }
.cx-fact:first-child { padding-left: 0; border-left: 0; }
.cx-fact span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); font-weight: 600; }
.cx-fact b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--text-primary); margin-top: 2px; line-height: 1.1; }
.cx-fact small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.cx-fact.hot b, .cx-fact.hot small { color: #c0392b; }
.cx-fact.hot small { font-weight: 700; }
.cx-hotword { color: #c0392b; }
/* What is happening now: short lines with a dot, under the bar */
.cx-pulse { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: 13px; color: var(--text-secondary); }
.cx-pulse li { position: relative; padding-left: 14px; }
.cx-pulse li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.cx-pulse b { color: var(--text-primary); }
.cx-stats .cx-meter { height: 10px; }
.cx-stats .cx-meter-line { margin-top: 8px; }
/* The countdown: a light card like the figures above, the four numbers in soft accent tiles, the date on the right */
.cx-cd { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px 16px; margin-bottom: 18px; }
.cx-cd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cx-cd-head .cx-q-title { margin: 0; }
.cx-cd-when { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.cx-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cx-countdown div { text-align: center; background: var(--accent-glow); border-radius: var(--radius-lg); padding: 10px 4px 9px; }
.cx-countdown b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.cx-countdown span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px; color: var(--text-muted); font-weight: 600; }

.cx-enter { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-card); overflow: hidden; box-shadow: 0 10px 30px rgba(16, 24, 40, .08); }
.cx-enter-head { background: var(--accent); color: var(--text-on-accent); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.cx-enter-head span:first-child { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.cx-enter-head span:last-child { background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 14px; }
.cx-enter-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; counter-reset: cxstep; }
.cx-q-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 6px; }
/* The steps are numbered by the page itself (1 Answer · 2 How many · 3 Confirm, or without the question 1 · 2) */
/* (.cx-num: .cx-step is the competitions page's step cards) */
.cx-num { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 13px; margin-bottom: 12px; }
.cx-num::before { counter-increment: cxstep; content: counter(cxstep); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
    color: #fff; display: grid; place-items: center; font-size: 12.5px; letter-spacing: 0; }
.cx-locked .cx-num::before { background: var(--text-muted); }
.cx-hint { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }
.cx-hint[hidden] { display: none; }
.cx-need { text-align: center; margin-top: -8px; }
.cx-q { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; line-height: 1.35; }
.cx-options { display: grid; gap: 8px; }
.cx-option { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; cursor: pointer; font-size: 15px; background: #fff; transition: border-color .15s, background .15s; }
.cx-option:hover { border-color: var(--accent); }
.cx-option input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.cx-option.picked { border-color: var(--accent); background: var(--accent-glow); }
.cx-option.right { border-color: var(--success); background: rgba(39,174,96,.08); }
.cx-option.wrong { border-color: var(--error); background: rgba(230,81,99,.07); }
.cx-note { font-size: 14px; border-radius: var(--radius); padding: 10px 12px; }
.cx-note.ok { background: rgba(39,174,96,.10); color: #1e7d45; }
.cx-note.bad { background: rgba(230,81,99,.10); color: #b0263a; }
.cx-note.info { background: var(--bg-surface); color: var(--text-secondary); }
.cx-locked { opacity: .45; pointer-events: none; }
.cx-qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.cx-stepper button { width: 44px; height: 46px; border: 0; background: var(--bg-surface); font-size: 22px; cursor: pointer; color: var(--text-primary); }
.cx-stepper button:disabled { opacity: .4; cursor: default; }
.cx-stepper input { width: 64px; height: 46px; border: 0; text-align: center; font-size: 20px; font-weight: 800; font-family: inherit; -moz-appearance: textfield; }
.cx-stepper input::-webkit-outer-spin-button, .cx-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Quick picks: how many, and the odds each gives */
.cx-picks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.cx-chip { border: 1.5px solid var(--border); background: #fff; border-radius: var(--radius-lg); padding: 9px 8px 8px; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-primary); transition: border-color .15s, background .15s; }
.cx-chip b { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1; }
.cx-chip small { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.cx-chip:hover { border-color: var(--accent); }
.cx-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-glow); }
.cx-chip[aria-pressed="true"] b, .cx-chip[aria-pressed="true"] small { color: var(--accent); }
/* Your chance with the tickets picked: tickets already held (dark), the ones being added (accent), out of every ticket */
.cx-chance { margin-top: 14px; background: var(--bg-surface); border-radius: var(--radius-lg); padding: 12px 14px; }
.cx-chance-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cx-chance-top span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); }
.cx-chance-top b { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
.cx-chance-bar { display: flex; height: 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); overflow: hidden; margin: 10px 0 8px; }
.cx-chance-bar i { display: block; height: 100%; min-width: 0; transition: width .25s ease; }
.cx-chance-bar i.own { background: var(--text-primary); }
.cx-chance-bar i.new { background: var(--accent); min-width: 4px; }
.cx-chance p { margin: 0; font-size: 13px; color: var(--text-secondary); }
/* The signed-in buyer's own tickets */
.cx-mine { border: 1.5px solid var(--success); background: rgba(39,174,96,.06); border-radius: var(--radius-lg); padding: 12px 14px; }
.cx-mine-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.cx-mine-head b { color: #1e7d45; font-size: 15px; }
.cx-mine-head a { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.cx-mine-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-mine-list .cx-ticket { margin: 0; }
.cx-mine-more { align-self: center; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.cx-mine p { margin: 10px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.cx-total small { margin-left: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.cx-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: 16px; }
.cx-total span { color: var(--text-muted); }
.cx-total b { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--text-primary); }
.cx-confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-secondary); line-height: 1.45; }
.cx-confirm input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.cx-cta { width: 100%; height: 54px; font-size: 17px; font-weight: 800; letter-spacing: .3px; }
.cx-cta:disabled { opacity: .5; cursor: not-allowed; }
.cx-closed { padding: 20px; text-align: center; }
.cx-closed h3 { margin: 0 0 6px; font-size: 20px; }

.cx-winner { border-radius: var(--radius-xl); padding: 22px; background: linear-gradient(135deg, #1a1a2e, #2a2f4a); color: #fff; text-align: center; }
.cx-winner .cx-ticket { font-size: 26px; padding: 10px 18px; margin: 10px 0; }
.cx-winner h3 { margin: 0; font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: .5px; }
.cx-winner p { margin: 6px 0 0; opacity: .8; }

.cx-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cx-info h2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px; }
.cx-prize, .cx-rules { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px 22px; }
/* Both columns end level on a computer: the last card on each side stretches to the taller one's bottom (How it works
   with its rules link at its foot, or the ticket box), instead of one column stopping short */
@media (min-width: 901px) {
    .cx-detail > .cx-info, .cx-detail > .cx-summary { align-self: stretch; }   /* the grid starts everything at the top */
    .cx-detail > .cx-info { grid-template-rows: auto 1fr; }
    .cx-rules { display: flex; flex-direction: column; }
    .cx-trust { margin-top: auto !important; }
    .cx-summary { display: flex; flex-direction: column; }
    .cx-summary > .cx-enter, .cx-summary > .cx-winner { flex: 1 1 auto; }
}
.cx-desc { color: var(--text-secondary); line-height: 1.7; font-size: 15px; }
/* The site's reset takes list bullets away: each rule gets a small accent dot of its own */
.cx-rules ul { list-style: none; margin: 0; padding: 0; color: var(--text-secondary); line-height: 1.6; font-size: 14.5px; }
.cx-rules li { position: relative; padding-left: 18px; }
.cx-rules li::before { content: ''; position: absolute; left: 3px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cx-rules li + li { margin-top: 8px; }
.cx-rules p { margin: 14px 0 0 !important; }
.cx-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.cx-trust-i { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-surface); border-radius: var(--radius-lg); padding: 12px; }
.cx-trust-i svg { flex: none; color: var(--accent); margin-top: 1px; }
.cx-trust-i b { display: block; font-size: 14px; color: var(--text-primary); }
.cx-trust-i span { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin-top: 1px; }
@media (max-width: 480px) { .cx-trust { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .cx-prize, .cx-rules { padding: 16px 16px; } .cx-info h2 { font-size: 18px; } }

/* Share: WhatsApp in its own green (people look for it), the link and the phone's share sheet plain */
.cx-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 20px; }
.cx-share-wa, .cx-share-btn { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 6px; border-radius: 999px; font-family: inherit;
    font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
/* The icon sits in its own circle at the start of each button */
.cx-share-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; transition: background .15s, color .15s; }
/* WhatsApp: its own green, white lettering (the darker end keeps it readable), a soft green glow */
.cx-share-wa { background: linear-gradient(135deg, #25d366 0%, #128c4a 100%); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(18, 140, 74, .28); }
.cx-share-wa .cx-share-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.cx-share-wa:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(18, 140, 74, .36); }
.cx-share-wa:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(18, 140, 74, .3); }
/* Copy link and More: quiet, the icon in the site's blue */
.cx-share-btn { background: #fff; color: var(--text-primary); border: 1.5px solid var(--border); padding-right: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.cx-share-btn .cx-share-ico { background: var(--accent-glow); color: var(--accent); }
.cx-share-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(11, 121, 191, .14); }
.cx-share-btn:hover .cx-share-ico { background: var(--accent); color: #fff; }
.cx-share-btn.is-done { border-color: #27ae60; color: #1e7d45; }
.cx-share-btn.is-done .cx-share-ico { background: #27ae60; color: #fff; }
.cx-share-btn[hidden] { display: none; }
.cx-share-short { display: none; }
.cx-share-wa:focus-visible, .cx-share-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cx-share-wa, .cx-share-btn { transition: none; } .cx-share-wa:hover, .cx-share-btn:hover { transform: none; } }
/* A phone: the three on one row, sharing the width, the words shortened ("WhatsApp", "Copy") */
@media (max-width: 480px) {
    .cx-share { flex-wrap: nowrap; gap: 6px; }
    .cx-share-wa, .cx-share-btn { flex: 1 1 auto; justify-content: center; min-width: 0; height: 44px; padding: 0 10px 0 5px; gap: 7px; font-size: 14px; }
    .cx-share-ico { width: 30px; height: 30px; }
    .cx-share-long { display: none; }
    .cx-share-short { display: inline; }
}

/* Sold out: one card instead of the figures and the ticket box */
.cx-soldout { display: flex; flex-direction: column; }
.cx-so-head { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%); color: var(--text-on-accent); padding: 24px 22px 22px; text-align: center; }
.cx-so-badge { display: inline-block; background: #ffc425; color: #1a1a2e; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.cx-so-head h2 { margin: 12px 0 6px; color: #fff; font-family: var(--font-display); font-size: 32px; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.cx-so-head p { margin: 0; color: rgba(255,255,255,.88); font-size: 15px; }
.cx-so-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; }
.cx-so-draw { display: flex; gap: 14px; align-items: center; background: var(--accent-glow); border-radius: var(--radius-lg); padding: 14px 16px; }
.cx-so-draw svg { flex: none; color: var(--accent); }
.cx-so-draw span { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); }
.cx-so-draw b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.cx-so-draw small { display: block; font-size: 13px; color: var(--text-secondary); }
.cx-soldout .cx-cta { margin-top: auto; }
.cx-so-full { height: 10px; }
.cx-so-full i { background: linear-gradient(90deg, var(--accent), #27ae60); }
.cx-so-next { border: 1.5px dashed var(--border-accent, var(--border)); border-radius: var(--radius-lg); padding: 16px; background: #fff; }
.cx-so-next b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; color: var(--text-primary); }
.cx-so-next p { margin: 4px 0 12px; font-size: 14px; color: var(--text-secondary); }
.cx-so-form { display: flex; gap: 8px; }
.cx-so-form input { flex: 1 1 auto; min-width: 0; height: 44px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 0 12px; font-family: inherit; font-size: 15px; }
.cx-so-form input:focus { outline: none; border-color: var(--accent); }
.cx-so-form .btn { height: 44px; padding: 0 18px; white-space: nowrap; }
/* Sold out on a computer: only the photo on the left, so its frame runs the height of the sold-out card */
@media (min-width: 901px) {
    .cx-detail.is-soldout { grid-template-areas: "media summary" "media summary"; }
    .cx-detail.is-soldout .cx-media { align-self: stretch; display: flex; }
    .cx-detail.is-soldout .cx-photo { aspect-ratio: auto; flex: 1 1 auto; min-height: 420px; }
}

/* Competition cards: the prize and its worth, the price with the odds of one entry, what's left, the draw, a clear button */
.cx-card-prize { font-size: 14px; color: var(--text-secondary); line-height: 1.4; margin-top: -4px; }
.cx-card-prize b { color: var(--text-primary); font-weight: 700; }
.cx-card-prize .cx-ticket { margin-left: 4px; }
.cx-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cx-odds-chip { font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-glow); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.cx-card .cx-meter { margin-bottom: 7px; }
.cx-meter-line .cx-low { color: #c0392b; font-weight: 800; }
.cx-card-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: var(--radius-lg); background: var(--accent);
    color: var(--text-on-accent); font-weight: 800; font-size: 15px; transition: background .15s; }
.cx-card-cta.quiet { background: var(--bg-surface); color: var(--text-primary); }
.cx-card:hover .cx-card-cta { background: var(--accent-dim); }
.cx-card:hover .cx-card-cta.quiet { background: var(--accent-glow-strong); }
.cx-card .cx-draw { margin-top: auto; }

/* Competitions switched off: one calm page with a way to hear about the next one */
.cx-off { max-width: 620px; margin: 0 auto; padding: 70px 0 80px; text-align: center; }
.cx-off-icon { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: var(--accent-glow); color: var(--accent); display: grid; place-items: center; }
.cx-off h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); font-weight: 800; text-transform: uppercase; margin: 0 0 10px; color: var(--text-primary); }
.cx-off p { color: var(--text-secondary); font-size: 16px; line-height: 1.6; margin: 0 auto 22px; max-width: 520px; }
.cx-off-form { max-width: 460px; margin: 0 auto; }
.cx-off-links { margin-top: 26px; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.cx-off-link { font-weight: 700; color: var(--accent); text-decoration: none; }
@media (max-width: 480px) { .cx-off { padding: 44px 0 56px; } .cx-off-form { flex-direction: column; } }