/* ============================================================
   Catena toplist → "tl2" redesign skin (P0 spike)
   Targets the plugin's own markup (.bookmaker-offers-new .bookmaker-row …)
   and reskins it to the Courtside design. First pass — refine against live DOM.
   ============================================================ */
.bookmaker-offers-new{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; font-family:var(--sans); display:flex; flex-direction:column;
}
.bookmaker-offers-new .bookmaker-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--line); position:relative;
}
.bookmaker-offers-new .bookmaker-row:last-child{border-bottom:none}
.bookmaker-offers-new .bookmaker-row.exclusive{background:linear-gradient(180deg,#f3f6f1,var(--surface))}

/* logo tile */
.bookmaker-offers-new .bookmaker-offers__logo{
  width:62px; height:40px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; padding:6px 8px; overflow:hidden;
  background:var(--green-900);
}
.bookmaker-offers-new .bookmaker-offers__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* name / score / offer text */
.bookmaker-offers-new .bookmaker-offers__info{flex:1;min-width:140px}
.bookmaker-offers-new .bookmaker-offers__info,
.bookmaker-offers-new .bookmaker-offers__info *{font-family:var(--display)}
.bookmaker-offers-new .bookmaker-offers__score{font-weight:900;font-size:14px;color:var(--green-600)}
.bookmaker-offers-new .bookmaker-offers__addtext,
.bookmaker-offers-new .bookmaker-offers__tags{font-size:12.5px;color:var(--muted)}
.bookmaker-offers-new .bookmaker-offers__addtext strong,
.bookmaker-offers-new .bookmaker-offers__addtext em{color:var(--orange-600);font-style:normal}

/* CTA button */
.bookmaker-offers-new .bookmaker-offer__btn,
.bookmaker-offers-new .bookmaker-offers__link .bookmaker-offer__btn,
.bookmaker-offers-new a.bookmaker-offer__btn{
  display:inline-block; text-align:center; background:var(--orange-500); color:#fff;
  font-family:var(--display); font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:12px; padding:11px 16px; border-radius:9px; white-space:nowrap; border:0;
}
.bookmaker-offers-new .bookmaker-offer__btn:hover{background:var(--orange-600)}

@media(max-width:680px){
  .bookmaker-offers-new .bookmaker-row{gap:9px;padding:12px}
  .bookmaker-offers-new .bookmaker-offer__btn{width:100%}
}

/* Catena id=2 renders a LOGO GRID (.toplist_wrapper > .toplist_item) with the logo
   as background:cover → wide logos crop/overflow. Keep the plugin's own tile size;
   just contain the logo + give it a white tile so nothing bleeds out. (Deeper question
   — logo-grid here vs the design's .tl2 offer rows — logged for a decision.) */
.toplist_wrapper .toplist_item{
  background-size:contain !important; background-repeat:no-repeat !important;
  background-position:center !important; background-color:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}

/* Design .tl2 offer-row toplist (replaces the Catena logo-grid). Rendered by lt26_tl2() from the bookmaker CPT. */
.tl2{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tl2-head{background:var(--green-900);color:#fff;padding:14px 16px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.tl2-item{padding:14px 16px;border-bottom:1px solid var(--line)}
.tl2-item:last-child{border-bottom:none}
.tl2-row{display:flex;align-items:center;gap:11px}
.tl2-rank{font-family:var(--display);font-weight:900;font-size:15px;color:var(--green-600);width:14px;flex-shrink:0;text-align:center}
.bklogo{width:62px;height:40px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:6px 8px;overflow:hidden;font-family:var(--display);font-weight:900;font-size:11px;color:#fff;letter-spacing:-.02em;line-height:.95;text-align:center}
.bklogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.tl2-meta{flex:1;min-width:0}
.tl2-name{font-family:var(--display);font-weight:800;font-size:14px;line-height:1}
.tl2-stars{font-size:10px;color:var(--gold);letter-spacing:1.5px;margin-top:4px}
.tl2-offer{font-family:var(--display);font-weight:800;font-size:13.5px;color:var(--ink);margin-top:10px}
.tl2-offer em{color:var(--orange-600);font-style:normal}
.tl2-cta{display:block;text-align:center;background:var(--orange-500);color:#fff;font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:12px;padding:10px;border-radius:8px;margin-top:10px}
.tl2-cta:hover{background:var(--orange-600)}
.tl2-terms{font-size:9.5px;color:var(--muted-2);line-height:1.4;margin-top:8px}
.tl2.inline{margin:26px 0}
.tl2.inline .tl2-items{display:grid;grid-template-columns:repeat(3,1fr)}
.tl2.inline .tl2-item{border-bottom:none;border-right:1px solid var(--line)}
.tl2.inline .tl2-item:last-child{border-right:none}
.tl2.inline .tl2-items{grid-template-columns:1fr}
.tl2.inline .tl2-item{border-right:none;border-bottom:1px solid var(--line)}
.tl2.inline .tl2-item:last-child{border-bottom:none}
.tl2-offer{font-size:13px}

/* ============================================================
   .tlp — rich IN-CONTENT betting toplist ("Best Betting Sites")
   Ported from the standalone design. Tweaks vs design:
   (1) stars under name REMOVED → "Welcome Bonus" eyebrow sits there;
   (2) score .num smaller + more padding around the green badge.
   Sidebar .tl2 widget is unchanged.
   ============================================================ */
.tlp{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:30px 0;box-shadow:0 10px 30px -22px rgba(12,45,32,.45)}
.tlp-head{background:var(--green-900);color:#fff;padding:17px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.tlp-head .t{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.tlp-head .t::before{content:"";width:28px;height:3px;background:var(--orange-500);flex-shrink:0}
.tlp-head .s{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9fb3a4;white-space:nowrap}
.tlp-item{position:relative;padding:24px 26px 20px}
.tlp-item + .tlp-item{border-top:1px solid var(--line)}
.tlp-item.top{background:linear-gradient(180deg,rgba(238,107,45,.06),transparent 70%);padding-top:30px}
.tlp-ribbon{position:absolute;top:0;left:26px;background:var(--orange-500);color:#fff;font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px 5px;border-radius:0 0 7px 7px}
.tlp-row{display:grid;grid-template-columns:44px 116px 1fr 212px;gap:24px;align-items:center}
.tlp-rank{font-family:var(--display);font-weight:900;font-size:30px;color:var(--green-600);text-align:center;line-height:.9}
.tlp-rank small{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase;margin-top:5px;font-weight:700}
.tlp-logo{width:116px;height:76px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:13px;overflow:hidden;font-family:var(--display);font-weight:900;font-size:15px;color:#fff;letter-spacing:-.02em;text-align:center;line-height:.95}
.tlp-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.tlp-main{min-width:0}
.tlp-name{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05;color:var(--ink)}
.tlp-bonus{display:block;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600);margin-top:7px}
.tlp-offer{font-family:var(--display);font-weight:900;font-size:23px;letter-spacing:-.012em;color:var(--ink);margin:10px 0 13px;line-height:1.05}
.tlp-offer em{color:var(--orange-600);font-style:normal}
.tlp-feats{display:flex;flex-wrap:wrap;gap:8px}
.tlp-feat{font-family:var(--sans);font-weight:600;font-size:11.5px;color:var(--green-800);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:5px 12px;display:flex;align-items:center;gap:7px}
.tlp-feat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-500);flex-shrink:0}
.tlp-side{display:flex;flex-direction:column;gap:11px}
.tlp-score{display:flex;align-items:center;justify-content:center;gap:11px}
.tlp-score .num{font-family:var(--display);font-weight:900;font-size:21px;color:#fff;background:var(--green-700);border-radius:12px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.tlp-score .lbl{text-align:left}
.tlp-score .lbl b{display:block;font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink);line-height:1.1}
.tlp-score .lbl span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.tlp-cta{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--orange-500);color:#fff;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase;padding:14px;border-radius:10px}
.tlp-cta:hover{background:var(--orange-600)}
.tlp-cta svg{transition:transform .2s ease}
.tlp-cta:hover svg{transform:translateX(3px)}
.tlp-visit{text-align:center;font-size:11px;color:var(--muted);font-weight:600}
.tlp-visit a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.tlp-terms{font-size:11px;color:var(--muted-2);line-height:1.5;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.tlp-terms b{color:var(--muted);font-weight:700}
@media(max-width:760px){
  .tlp-row{grid-template-columns:38px 1fr;gap:14px 16px}
  .tlp-logo{grid-column:2;width:96px;height:60px;padding:10px}
  .tlp-main{grid-column:2}
  .tlp-side{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;margin-top:4px}
  .tlp-score{flex:0 0 auto}
  .tlp-cta{flex:1;max-width:300px}
  .tlp-offer{font-size:20px}
}

/* .tlp renders inside .prose (shortcode content) — prose link rules (.prose a) outrank
   the component by specificity. Re-assert the component's link styling, prose-scoped. */
.prose .tlp a{text-decoration:none!important;border-bottom:none!important}
.prose .tlp-cta,.prose .tlp-cta:hover,.prose .tlp-cta:visited{color:#fff!important}
.prose .tlp-cta:hover{background:var(--orange-600)}
.prose .tlp-visit a{color:var(--green-700)!important;text-decoration:underline!important}
.prose .tlp-name{color:var(--ink)}
.prose .tlp-bonus{color:var(--green-600)}

/* .tl2-score — sidebar toplist score badge (replaces meaningless stars; = rating × 2) */
.tl2-score{display:flex;align-items:center;gap:7px;margin-top:5px}
.tl2-score b{font-family:var(--display);font-weight:900;font-size:13px;color:#fff;background:var(--green-700);border-radius:7px;padding:3px 8px;line-height:1}
.tl2-score span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-weight:700}