/*
 * Odds Boost List Block — scoped Tailwind utility shim
 * -----------------------------------------------------
 * Generated for older sites that don't use Tailwind/Alpine bundling.
 * Every rule is scoped to `.odds-boosts-list-block` so it can't leak
 * out and clash with the surrounding site styles.
 *
 * Loaded after the main stylesheet via layout.twig (gated by
 * `entry.activateOddsBoosts`).
 */

/* -------------------------------------------------- *
 * Webfont — Proxima Nova Semibold
 * -------------------------------------------------- *
 * The site registers each weight as its own family at font-weight 400
 * (see resources/css/style.css). The block's `.font-semibold` text was
 * rendering as faux-bold on the regular family (hence the blurry look);
 * import the real semibold face here so the shim is self-contained even on
 * pages that don't already load it. */
@font-face {
    font-family: 'proxima_novasemibold';
    src: url("/assets/fonts/proximaNova/proximanova-semibold-webfont.woff2") format("woff2"),
         url("/assets/fonts/proximaNova/proximanova-semibold-webfont.woff") format("woff"),
         url("/assets/fonts/proximaNova/proximanova-semibold-webfont.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------- *
 * Reset (scoped)
 * -------------------------------------------------- */
.odds-boosts-list-block,
.odds-boosts-list-block *,
.odds-boosts-list-block *::before,
.odds-boosts-list-block *::after {
    box-sizing: border-box;
}

.odds-boosts-list-block button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.odds-boosts-list-block a {
    text-decoration: none;
    color: inherit;
}

/* The host stylesheet (Bootstrap reboot) applies a strong native focus ring to
   `button:focus` (`outline: 5px auto -webkit-focus-ring-color`), which shows as
   a heavy black ring when buttons / dropdown triggers are clicked. Neutralise it
   for the block's controls, but keep a subtle ring for keyboard-only focus so the
   component stays accessible. */
.odds-boosts-list-block button:focus,
.odds-boosts-list-block .btn:focus,
.odds-boosts-list-block a:focus {
    outline: none;
}
.odds-boosts-list-block button:focus-visible,
.odds-boosts-list-block .btn:focus-visible,
.odds-boosts-list-block a:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

.odds-boosts-list-block input[type="text"] {
    appearance: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font: inherit;
    color: inherit;
    /* Reset surrounding-site overrides that bleed into the search box
       (uppercase / wide letter spacing on global input styling). */
    letter-spacing: normal;
    text-transform: none;
    font-weight: normal;
}

/* The search field carries the `.btn` class; we want the input to behave
   like a plain text field, not a flex container. */
.odds-boosts-list-block input.btn {
    display: inline-block;
    text-align: left;
    justify-content: flex-start;
    gap: 0;
}

/* -------------------------------------------------- *
 * Checkbox component (used by the Bookmakers/Sports
 * dropdowns — the checkbox macro outputs `.ui-checkbox`
 * and `.ui-checkbox-label`)
 * -------------------------------------------------- */
.odds-boosts-list-block .ui-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.125rem 0;
    margin: 0;
}

.odds-boosts-list-block .ui-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    flex: none;
    margin: 0;
    border: 1px solid #d4d4d4;
    border-radius: 0.25rem;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s, border-color 0.15s;
}
.odds-boosts-list-block .ui-checkbox:hover {
    border-color: #a3a3a3;
}
.odds-boosts-list-block .ui-checkbox:checked {
    background-color: #16a34a;
    border-color: #16a34a;
}
.odds-boosts-list-block .ui-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.odds-boosts-list-block .ui-checkbox:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 1px;
}

/* Bookmaker logo swatch inside the dropdown.
   - `w-5` only sets width, so SVGs that aren't square stretched the box
     vertically — force a 1:1 aspect ratio so every row is consistent.
   - When `companyColor` is empty the inline `style="background-color: ;"`
     is ignored by the browser, leaving an invisible white-on-white square;
     fall back to a neutral grey so the row stays visually aligned. */
