/* Cookie consent bar (consent.js). Own stylesheet so it loads on every page without depending on which of the site's many CSS bundles is present. z-index sits above the offer sticky bar (900) but below the lead modal (10000), so it never traps someone inside the form. */ .tw-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.9rem clamp(1rem, 4vw, 2rem); padding-bottom: max(0.9rem, env(safe-area-inset-bottom)); background: #0f172a; color: #e2e8f0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25); transform: translateY(100%); transition: transform 0.24s ease; } .tw-consent.is-in { transform: translateY(0); } .tw-consent__text { margin: 0; flex: 1 1 22rem; font-size: 0.85rem; line-height: 1.5; } .tw-consent__text a { color: #e6a17f; text-decoration: underline; } .tw-consent__actions { display: flex; gap: 0.5rem; flex: 0 0 auto; margin-left: auto; } .tw-consent__btn { min-height: 44px; padding: 0 1.1rem; border-radius: 8px; font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .tw-consent__btn--solid { background: #c96b42; color: #fff; border: 1px solid #c96b42; } .tw-consent__btn--solid:hover { background: #b25c36; border-color: #b25c36; } .tw-consent__btn--ghost { background: transparent; color: #e2e8f0; border: 1px solid #475569; } .tw-consent__btn--ghost:hover { border-color: #94a3b8; } .tw-consent__btn:focus-visible { outline: 2px solid #e6a17f; outline-offset: 2px; } /* Offer pages carry their own fixed CTA bar at the bottom on phones (.offer-sticky-bar, z-index 900, and body gets 72px of padding for it). Sitting at bottom:0 the consent bar covers that CTA completely — and a first-time mobile visitor is exactly the ad traffic these pages are for. Stack above it instead, so both stay usable. Scoped to the same breakpoint that shows the bar; above 768px the class is still on but the bar is not rendered, so the offset would be a gap for nothing. */ @media (max-width: 768px) { body.has-offer-sticky .tw-consent { bottom: 72px; padding-bottom: 0.9rem; } } @media (max-width: 560px) { .tw-consent__actions { margin-left: 0; width: 100%; } .tw-consent__btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { .tw-consent { transition: none; } }