.odds-boosts-list-block .ui-checkbox-label .p-1.rounded.w-5 {
    background-color: #f5f5f5;
    width: 1.5rem;
    height: 1.5rem;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.odds-boosts-list-block .ui-checkbox-label .p-1.rounded.w-5 > svg,
.odds-boosts-list-block .ui-checkbox-label .p-1.rounded.w-5 > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Same img.transform() fallback (a `.ar` aspect box wrapping an <img>) can land
   in the dropdown swatch — flatten it and constrain the image. */
.odds-boosts-list-block .ui-checkbox-label .p-1.rounded.w-5 .ar {
    padding-bottom: 0 !important;
    width: 100%;
    height: 100%;
    line-height: 0;
}
.odds-boosts-list-block .ui-checkbox-label .p-1.rounded.w-5 .ar img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Bookmaker logo chip on the card/row — keep the injected logo scaled to fit
   the coloured square. The logo is either an inline square-logo.svg OR, when no
   SVG exists for that company title (e.g. matched on amCompanyName instead),
   a fallback from img.transform() which renders as
   `<div class="ar" style="padding-bottom:…"><img class="lazy"></div>`.
   That <img> has no width/height and the `.ar` box is unstyled here, so the
   image would otherwise display at its full natural size and blow up the card.
   Clip the chip and constrain every descendant image, and flatten the `.ar`
   aspect-ratio box. */
.odds-boosts-list-block .w-10.rounded {
    overflow: hidden;
}
.odds-boosts-list-block .w-10.rounded .ar {
    padding-bottom: 0 !important;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
}
.odds-boosts-list-block .w-10.rounded svg,
.odds-boosts-list-block .w-10.rounded img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.odds-boosts-list-block svg {
    display: inline-block;
    vertical-align: middle;
}

/* -------------------------------------------------- *
 * Helper classes referenced by the markup
 * (kept light — only what the block needs)
 * -------------------------------------------------- */
.odds-boosts-list-block .container-lg {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}
@media (min-width: 1024px) {
    .odds-boosts-list-block .container-lg {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .odds-boosts-list-block .container-lg {
        max-width: 1200px;
    }
}

.odds-boosts-list-block .wrapper-4 > * + * {
    margin-top: 1rem;
}

.odds-boosts-list-block .title-md {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
}

.odds-boosts-list-block .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    background: #fff;
    color: #262626;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.odds-boosts-list-block .btn:hover {
    background: #f5f5f5;
}
.odds-boosts-list-block .btn.btn-sm {
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
}
.odds-boosts-list-block .btn.btn-xs {
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
}
.odds-boosts-list-block .btn.ghost {
    background: transparent;
    border-color: transparent;
}
.odds-boosts-list-block .btn.ghost:hover {
    background: #f5f5f5;
}
.odds-boosts-list-block .btn.filled {
    background: #f5f5f5;
    border-color: #f5f5f5;
}
.odds-boosts-list-block .btn.success {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
    height: 40px;
}
.odds-boosts-list-block .btn.success:hover {
    background: #15803d;
    border-color: #15803d;
}
.odds-boosts-list-block .btn.primary {
    background: #ef4136;
    border-color: #ef4136;
    color: #fff;
}
.odds-boosts-list-block .btn.primary:hover {
    background: #d93238;
    border-color: #d93238;
}

/* -------------------------------------------------- *
 * Display / box
 * -------------------------------------------------- */
.odds-boosts-list-block .block { display: block; }
.odds-boosts-list-block .inline-block { display: inline-block; }
.odds-boosts-list-block .flex { display: flex; }
.odds-boosts-list-block .inline-flex { display: inline-flex; }
.odds-boosts-list-block .grid { display: grid; gap:16px; }
.odds-boosts-list-block .hidden { display: none; }

.odds-boosts-list-block .flex-col { flex-direction: column; }
.odds-boosts-list-block .flex-row { flex-direction: row; }
.odds-boosts-list-block .flex-wrap { flex-wrap: wrap; }
.odds-boosts-list-block .flex-nowrap { flex-wrap: nowrap; }
.odds-boosts-list-block .flex-grow,
.odds-boosts-list-block .grow { flex-grow: 1; }
.odds-boosts-list-block .flex-none { flex: none; }
.odds-boosts-list-block .flex-auto { flex: 1 1 auto; }

.odds-boosts-list-block .items-start { align-items: flex-start; }
.odds-boosts-list-block .items-center { align-items: center; }
.odds-boosts-list-block .items-baseline { align-items: baseline; }
.odds-boosts-list-block .justify-start { justify-content: flex-start; }
.odds-boosts-list-block .justify-center { justify-content: center; }
.odds-boosts-list-block .justify-between { justify-content: space-between; }

.odds-boosts-list-block .text-left { text-align: left; }
.odds-boosts-list-block .text-center { text-align: center; }

.odds-boosts-list-block .gap-2 { gap: 0.5rem; }
.odds-boosts-list-block .gap-4 { gap: 1rem; }

.odds-boosts-list-block .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* -------------------------------------------------- *
 * Position
 * -------------------------------------------------- */
.odds-boosts-list-block .relative { position: relative; }
.odds-boosts-list-block .absolute { position: absolute; }
.odds-boosts-list-block .fixed    { position: fixed; }
.odds-boosts-list-block .inset-auto { top: auto; right: auto; bottom: auto; left: auto; }
.odds-boosts-list-block .inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.odds-boosts-list-block .inset-x-0 { left: 0; right: 0; }

.odds-boosts-list-block .top-0       { top: 0; }
.odds-boosts-list-block .top-105     { top: 105px; }
.odds-boosts-list-block .top-full    { top: 100%; }
.odds-boosts-list-block .top-1\/2    { top: 50%; }
.odds-boosts-list-block .top-8\.75   { top: 2.1875rem; }   /* 35px */
.odds-boosts-list-block .top-12\.5   { top: 3.125rem; }    /* 50px */
.odds-boosts-list-block .top-20      { top: 5rem; }        /* 80px */
.odds-boosts-list-block .left-0      { left: 0; }
.odds-boosts-list-block .left-3      { left: 0.75rem; }
.odds-boosts-list-block .right-0     { right: 0; }
.odds-boosts-list-block .right-3     { right: 0.75rem; }
.odds-boosts-list-block .-translate-y-1\/2 { transform: translateY(-50%); }

.odds-boosts-list-block .z-10 { z-index: 10; }
.odds-boosts-list-block .z-40 { z-index: 40; }
.odds-boosts-list-block .z-50 { z-index: 500; }
.odds-boosts-list-block .z-\[100\] { z-index: 100; }

/* -------------------------------------------------- *
 * Sizing
 * -------------------------------------------------- */
.odds-boosts-list-block .w-2      { width: 0.5rem; }
.odds-boosts-list-block .w-3      { width: 0.75rem; }
.odds-boosts-list-block .w-5      { width: 1.25rem; }
.odds-boosts-list-block .w-8      { width: 2rem; }
.odds-boosts-list-block .w-10     { width: 2.5rem; }
.odds-boosts-list-block .w-14     { width: 3.5rem; }
.odds-boosts-list-block .w-15     { width: 3.75rem; }
.odds-boosts-list-block .w-16     { width: 4rem; }
.odds-boosts-list-block .w-18     { width: 4.5rem; }
.odds-boosts-list-block .w-20     { width: 5rem; }
.odds-boosts-list-block .w-48     { width: 12rem; }
.odds-boosts-list-block .w-60     { width: 15rem; }
.odds-boosts-list-block .w-64     { width: 16rem; }
.odds-boosts-list-block .w-full   { width: 100%; }
.odds-boosts-list-block .w-1\/6   { width: 16.666667%; }

.odds-boosts-list-block .h-1     { height: 0.25rem; }
.odds-boosts-list-block .h-2     { height: 0.5rem; }
.odds-boosts-list-block .h-2\.5  { height: 0.625rem; }
.odds-boosts-list-block .h-3     { height: 0.75rem; }
.odds-boosts-list-block .h-3\.5  { height: 0.875rem; }
.odds-boosts-list-block .h-4     { height: 1rem; }
.odds-boosts-list-block .h-5     { height: 1.25rem; }
.odds-boosts-list-block .h-px    { height: 1px; }
.odds-boosts-list-block .h-\[1em\] { height: 1em; }

/* Scroll-margin so the smooth-scroll-to-list lands below the sticky bar */
.odds-boosts-list-block .scroll-mt-16 { scroll-margin-top: 4rem; }

.odds-boosts-list-block .min-w-8   { min-width: 2rem; }
.odds-boosts-list-block .min-w-14  { min-width: 3.5rem; }
.odds-boosts-list-block .min-w-15  { min-width: 3.5rem; }
.odds-boosts-list-block .min-w-16  { min-width: 4rem; }
.odds-boosts-list-block .min-w-18  { min-width: 4.5rem; }
.odds-boosts-list-block .min-w-38  { min-width: 9.5rem; }
.odds-boosts-list-block .min-w-48  { min-width: 12rem; }
.odds-boosts-list-block .min-w-64  { min-width: 16rem; }

.odds-boosts-list-block .max-w-45  { max-width: 11.25rem; }

/* Arbitrary-value width classes used by the card partial.
   The Craft 5 site renders these via Tailwind JIT; we shim them here. */
.odds-boosts-list-block .min-w-\[335px\] { min-width: 335px; }
.odds-boosts-list-block .max-w-\[385px\] { max-width: 385px; }

.odds-boosts-list-block .min-h-56\.25 { min-height: 14.0625rem; }

.odds-boosts-list-block .max-h-10 { max-height: 2.5rem; }
.odds-boosts-list-block .max-h-64 { max-height: 16rem; }

/* -------------------------------------------------- *
 * Padding
 * -------------------------------------------------- */
.odds-boosts-list-block .p-0\.5 { padding: 0.125rem; }
.odds-boosts-list-block .p-1    { padding: 0.25rem; }
.odds-boosts-list-block .p-2    { padding: 0.5rem; }
.odds-boosts-list-block .p-2\.5 { padding: 0.625rem; }
.odds-boosts-list-block .p-3    { padding: 0.75rem; }
.odds-boosts-list-block .p-4    { padding: 1rem; }

.odds-boosts-list-block .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.odds-boosts-list-block .px-2   { padding-left: 0.5rem;  padding-right: 0.5rem; }
.odds-boosts-list-block .px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.odds-boosts-list-block .px-4   { padding-left: 1rem;    padding-right: 1rem; }
.odds-boosts-list-block .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.odds-boosts-list-block .py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.odds-boosts-list-block .py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.odds-boosts-list-block .py-8   { padding-top: 2rem;   padding-bottom: 2rem; }
.odds-boosts-list-block .py-12  { padding-top: 3rem;   padding-bottom: 3rem; }

.odds-boosts-list-block .pl-2     { padding-left: 0.5rem; }
.odds-boosts-list-block .pl-9     { padding-left: 2.25rem; }
.odds-boosts-list-block .pl-1\.25 { padding-left: 0.3125rem; }
.odds-boosts-list-block .\!pl-9   { padding-left: 2.25rem !important; }

.odds-boosts-list-block .pb-0\.25 { padding-bottom: 0.0625rem; }
.odds-boosts-list-block .pb-3     { padding-bottom: 0.75rem; }
.odds-boosts-list-block .pb-4     { padding-bottom: 1rem; }

.odds-boosts-list-block .pt-0\.5  { padding-top: 0.125rem; }
.odds-boosts-list-block .pt-0\.75 { padding-top: 0.1875rem; }
.odds-boosts-list-block .pt-1     { padding-top: 0.25rem; }
.odds-boosts-list-block .pt-2     { padding-top: 0.5rem; }
.odds-boosts-list-block .pt-0\.25 { padding-top: 0.0625rem; }

/* -------------------------------------------------- *
 * Margin
 * -------------------------------------------------- */
.odds-boosts-list-block .m-3        { margin: 0.75rem; }
.odds-boosts-list-block .ml-1       { margin-left: 0.25rem; }
.odds-boosts-list-block .ml-2       { margin-left: 0.5rem; }
.odds-boosts-list-block .ml-auto    { margin-left: auto; }
.odds-boosts-list-block .mr-2       { margin-right: 0.5rem; }
.odds-boosts-list-block .mr-18      { margin-right: 4.5rem; }

.odds-boosts-list-block .mt-0       { margin-top: 0; }
.odds-boosts-list-block .mt-0\.25   { margin-top: 0.0625rem; }
.odds-boosts-list-block .mt-0\.5    { margin-top: 0.125rem; }
.odds-boosts-list-block .mt-1       { margin-top: 0.25rem; }
.odds-boosts-list-block .mt-1\.25   { margin-top: 0.3125rem; }
.odds-boosts-list-block .mt-2       { margin-top: 0.5rem; }
.odds-boosts-list-block .mt-3       { margin-top: 0.75rem; }
.odds-boosts-list-block .mt-4       { margin-top: 1rem; }

.odds-boosts-list-block .mb-0\.25   { margin-bottom: 0.0625rem; }
.odds-boosts-list-block .mb-0\.5    { margin-bottom: 0.125rem; }
.odds-boosts-list-block .mb-1\.25   { margin-bottom: 0.3125rem; }
.odds-boosts-list-block .mb-2       { margin-bottom: 0.5rem; }
.odds-boosts-list-block .mb-3       { margin-bottom: 0.75rem; }
.odds-boosts-list-block .mb-4       { margin-bottom: 1rem; }

/* `space-x-*` / `space-y-*` — gap between siblings (Tailwind selector pattern) */
.odds-boosts-list-block .space-x-1   > * + * { margin-left: 0.25rem; }
.odds-boosts-list-block .space-x-2   > * + * { margin-left: 0.5rem;  }
.odds-boosts-list-block .space-x-3   > * + * { margin-left: 0.75rem; }
.odds-boosts-list-block .space-x-6   > * + * { margin-left: 1.5rem;  }
.odds-boosts-list-block .space-x-4   > * + * { margin-left: 1rem;    }
/* The card carousel begins with an Alpine `<template x-for>` element that
   stays in the DOM as a placeholder; the rendered cards are inserted as
   siblings AFTER it. The selector `> * + *` would otherwise give the very
   first card a left margin (template + card matches). Zero it out so the
   first card sits flush with the container's content edge. */
.odds-boosts-list-block .space-x-1 > template + *,
.odds-boosts-list-block .space-x-2 > template + *,
.odds-boosts-list-block .space-x-3 > template + *,
.odds-boosts-list-block .space-x-4 > template + *,
.odds-boosts-list-block .space-x-6 > template + * { margin-left: 0; }

.odds-boosts-list-block .space-y-1    > * + * { margin-top: 0.25rem;   }
.odds-boosts-list-block .space-y-1\.25 > * + * { margin-top: 0.3125rem; }
.odds-boosts-list-block .space-y-2    > * + * { margin-top: 0.5rem;   }
.odds-boosts-list-block .space-y-3    > * + * { margin-top: 0.75rem;  }
.odds-boosts-list-block .space-y-4    > * + * { margin-top: 1rem;    }

/* -------------------------------------------------- *
 * Borders / radius
 * -------------------------------------------------- */
.odds-boosts-list-block .border          { border: 1px solid #e5e5e5; }
.odds-boosts-list-block .border-l        { border-left: 1px solid #e5e5e5; }
.odds-boosts-list-block .border-b        { border-bottom: 1px solid #e5e5e5; }
.odds-boosts-list-block .border-0        { border: 0; }

.odds-boosts-list-block .border-neutral-100 { border-color: #f5f5f5; }
.odds-boosts-list-block .border-neutral-200 { border-color: #e5e5e5; }
.odds-boosts-list-block .border-neutral-400 { border-color: #a3a3a3; }
.odds-boosts-list-block .border-zinc-200    { border-color: #e4e4e7; }

.odds-boosts-list-block .rounded       { border-radius: 0.25rem; }
.odds-boosts-list-block .rounded-t     { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.odds-boosts-list-block .rounded-md    { border-radius: 0.375rem; }
.odds-boosts-list-block .rounded-lg    { border-radius: 0.5rem; }
.odds-boosts-list-block .rounded-b-2xl { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.odds-boosts-list-block .rounded-full  { border-radius: 9999px; }

/* -------------------------------------------------- *
 * Background colours
 * -------------------------------------------------- */
.odds-boosts-list-block .bg-white        { background-color: #fff; }
.odds-boosts-list-block .bg-inherit      { background-color: inherit; }
.odds-boosts-list-block .bg-primary-500  { background-color: #ef4136; }
.odds-boosts-list-block .bg-black\/60    { background-color: rgba(0, 0, 0, 0.6); }
.odds-boosts-list-block .bg-neutral-50   { background-color: #fafafa; }
.odds-boosts-list-block .bg-neutral-100  { background-color: #f5f5f5; }
.odds-boosts-list-block .bg-rose-400     { background-color: #fb7185; }
.odds-boosts-list-block .bg-red-50       { background-color: #fef2f2; }
.odds-boosts-list-block .bg-red-500      { background-color: #ef4444; }
.odds-boosts-list-block .bg-orange-50    { background-color: #fff7ed; }
.odds-boosts-list-block .bg-orange-100   { background-color: #ffedd5; }
.odds-boosts-list-block .bg-green-50     { background-color: #f0fdf4; }
.odds-boosts-list-block .\!bg-neutral-100 { background-color: #f5f5f5 !important; }
.odds-boosts-list-block .\!bg-orange-100 { background-color: #ffedd5 !important; }

/* -------------------------------------------------- *
 * Typography
 * -------------------------------------------------- */
.odds-boosts-list-block .text-xxs { font-size: 0.625rem;  line-height: 1rem; }
.odds-boosts-list-block .text-xs  { font-size: 0.75rem;   line-height: 1rem; }
.odds-boosts-list-block .text-sm  { font-size: 0.875rem;  line-height: 1.25rem; }

.odds-boosts-list-block .font-medium   { font-weight: 500; }
/* Use the real semibold webfont instead of faux-bolding the regular family
   (which the browser blurs). The face is registered at weight 400, so keep the
   weight normal to avoid synthesising bold on top of it. */
.odds-boosts-list-block .font-semibold {
    font-family: 'proxima_novasemibold', Arial, Helvetica, sans-serif;
    font-weight: normal;
}

.odds-boosts-list-block .text-white       { color: #fff; }
.odds-boosts-list-block .text-red-50      { color: #fef2f2; }
.odds-boosts-list-block .text-neutral-400 { color: #a3a3a3; }
.odds-boosts-list-block .text-neutral-500 { color: #737373; }
.odds-boosts-list-block .text-neutral-600 { color: #525252; }
.odds-boosts-list-block .text-neutral-700 { color: #404040; }
.odds-boosts-list-block .text-neutral-800 { color: #262626; }
.odds-boosts-list-block .text-red-500     { color: #ef4444; }
.odds-boosts-list-block .text-orange-500  { color: #f97316; }
.odds-boosts-list-block .text-green-500   { color: #22c55e; }

.odds-boosts-list-block .line-through    { text-decoration: line-through; }
.odds-boosts-list-block .underline       { text-decoration: underline; }
.odds-boosts-list-block .whitespace-nowrap { white-space: nowrap; }
.odds-boosts-list-block .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* hover variants */
.odds-boosts-list-block .hover\:bg-neutral-100:hover { background-color: #f5f5f5; }
.odds-boosts-list-block .hover\:text-neutral-700:hover { color: #404040; }

/* -------------------------------------------------- *
 * Effects / transitions
 * -------------------------------------------------- */
.odds-boosts-list-block .shadow-md {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.odds-boosts-list-block .shadow-lg {
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.odds-boosts-list-block .shadow-xl {
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.odds-boosts-list-block .opacity-0  { opacity: 0; }
.odds-boosts-list-block .opacity-25 { opacity: 0.25; }
.odds-boosts-list-block .opacity-40 { opacity: 0.4; }
.odds-boosts-list-block .opacity-75 { opacity: 0.75; }
.odds-boosts-list-block .opacity-100 { opacity: 1; }

.odds-boosts-list-block .transition-opacity  { transition: opacity 0.15s ease-in-out; }
.odds-boosts-list-block .transition-transform { transition: transform 0.15s ease-in-out; }
.odds-boosts-list-block .duration-200 { transition-duration: 200ms; }
.odds-boosts-list-block .duration-300 { transition-duration: 300ms; }
.odds-boosts-list-block .ease-out     { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.odds-boosts-list-block .backdrop-blur-sm {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.odds-boosts-list-block .rotate-180 { transform: rotate(180deg); }
.odds-boosts-list-block .translate-y-0     { transform: translateY(0); }
.odds-boosts-list-block .-translate-y-full { transform: translateY(-100%); }

.odds-boosts-list-block .pointer-events-none { pointer-events: none; }
.odds-boosts-list-block .focus\:outline-none:focus { outline: none; }
.odds-boosts-list-block .\!ring-0 { box-shadow: none !important; }

.odds-boosts-list-block .overflow-hidden  { overflow: hidden; }
.odds-boosts-list-block .overflow-x-auto  { overflow-x: auto; }
.odds-boosts-list-block .overflow-y-auto  { overflow-y: auto; }

/* `!justify-start` / `!flex` from the markup */
.odds-boosts-list-block .\!justify-start { justify-content: flex-start !important; }
.odds-boosts-list-block .\!flex          { display: flex !important; }

/* Spinner (used in loading state) */
@keyframes odds-boosts-list-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.odds-boosts-list-block .animate-spin {
    animation: odds-boosts-list-spin 1s linear infinite;
}

/* Horizontal card-strip mask & hidden scrollbar */
@media (min-width: 768px) {
    .odds-boosts-list-block .\[scrollbar-width\:none\]      { scrollbar-width: none; }
    .odds-boosts-list-block .\[-ms-overflow-style\:none\]   { -ms-overflow-style: none; }
    .odds-boosts-list-block .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; }
}


.odds-boosts-list-block .\[mask-image\:linear-gradient\(to_right\,black_calc\(100\%_-_10px\)\,transparent\)\] {
    mask-image: linear-gradient(to right, black calc(100% - 10px), transparent);
}
.odds-boosts-list-block .\[-webkit-mask-image\:linear-gradient\(to_right\,black_calc\(100\%_-_10px\)\,transparent\)\] {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 10px), transparent);
}

/* Tailwind arbitrary child-selector classes used inside dropdowns */
.odds-boosts-list-block .\[\&\>span\]\:flex-grow > span { flex-grow: 1; }

/* -------------------------------------------------- *
 * Responsive — md (>= 768px)
 * -------------------------------------------------- */
@media (min-width: 768px) {
    .odds-boosts-list-block .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .odds-boosts-list-block .md\:max-w-45    { max-width: 11.25rem; }
}

@media (max-width: 768px) {
    .odds-boosts-list-block .mb2 { margin-bottom: 8px; }
    .odds-boosts-list-block .mb3 { margin-bottom: 12px; }
    .odds-boosts-list-block .mobile-marg { margin-right: 15px; }
}

/* -------------------------------------------------- *
 * Responsive — lg (>= 1024px)
 * -------------------------------------------------- */
@media (min-width: 1024px) {
    /* layout */
    .odds-boosts-list-block .lg\:flex           { display: flex; }
    .odds-boosts-list-block .lg\:grid           { display: grid; }
    .odds-boosts-list-block .lg\:flex-row        { flex-direction: row; }
    .odds-boosts-list-block .lg\:flex-col        { flex-direction: column; }
    .odds-boosts-list-block .lg\:flex-nowrap     { flex-wrap: nowrap; }
    .odds-boosts-list-block .lg\:flex-none       { flex: none; }
    .odds-boosts-list-block .lg\:flex-auto       { flex: 1 1 auto; }
    .odds-boosts-list-block .lg\:items-start     { align-items: flex-start; }
    .odds-boosts-list-block .lg\:justify-center  { justify-content: center; }
    .odds-boosts-list-block .lg\:justify-between { justify-content: space-between; }
    .odds-boosts-list-block .lg\:inline-block    { display: inline-block; }
    .odds-boosts-list-block .lg\:hidden          { display: none; }
    .odds-boosts-list-block .lg\:\!hidden        { display: none !important; }
    .odds-boosts-list-block .lg\:grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .odds-boosts-list-block .lg\:grid-cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .odds-boosts-list-block .lg\:gap-4           { gap: 1rem; }

    /* sizing */
    .odds-boosts-list-block .lg\:w-1\/6          { width: 16.666667%; }
    .odds-boosts-list-block .lg\:w-16            { width: 4rem; }
    .odds-boosts-list-block .lg\:w-20            { width: 5rem; }
    .odds-boosts-list-block .lg\:w-48            { width: 12rem; }
    .odds-boosts-list-block .lg\:w-full          { width: 100%; }
    .odds-boosts-list-block .lg\:max-w-none      { max-width: none; }
    .odds-boosts-list-block .lg\:min-w-0         { min-width: 0; }
    .odds-boosts-list-block .lg\:min-w-14        { min-width: 3.5rem; }
    .odds-boosts-list-block .lg\:min-w-16        { min-width: 4rem; }
    .odds-boosts-list-block .lg\:min-w-20        { min-width: 5rem; }
    .odds-boosts-list-block .lg\:min-w-38        { min-width: 9.5rem; }
    .odds-boosts-list-block .lg\:h-3\.5          { height: 0.875rem; }
    .odds-boosts-list-block .lg\:h-10            { height: 2.5rem; }
    .odds-boosts-list-block .lg\:grow            { flex-grow: 1; }

    /* spacing */
    .odds-boosts-list-block .lg\:p-0             { padding: 0; }
    .odds-boosts-list-block .lg\:pl-0            { padding-left: 0; }
    .odds-boosts-list-block .lg\:px-0            { padding-left: 0; padding-right: 0; }
    .odds-boosts-list-block .lg\:py-12           { padding-top: 3rem; padding-bottom: 3rem; }
    .odds-boosts-list-block .lg\:pb-0            { padding-bottom: 0; }
    .odds-boosts-list-block .lg\:pb-4            { padding-bottom: 1rem; }
    .odds-boosts-list-block .lg\:pt-0\.5         { padding-top: 0.125rem; }
    .odds-boosts-list-block .lg\:pt-1            { padding-top: 0.25rem; }
    .odds-boosts-list-block .lg\:mt-0            { margin-top: 0; }
    .odds-boosts-list-block .lg\:mt-3            { margin-top: 0.75rem; }
    .odds-boosts-list-block .lg\:mr-0            { margin-right: 0; }

    .odds-boosts-list-block .lg\:space-y-0       > * + * { margin-top: 0; }
    .odds-boosts-list-block .lg\:space-y-1       > * + * { margin-top: 0.25rem; }
    .odds-boosts-list-block .lg\:space-x-6       > * + * { margin-left: 1.5rem; }

    /* the row CTA shrinks to btn-sm on mobile, returns to default size at lg */
    .odds-boosts-list-block .btn.lg\:btn-md      { padding: 0.5rem 0.875rem; font-size: 0.875rem; }

    /* borders */
    .odds-boosts-list-block .lg\:border-0        { border: 0; }
    .odds-boosts-list-block .lg\:border-b        { border-bottom: 1px solid #e5e5e5; }
    .odds-boosts-list-block .lg\:border-neutral-200 { border-color: #e5e5e5; }
    .odds-boosts-list-block .lg\:rounded-none    { border-radius: 0; }

    /* background */
    .odds-boosts-list-block .lg\:bg-inherit      { background-color: inherit; }
    .odds-boosts-list-block .lg\:bg-transparent  { background-color: transparent; }

    /* text */
    .odds-boosts-list-block .lg\:text-sm         { font-size: 0.875rem; line-height: 1.25rem; }
    .odds-boosts-list-block .lg\:text-xs         { font-size: 0.75rem;  line-height: 1rem; }
    .odds-boosts-list-block .lg\:text-neutral-500 { color: #737373; }

    /* position helpers */
    .odds-boosts-list-block .lg\:relative        { position: relative; }
    .odds-boosts-list-block .lg\:static          { position: static; }
    .odds-boosts-list-block .lg\:inset-auto      { top: auto; right: auto; bottom: auto; left: auto; }
    .odds-boosts-list-block .lg\:z-auto          { z-index: auto; }

    /* mobile filter sheet resets — the sheet is a plain inline block on desktop */
    .odds-boosts-list-block .lg\:shadow-none     { box-shadow: none; }
    .odds-boosts-list-block .lg\:transform-none  { transform: none; }
    .odds-boosts-list-block .lg\:overflow-visible { overflow: visible; }

    /* misc */
    .odds-boosts-list-block .lg\:whitespace-nowrap { white-space: nowrap; }


    /* arbitrary-value mask resets used on the card carousel */
    .odds-boosts-list-block .lg\:\[mask-image\:none\]         { mask-image: none; }
    .odds-boosts-list-block .lg\:\[-webkit-mask-image\:none\] { -webkit-mask-image: none; }
}

.odds-boosts-list-block .odds-box { width: 56px; height: 40px }