/*
Theme Name: Poängställning
Theme URI: https://dittdomän.se
Author: Poängställning
Author URI: https://dittdomän.se
Description: Snabbt, modernt WordPress-tema för fotbollstabeller, matcher och resultat — Allsvenskan, Superettan, Nations League, Premier League, Serie A, Bundesliga och La Liga. Byggt för att vara snyggare, snabbare och mer lättnavigerat än konkurrerande poängställnings-sajter.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poangstallning
*/

/* ==========================================================================
   Poängställning — delat designsystem
   ========================================================================== */

:root {
  --bg: #f7f8fc;
  --bg-glow: #eef2fb;
  --bg-elevated: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f2f4f9;
  --border: #e3e7f0;
  --text: #10151f;
  --text-dim: #545f75;
  /* Del 28: mörkad från #8792a8 — den gamla nyansen gav bara ~2.9–3.1:1 kontrast mot
     --surface/--surface-2, långt under WCAG AA:s 4.5:1-krav för normal text (den här färgen
     används på riktig läsbar text, t.ex. .section-sub/.foot-tagline/datumstämplar, inte bara
     dekorativa ikoner) — flaggat av en Lighthouse-tillgänglighetsgranskning. Samma nyans/mättnad
     behållen, bara mörkare, för att fortfarande kännas som ett tredje, "svagare" textsteg under
     --text-dim. Ger nu ≥4.5:1 mot samtliga ljusa bakgrunder som används i praktiken. */
  --text-faint: #637089;

  --accent: #15803d;       /* poäng / positivt */
  --accent-dim: #dcfce7;
  --gold: #b45309;         /* mästare / cup */
  --gold-bg: #fef3c7;
  --blue: #2563eb;         /* europaplats / kval */
  --blue-bg: #dbeafe;
  --red: #dc2626;          /* nedflyttning */
  --red-dim: #fee2e2;
  --league-accent: var(--accent); /* sätts per liga via inline <style> i header.php */

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(16,21,31,0.06);
  --maxw: 1180px;

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0b0f18;
  --bg-glow: #131b2c;
  --bg-elevated: #121826;
  --surface: #131a28;
  --surface-2: #1a2233;
  --border: #232c40;
  --text: #eef1f7;
  --text-dim: #aab3c9;
  /* Del 28: samma kontrastfix som ovan, för mörkt läge (ljusare i stället för mörkare, eftersom
     bakgrunden är mörk här) — gamla värdet gav bara ~3.5–4.2:1 mot mörkt lägets ytor. */
  --text-faint: #7f89a0;

  --accent: #22c55e;
  --accent-dim: #113322;
  --gold: #f59e0b;
  --gold-bg: #2b2210;
  --blue: #60a5fa;
  --blue-bg: #14233f;
  --red: #f87171;
  --red-dim: #3a1414;

  --shadow: 0 8px 24px rgba(0,0,0,0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Del 56, ny uppföljning — hela sajten gick att skaka/scrolla i sidled på mobil ("hela sajten
   är ej låst, man kan råka åka till både höger och vänster"). Grundorsak: mobilmenyns
   glid-panel (nav.leagues, se @media max-width:900px längre ner) har i STÄNGT/vilande läge
   `transform: translateX(18px)` för en diskret glid-effekt — men panelen ligger redan med
   `right: 0` (dvs. flush med skärmens högerkant), så den extra positiva förskjutningen sköt
   panelens osynliga låda 18px UTANFÖR skärmens högerkant HELA TIDEN (inte bara när menyn
   används). En `transform` räknas in i sidans scrollbara yta i moderna webbläsare även när
   elementet är `visibility:hidden`/`opacity:0`, så de där 18 extra pixlarna gjorde att HELA
   sidan fick en vågrät scrollbar man kunde dra i av misstag. Detta är en känd, vanlig fälla för
   glidande sidopaneler ("off-canvas"-menyer) och standardlösningen — som används brett även i
   färdiga UI-bibliotek — är att helt enkelt aldrig tillåta vågrät scroll på sidans rotnivå,
   oavsett vilket enskilt element som råkar sticka ut. `html` (inte `body`, för att inte störa
   `header.site`s `position:sticky`) får därför `overflow-x: hidden` här, en gång för alla. */
html { overflow-x: hidden; }

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, var(--bg-glow) 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
  /* Del 58, trettiosjunde uppföljningen: `overflow-x: hidden` togs bort härifrån — den hade av
     misstag lagts till på BÅDA `html` (rad 96, den avsiktliga och redan förklarade platsen, se
     kommentaren där) OCH `body`. Att sätta overflow (någon axel, oavsett värde) på <body> gör
     <body> till sin EGEN scroll-behållare, frikopplad från fönstrets/dokumentets scroll — vilket
     är en av de mest kända, dokumenterade orsakerna till att `position: sticky` slutar fungera
     (bekräftat här: `header.site` slutade sticka och scrollade istället upp och försvann helt,
     testat och reproducerat i en tom testsida med exakt samma CSS). Användaren rapporterade att
     menyn inte var sticky på desktop/ipad/mobil — det här var grundorsaken. `html`s egen
     overflow-x:hidden (rad 96) räcker för att stoppa den vågräta scrollen som del 56 ursprungligen
     löste (overflow på rotelementet <html> räknas mot SJÄLVA fönstret/viewporten enligt
     CSS-specen, inte mot en separat inre scroll-behållare, så den bevarar `position:sticky`) —
     ingen anledning att dubblera regeln på <body> också.
  */
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Topbar / live ticker ---------- */
.topbar {
  background: #0f172a;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: #b7c0d6;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  height: 34px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.topbar #ticker {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  padding-left: 100%;
  /* Användaren tyckte tickern gick för fort ("blir nästan yr när man kollar på den") —
     saktades ner från 40s till 65s för en hel genomgång (samma sträcka, bara långsammare). */
  animation: ticker-scroll 65s linear infinite;
}
.topbar .wrap:hover #ticker { animation-play-state: paused; }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.topbar .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.topbar .ticker-item { color: #b7c0d6; }
.topbar .ticker-item b { color: #ffffff; font-weight: 600; }

/* ---------- Header / nav ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s ease, background-color .2s ease;
}
html[data-theme="dark"] header.site { background: rgba(11,15,24,0.85); }
header.site.scrolled { box-shadow: 0 4px 18px rgba(16,21,31,0.08); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand .mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(22,163,74,0.25);
}
.brand .mark svg { width: 100%; height: 100%; display: block; }
.brand small {
  display: block;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
/* Del 58, nittonde uppföljningen: ljust/mörkt-knappen (.theme-toggle) och hamburgerknappen
   (.nav-toggle) i en gemensam grupp så .nav (display:flex; justify-content:space-between) bara
   ser DEM som EN flex-medlem, inte två separata. Behövs eftersom nav.leagues (den flex-medlem
   som annars skulle ligga mellan loggan och knapparna) blir position:absolute på mobil (se
   @media max-width:900px längre ner) och därmed slutar uppta plats i flex-raden — utan den här
   grupperingen spreds logga/ljust-mörkt-knapp/hamburgare ut jämnt över hela bredden i stället,
   så att ljust/mörkt-knappen hamnade ensam mitt i headern på mobil i stället för bredvid
   hamburgaren. Se header.php. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
nav.leagues {
  display: flex;
  gap: 4px;
  overflow: visible;
  flex: 1;
  justify-content: flex-end;
}
/* Under ~900px (del 32): navigationen slutade skrolla horisontellt och blev i stället en riktig
   hamburgermeny. Anledningen: en horisontellt skrollbar rad var svår att använda på mobil (svårt
   att se att den gick att skrolla, dropdown-undermenyer blev avklippta eftersom en skrollbar
   behållare inte kan visa innehåll utanför sig själv i höjdled) — rapporterat av användaren
   ("vi måste fixa till menyn för mobil, kanske att man ska ha en hamburgermeny"). #nav-toggle
   (se header.php) togglar klassen ".nav-open" på <body> via app.js; CSS:en nedan reagerar bara
   på den klassen, ingen annan JS-koppling behövs. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  flex-shrink: 0;
  /* Del 58, nittonde uppföljningen: margin-left borttagen — mellanrummet mot .theme-toggle sköts
     numera av .nav-actions gap:8px i stället (de två knapparna delar nu en gemensam flex-grupp,
     se .nav-actions ovan), skulle annars bli dubbel mellanrumsvidd. */
  transition: background .15s, border-color .15s;
}
.nav-toggle:hover { background: var(--bg-elevated); }
.nav-toggle-bar {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--text-dim);
  transition: transform .2s ease, opacity .2s ease;
}
/* Hamburgeren blir ett kryss när menyn är öppen — samma tre streck, bara roterade/gömda, i
   stället för en separat ikon att växla till. */
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9,12,20,0.45);
  /* Måste vara LÄGRE än header.site (z-index:40) — header.site har sin egen stacking context
     (position:sticky + eget z-index), så nav.leagues z-index:60 inuti den konkurrerar bara med
     andra element INUTI header, aldrig direkt mot nav-backdrop. Med ett för högt värde här (55,
     ursprungligt värde) hamnade backdropen ovanpå hela header-stacket ändå, vilket gjorde
     undermenyns expand-knapp — och i praktiken hela den öppna menyn — helt oklickbar. */
  z-index: 35;
  /* Del 58, trettioåttonde uppföljningen: förhindrar att en touch/svep över bakgrundsskuggan drar
     med sig sidan bakom den (samma "läckande scroll"-problem som `body.nav-open{overflow:hidden}`
     nedan en gång försökte lösa — se den borttagna regelns kommentar/historik för varför just DEN
     tekniken inte längre används). `touch-action` rör bara pekgester, aldrig layout/scroll-
     positionering, så den här raden kan aldrig påverka `header.site`s `position:sticky` — till
     skillnad från `overflow:hidden`. */
  touch-action: none;
}
body.nav-open .nav-backdrop { display: block; }
/* Del 58, trettioåttonde uppföljningen: `body.nav-open { overflow: hidden; }` (som låste
   bakgrundssidans scroll medan menyn var öppen) TOGS BORT HÄRIFRÅN. Användaren rapporterade: efter
   att ha scrollat ner på en sida och öppnat menyn syntes den inte alls — man fick scrolla upp för
   hand själv för att se/använda den. Grundorsak, bekräftad i en Playwright-testsida med exakt
   samma CSS: `overflow: hidden` på `body` (eller `html`, eller att göra `body` till
   `position:fixed` — samtliga tre alternativ testade och alla gav samma resultat) gör att
   `header.site` (som är `position:sticky`, se fixen några uppföljningar upp) tappar sin "fastnaglad
   längst upp"-position och hoppar tillbaka till sin ORIGINALPLATS i dokumentflödet — vilket, efter
   en lång nedscrollning, ligger långt ovanför den synliga delen av skärmen. Eftersom mobilmenyn
   (`nav.leagues`) är positionerad relativt just headern (`position:absolute; top:100%` inuti
   `header.site`, se @media-blocket nedan) följde menyn med headern rakt ut ur synfältet — exakt det
   användaren beskrev. Bekräftat: UTAN denna rad ligger både headern och menyn kvar precis rätt
   (headern på `top:0`, menyn direkt under den) oavsett hur långt ner man har scrollat. Kvarvarande,
   medvetet accepterad avvägning: bakgrundssidan kan tekniskt sett scrollas (med mus-scroll; på
   touch skärmar hindras det i praktiken av `.nav-backdrop`s nya `touch-action:none` ovan) medan
   menyn är öppen — en mindre olägenhet jämfört med en meny som inte går att se eller använda alls. */

/* Expand-knapp för undermenyer på mobil (skapas av app.js, en per li.menu-item-has-children).
   Osynlig på desktop (hover sköter det där, se nav.leagues .sub-menu längre ner) — visas bara i
   @media (max-width:900px) nedan. Måste stå HÄR, före den mediaregeln — annars vinner den här
   basregeln (samma specificitet, men senare i källkoden) över mediaregelns "display:flex" även
   på mobil, eftersom en @media inte i sig ger högre specificitet. */
.submenu-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  border-radius: 8px;
  cursor: pointer;
}
.submenu-toggle svg { width: 18px; height: 18px; transition: transform .15s ease; }
li.submenu-open > .submenu-toggle svg { transform: rotate(180deg); }
.submenu-toggle:hover { background: var(--surface-2); color: var(--text-dim); }

/* Del 56-bugg (hittad av användaren i skarpt läge): panelrubriken ("Meny" + stängknapp, skapas
   dynamiskt av app.js och läggs till i nav.leagues oavsett skärmbredd) saknade en egen
   display:none-basregel. Den ärvde då bara webbläsarens standard (block) och blev därför en
   vanlig flex-rad-medlem inuti nav.leagues (display:flex gäller på ALLA bredder, inte bara
   mobil) — syntes som en liten felplacerad "Meny"-ruta mitt i skrivbordsmenyn. Samma
   default-dold/media-query-visar-mönster som redan används för .nav-toggle ovan. */
.nav-panel-head { display: none; }

nav.leagues ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.leagues li { position: relative; display: flex; align-items: center; flex-shrink: 0; }
nav.leagues a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
nav.leagues a:hover { background: var(--surface-2); color: var(--text); }
nav.leagues a.active,
nav.leagues li.active > a { background: var(--accent-dim); color: var(--accent); }

/* Undermenyer (dropdown) — t.ex. Allsvenskans lag under Allsvenskan i huvudmenyn.
   Byggs helt via Utseende → Menyer i wp-admin, ingen kod behöver ändras för att lägga till fler. */
nav.leagues li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 6px;
  margin-bottom: 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .65;
  transform: rotate(45deg);
}
nav.leagues .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  list-style: none;
  padding: 6px;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(16,21,31,0.16);
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}
/* Osynlig "bro" som täcker det tomma utrymmet mellan menyknappen (t.ex. "Allsvenskan") och
   dropdownrutan (margin-top ovan). Utan den här räknas musen som "utanför" menyn precis i det
   tomma glappet, vilket får dropdownen att stängas innan man hinner ner till ett lag — även
   fast glappet syns tomt är det fortfarande en del av <li>-elementet i DOM:en, så hovring här
   håller menyn öppen hela vägen ner. */
nav.leagues .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
/* Del 56 — trolig ROTORSAK till "går inte att stänga en öppnad undermeny på mobil" hittad här:
   den här regeln hade ingen @media-avgränsning alls, så den gällde på ALLA skärmbredder — även
   mobilens egen, klass-styrda meny (".submenu-open", se längre ner) som är helt separat och ska
   vara det enda som avgör synlighet där. På touch-skärmar behåller en nyss-tryckt knapp ofta
   fokus tills något annat tar över det (":focus-within" matchar då fortfarande), vilket i
   praktiken kunde tvinga undermenyn att stanna synlig via DEN HÄR regeln även efter att JS redan
   plockat bort ".submenu-open"-klassen — precis den låsta, "expanderad men kan inte stängas"-bild
   användaren beskrev. Flyttad till en egen `min-width`-mediaregel nedan så den ALDRIG kan
   krocka med mobilmenyns egen logik. */
nav.leagues .sub-menu a { white-space: normal; flex: 1; }
nav.leagues .sub-menu li.active > a,
nav.leagues .sub-menu a.active { background: var(--accent-dim); color: var(--accent); }

/* Mediaregeln nedan MÅSTE stå EFTER alla desktop-regler för nav.leagues/ul/li/a/.sub-menu ovan
   — flera selektorer (t.ex. "nav.leagues .sub-menu") har exakt samma specificitet på båda
   ställena, och vid oavgjort vinner den regel som står SIST i källkoden, oavsett @media. Låg den
   här mediaregeln tidigare FÖRE desktop-reglerna (ett misstag från första versionen av den här
   funktionen) hamnade t.ex. ".sub-menu { position: static }" på mobil i praktiken overkörd av
   den senare desktop-regelns "position: absolute" — undermenyn såg ut att "sväva" ovanpå
   resten av menyn i stället för att skjuta ner innehållet under sig, upptäckt via en
   Playwright-skärmdump under verifieringen. */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* Del 56: omgjord från en fullbredds, nedfälld panel till en högerförankrad "drawer" (samma
     mönster som de flesta appars/sajters mobilmenyer, t.ex. skjuts in från kanten där tummen
     redan är när man håller telefonen med en hand — hamburgerknappen sitter ju redan uppe till
     höger). Bakgrunden till bytet: användaren rapporterade dels att den gamla fullbreddspanelen
     kändes fel förankrad ("allt i menyn väldigt mycket till vänster"), dels två separata,
     kvarstående buggar i den gamla panelen (gick inte att stänga en öppnad undermeny igen, gick
     inte att scrolla i en lång meny utan att råka trycka sig in på en sida) som en tidigare,
     mindre CSS-justering (bara `-webkit-overflow-scrolling`) inte löste fullt ut.
     position:absolute (inte fixed) med header.site (position:sticky) som positioneringskontext
     behålls oförändrat — top:100% pekar alltid på "precis under headern" oavsett om topbaren
     (liveresultat-raden) syns eller inte, redan bevisat fungera korrekt. Det nya är BREDDEN
     (en smal kolumn i stället för hela skärmen) och att den nu har en EGEN, tydlig
     stäng-knapp+rubrikrad längst upp (utöver hamburgerknappen som redan morfar till ett kryss) —
     så man aldrig behöver leta efter hur man stänger den. */
  nav.leagues {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    width: min(340px, 88vw);
    max-height: calc(100vh - 96px);
    /* Del 56-uppföljning — grundorsaken till att panelen fortfarande inte gick att scrolla i på
       riktiga telefoner (bekräftat av användaren): den här elementet hade TIDIGARE både
       `overflow-y:auto`/`-webkit-overflow-scrolling:touch` OCH `transform` (för glid-animationen
       nedan) på SAMMA element. Det är ett känt, dokumenterat WebKit-beteende — en `transform`
       tvingar fram ett eget kompositeringslager som kan krocka med scroll-lagret och göra
       elementet helt eller delvis oscrollbart, oavsett hur rätt overflow-egenskaperna i övrigt
       är satta. Lösningen: nav.leagues sköter numera BARA positionering/glid-animationen —
       själva scrollningen har flyttats till en ny, egen inre wrapper (.nav-panel-scroll, se
       nedan och app.js) som ALDRIG har någon transform på sig. */
    overflow: hidden;
    /* Del 56-bugg: nav.leagues basregel (rad ~188) sätter display:flex utan flex-direction, dvs
       standard "row" — utan denna rad hamnade panelrubriken (.nav-panel-head) och listan (<ul>)
       SIDA VID SIDA i stället för staplade, vilket klämde ihop "Meny"-rubriken till en liten
       ruta som såg ut att flyta ovanpå listan. Måste tvinga kolumnriktning här, annars ärvs
       radriktningen in i den smala mobilpanelen. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-bottom-left-radius: 16px;
    box-shadow: -16px 0 40px rgba(16,21,31,0.22);
    z-index: 60;
    visibility: hidden;
    opacity: 0;
    /* NEGATIV riktning medvetet (inte +18px som tidigare) — panelen ligger redan flush med
       höger skärmkant (right:0), så ett POSITIVT värde här sköt den permanent 18px UTANFÖR
       skärmen (se den utförliga kommentaren om overflow-x:hidden högst upp i filen). Ett
       negativt värde drar i stället in den lite grann inifrån vänster i vilande läge, samma
       visuella "glid ut"-känsla vid öppning men utan att någonsin sticka ut utanför skärmen. */
    transform: translateX(-18px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    justify-content: flex-start;
  }
  body.nav-open nav.leagues {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .18s ease, transform .18s ease;
  }
  /* Egen rubrikrad + stängknapp överst i menyn — tillagd av app.js (skapas dynamiskt, se
     initMobileNav()), inte i header.php, eftersom den bara ska finnas i den här smala
     mobil-panelen, aldrig i desktop-menyn. Ligger numera som ett SYSKON till .nav-panel-scroll
     (inte inuti den), så den förblir fast/synlig högst upp medan listan under scrollas. */
  .nav-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .nav-panel-head span { font-weight: 700; font-size: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
  .nav-panel-close {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: var(--surface-2);
    border-radius: 9px;
    color: var(--text-dim);
    cursor: pointer;
  }
  .nav-panel-close svg { width: 16px; height: 16px; }
  /* Den faktiska scrollbara ytan (del 56-uppföljning) — se den utförliga kommentaren vid
     nav.leagues ovan för varför den här måste vara ett EGET element utan transform. `min-height:0`
     är den klassiska flexbox-fällan: utan den vägrar en flex-fördelad (flex:1) scrollbehållare
     krympa under sitt eget innehålls naturliga höjd, vilket i praktiken gör overflow-y:auto
     verkningslöst. */
  .nav-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
  }
  nav.leagues ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
  }
  nav.leagues li { flex-shrink: 1; width: 100%; }
  /* Undermenyerna (dropdown på desktop) hade absolut positionering och hover/focus-styrd
     synlighet — funkar inte på touch (det finns inget "hover" att flytta musen till). På mobil
     ligger de i stället inline i flödet, öppna/stängda via en egen expand-knapp som app.js
     lägger till bredvid länken (se .submenu-toggle ovan) och togglar med klassen
     ".submenu-open" på <li>. */
  nav.leagues li.menu-item-has-children { flex-wrap: wrap; border-radius: 10px; transition: background-color .15s ease; }
  /* Del 56: tydlig färgskillnad när en grupp är öppen (efterfrågat av användaren) — hela
     rad-bakgrunden och pilen/rubriktexten byter till accentgrönt, inte bara pilens rotation som
     innan (för lätt att missa). */
  nav.leagues li.menu-item-has-children.submenu-open { background: var(--accent-dim); }
  nav.leagues li.menu-item-has-children.submenu-open > a { color: var(--accent); }
  nav.leagues li.menu-item-has-children > a { flex: 1; }
  nav.leagues li.menu-item-has-children > a::after { display: none; }
  nav.leagues li.menu-item-has-children.submenu-open > .submenu-toggle { color: var(--accent); }
  nav.leagues .sub-menu {
    display: none;
    position: static;
    width: 100%;
    margin-top: 4px;
    margin-left: 0;
    box-shadow: none;
    border-color: var(--border);
    background: var(--surface-2);
  }
  nav.leagues li.submenu-open > .sub-menu { display: flex; }
  nav.leagues a { padding: 13px 14px; font-size: 15px; }
  .submenu-toggle { display: flex; width: 44px; height: 44px; }
}

/* Hover-/fokus-bryggan för desktopens dropdown (se del 56-kommentaren där regeln togs bort
   ovan) hör bara hemma här, ovanför mobilbrytpunkten — kan aldrig krocka med mobilmenyns egen,
   klass-styrda ".submenu-open"-logik igen. */
@media (min-width: 901px) {
  nav.leagues li:hover > .sub-menu,
  nav.leagues li:focus-within > .sub-menu { display: flex; }
}

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  /* Del 58, nittonde uppföljningen: margin-left borttagen — .nav:s egen gap (24px) mot
     nav.leagues räcker, och knappen ligger numera i .nav-actions (se ovan) i stället för att
     vara en egen flex-medlem direkt i .nav. */
  transition: background .15s, border-color .15s, transform .15s;
}
.theme-toggle:hover { background: var(--bg-elevated); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; stroke: var(--text-dim); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--league-accent), transparent 85%);
}
.hero::after {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--league-accent) 22%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.hero .crumbs {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.hero .crumbs a:hover { color: var(--text-dim); }
.hero h1 {
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ---------- Lagsida: större klubbmärke i hero ---------- */
.team-hero-crest,
.team-hero-crest .crest,
.team-hero-crest .crest-img {
  width: 48px; height: 48px;
  border-radius: 12px;
  font-size: 16px;
}
.team-hero-crest .crest-img img { width: 100%; height: 100%; }
.badge-live, .badge-upcoming {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.badge-live {
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid var(--red);
}
.badge-upcoming {
  color: var(--blue);
  background: var(--blue-bg);
  border: 1px solid var(--blue);
}
.badge-live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  animation: pulse 1.6s infinite;
}
.hero p.lead {
  color: var(--text-dim);
  max-width: 74ch;
  margin: 0;
  font-size: 15px;
}
.hero .meta-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-faint);
}
.hero .meta-row strong { color: var(--text); }

/* Del 58, femtiofjärde uppföljningen: "Dagens erbjudande"-kortet som (valfritt, bara om ett
   spelbolag är markerat i wp-admin, se poang_get_featured_bookmaker()) fyller det tidigare tomma
   utrymmet till höger i startsidans hero-banner på bredare skärmar. .hero-flex lägger om
   startsidans hero till en rad (text + kort) i stället för bara ett stapla-block — påverkar
   INTE de andra hero-varianterna (liga-/lagsidor m.fl.), de saknar `.hero-flex`-klassen och
   fortsätter se ut precis som innan.
   Del 58, femtiofemte uppföljningen: efter flera varv (staplade kort -> backat, bredare kort med
   mer text -> justerat vidare) landade vi i: `align-items: stretch` i stället för `center` så att
   kortet får EXAKT samma höjd som textkolumnen bredvid (H1 + ingressen) — alltså "längre" genom
   att fylla en yta som redan finns, inte genom att lägga till någon ny höjd på sidan. Kortet är
   400px brett (ner något från ett mellansteg på 460px).
   Nästa varv: användaren ringade in den tomma ytan UPPE TILL HÖGER i kortet (bredvid
   logga/namn) och bad att CTA-knappen + 18+-texten flyttas dit i stället för att ligga längst
   ner — se .hero-promo-header/.hero-promo-identity/.hero-promo-action nedan och
   poang_render_hero_promo_card() i inc/render-league.php. */
.hero .wrap.hero-flex {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-promo {
  flex: 0 0 auto;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1; /* ovanför .hero::after-cirkeln */
  transition: transform .15s ease;
}
a.hero-promo:hover { transform: translateY(-2px); }
/* Del 58, femtiofemte uppföljningen (andra varvet): övre raden delas i två — identitet
   (eyebrow/logga/namn/stämpel) till vänster, och CTA-knapp + 18+-text till höger — så att den
   tomma ytan bredvid namnet fylls i stället för att lämnas tom. `flex-wrap: wrap` +
   `margin-left: auto` på .hero-promo-action gör att knappen ändå hamnar högerställd även om den
   får radbryta ner under identiteten på väldigt smala kort. */
.hero-promo-header { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.hero-promo-identity { display: flex; flex-direction: column; gap: 8px; flex: 1 1 170px; min-width: 0; }
.hero-promo-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero-promo-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-promo-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  object-fit: contain;
}
.hero-promo-logo.hero-promo-logo-accent { background: var(--accent); }
.hero-promo-logo.hero-promo-logo-gold { background: var(--gold); }
.hero-promo-logo.hero-promo-logo-blue { background: var(--blue); }
.hero-promo-logo.hero-promo-logo-red { background: var(--red); }
img.hero-promo-logo { background: var(--surface-2); padding: 4px; color: transparent; }
.hero-promo-name { font-weight: 800; font-size: 16px; }
/* Del 58, femtiofemte uppföljningen: bonusen är en egen chip/pill (ljus accentbakgrund, fetare
   text) i stället för bara färgad text, efter uttrycklig önskan om att den ska "poppa mer" —
   till skillnad från stämpeln/beskrivningen/extra-bonusraden (som togs bort igen, se ovan) är
   det här en specifikt efterfrågad ändring av bonus_welcome-raden. En liten "Välkomstbonus"-
   etikett lades sedan till före själva bonusvärdet, inuti samma chip — samma
   etikett/värde-mönster som redan används i spelbolagslistans egna kort (se
   .betting-bookmaker-bonus-label/-value nedan i filen), för visuell konsekvens.
   Åttonde varvet, samma dag: etikett och värde staplades först på VARSIN rad (båda
   `display: block`) — användaren ville i stället ha dem på SAMMA rad, sida vid sida. Chippen är
   nu en flex-rad (`align-items: baseline` så den mindre etikett-texten och den större
   värde-texten linjerar snyggt mot varandra trots olika font-size), med `flex-wrap: wrap` som
   säkerhetsnät ifall ett ovanligt långt bonusvärde inte får plats bredvid etiketten på smala
   skärmar. */
.hero-promo-bonus {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(21,128,61,0.12);
  padding: 6px 12px;
  border-radius: 7px;
}
.hero-promo-bonus-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-faint);
}
.hero-promo-bonus-value {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--accent);
}
/* CTA:n är en riktig knapp (pill, fylld accentfärg) i stället för en textlänk — kort text
   ("Hämta bonus", tidigare "Spela nu") så formen matchar de kompakta "Spela hos X"-knapparna i
   referensbilden användaren skickade, utan oddssiffror (inget riktigt oddsflöde att visa, se
   kommentaren vid poang_get_featured_bookmaker()). Ligger i .hero-promo-action, uppe till höger
   i kortet tillsammans med 18+-texten direkt under. */
.hero-promo-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; margin-left: auto; }
.hero-promo-cta {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  padding: 10px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: filter .15s ease;
}
a.hero-promo:hover .hero-promo-cta { filter: brightness(1.08); }
.hero-promo-disclaimer {
  font-size: 10px;
  color: var(--text-faint);
}
@media (max-width: 900px) {
  /* 900px är brytpunkten där .hero-text (min 420px) + .hero-promo (400px) + gapet (28px) inte
     längre får plats på samma rad (420+400+28=848px) och kortet radbryts ner under texten — ska
     då vara fullbrett OCH sluta stretcha till textkolumnens höjd (annars blir det en väldigt hög,
     halvtom ruta under texten på mobil/surfplatta). */
  .hero .wrap.hero-flex { align-items: center; }
  .hero-promo { width: 100%; }
}
@media (max-width: 480px) {
  /* Åttonde varvet, rättelse: på smala mobilbredder radbröt .hero-promo-header — CTA-knappen
     (+18+-texten) hamnade under identity-blocket i stället för bredvid det, eftersom
     .hero-promo-identity har `flex: 1 1 170px` och flex-wrap-algoritmen räknar med den
     flex-basisen (170px) när den avgör om raden får plats, INTE den nerskrumpna bredden efter
     shrink. 170px identitet + 14px gap + knappens egen bredd fick inte plats på en enda rad på
     390px-bredd. Löst genom att tvinga headern att ALDRIG radbryta på smala skärmar
     (`flex-wrap: nowrap`) — identity-blocket får då krympa (redan `min-width: 0`, texten radbryts
     i stället för att tvinga fram en ny flex-rad) medan CTA-knappen behåller sin egen bredd. Som
     extra marginal, precis som användaren själv föreslog ("minska paddingen lite på varje sida om
     knappen till texten"), krympte vi även kortets sidopadding och knappens egen padding något,
     så det blir mer luft kvar åt identity-blocket innan det behöver börja krympa på riktigt. */
  .hero-promo { padding: 18px 16px; }
  .hero-promo-header { flex-wrap: nowrap; gap: 10px; }
  .hero-promo-identity { flex: 1 1 auto; }
  .hero-promo-cta { padding: 9px 16px; }
}

.countdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  background: var(--blue-bg);
  border: 1px solid var(--blue);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- Quick facts (live-liga) ---------- */
.quick-facts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.fact-chip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 150px;
  box-shadow: var(--shadow);
}
.fact-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  font-weight: 700;
}
.fact-team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
}
.fact-value { font-size: 12.5px; color: var(--accent); font-weight: 800; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 28px 0 0;
  overflow-x: auto;
}
.tabs button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

.panel { display: none; padding: 24px 0 60px; }
.panel.active { display: block; }

/* ---------- Table controls ---------- */
.table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.segmented {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 7px;
  cursor: pointer;
}
.segmented button.active { background: var(--accent); color: #fff; }
.updated-note { font-size: 12px; color: var(--text-faint); }
.updated-note b { color: var(--text-dim); }
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
}
.verified-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.verified-badge b { color: inherit; }

/* ---------- Startsida: ligor/nyheter sida vid sida ---------- */
.home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.home-leagues-col .section-heading,
.home-news-col .section-heading { margin-top: 30px; }

/* ---------- Startsida: nyhetsboxar (mittenkolumnen) ---------- */
.news-post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.news-post-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.news-post-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--news-accent, var(--accent));
  z-index: 1;
}
.news-post-card:hover {
  border-color: color-mix(in srgb, var(--news-accent, var(--accent)) 40%, var(--border));
  transform: translateY(-3px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--news-accent, var(--accent)) 16%, transparent);
}
.np-image { width: 100%; height: 132px; background: var(--surface-2); }
.np-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.np-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--news-accent, var(--accent)) 24%, var(--surface-2)), var(--surface-2));
}
.np-placeholder-icon { width: 32px; height: 32px; color: color-mix(in srgb, var(--news-accent, var(--accent)) 65%, var(--text-faint)); }
.np-placeholder-icon svg { width: 100%; height: 100%; }
/* Del 60: i mörkt läge räknas kontrasten (WCAG-luminansformeln) för alla tolv ligors råa
   --news-accent-färger mot mörka bakgrunder ut till 1.1–1.7:1 för den här ikonen — Champions
   League (nästan svartblått, #1e1b4b) värst med 1.67:1, men samtliga ligor under godkänd nivå.
   Samma 45 %-accent/55 %-vitt-blandning som .np-league/.news-post-tag nedan lyfter sämsta fallet
   till ~5.7:1 utan att tvätta bort ligans egen färgton helt. */
html[data-theme="dark"] .np-placeholder-icon { color: color-mix(in srgb, var(--news-accent, var(--accent)) 45%, white); }
.np-body { padding: 14px 16px 16px; }
.np-league {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--news-accent, var(--accent));
  margin-bottom: 6px;
}
/* Del 60: samma problem som placeholder-ikonen ovan — ligans råa accentfärg används oblandad som
   textfärg och anpassas (till skillnad från --accent/--gold/--blue/--red) inte alls för mörkt
   läge. Uträknat kontrastvärde mot mörk bakgrund låg mellan 1.09:1 (Champions League, i praktiken
   osynlig — det här var den etikett som flaggades) och 3.79:1 för de flesta andra ligor, dvs.
   under WCAG AA:s gräns på 4.5:1 för brödtext i samtliga tolv fall utom tre. */
html[data-theme="dark"] .np-league { color: color-mix(in srgb, var(--news-accent, var(--accent)) 45%, white); }
.np-headline { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.4; }
.np-excerpt {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-date { font-size: 11px; color: var(--text-faint); }

/* Del 58, tjugosjunde uppföljningen: den gamla brytpunkten här (860px, bara för .home-split) togs
   bort — `.home-split` blir nu `display: contents` redan vid samma brytpunkt som resten av
   mobilomordningen (960px, se `.content-layout`-blocket längre ner), så Ligor/Nyheter-kolumnerna
   staplas konsekvent i hela mobilintervallet i stället för att ha en egen brytpunkt 100px för
   sent jämfört med annonsrutan bredvid dem. */

/* ---------- Nyhetssida: kategori-badge i hero ---------- */
.news-post-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--news-accent, var(--accent));
  background: color-mix(in srgb, var(--news-accent, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--news-accent, var(--accent)) 35%, transparent);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
/* Del 60: samma textfärg-problem som .np-league ovan (den här badgen visas överst på själva
   nyhetsartikeln). Bakgrunden/kanten är redan halvgenomskinliga mot sidans egen bakgrund och
   behöver ingen justering — det är bara textfärgen som blir olämpligt mörk i mörkt läge. */
html[data-theme="dark"] .news-post-tag { color: color-mix(in srgb, var(--news-accent, var(--accent)) 45%, white); }

/* ---------- Nyhetssida: artikel ---------- */
.news-post-article {
  max-width: 82ch;
  margin: 0 0 36px;
}
.news-post-hero-image {
  width: 100%;
  max-height: 340px;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 20px;
  background: var(--surface-2);
}
.news-post-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.news-post-lead {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 16px;
}
.news-post-article p {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.75;
  margin: 0 0 16px;
}
.news-post-sources {
  font-size: 12px !important;
  color: var(--text-faint) !important;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 8px !important;
}
.news-post-back {
  display: inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.news-post-back:hover { text-decoration: underline; }
.news-post-more { margin-bottom: 40px; }
.news-post-more .news-post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 860px) {
  .news-post-more .news-post-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .news-post-more .news-post-list { grid-template-columns: 1fr; }
}

/* ---------- Del 59: /nyheter/-arkivsidan (ALLA nyheter, filter + paginering) ---------- */
/* Samma 3/2/1-kolumners rutnät som "Fler nyheter" ovan (.news-post-more .news-post-list),
   men som en egen klass i stället för att koppla arkivsidan till den kontexten — kortet
   .news-post-card återanvänds oförändrat (poang_render_news_card() i functions.php). */
.news-post-list.news-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .news-post-list.news-archive-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .news-post-list.news-archive-grid { grid-template-columns: 1fr; }
}

.news-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 26px;
}
.news-filter-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.news-filter-pill:hover { border-color: var(--accent); color: var(--text); }
.news-filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.news-archive-empty {
  color: var(--text-dim);
  font-size: 14.5px;
  padding: 20px 0 4px;
}

.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.news-pagination-btn {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 9px 20px;
  text-decoration: none;
  transition: filter .15s ease;
}
.news-pagination-btn:hover { filter: brightness(1.08); }
.news-pagination-btn-disabled {
  background: var(--surface-2);
  color: var(--text-faint);
  cursor: default;
}
.news-pagination-status { font-size: 13px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 420px) {
  .news-pagination { gap: 10px; }
  .news-pagination-status { order: 3; width: 100%; text-align: center; margin-top: 6px; }
}

/* ---------- Standings table ---------- */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--shadow);
}
table.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.standings th {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  font-weight: 700;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
table.standings th.team-col, table.standings td.team-col { text-align: left; }
table.standings td {
  text-align: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
table.standings td.pts { color: var(--text); font-weight: 800; }
table.standings tr:last-child td { border-bottom: none; }
table.standings tr:hover td { background: var(--surface-2); }

.pos-cell { display: flex; align-items: center; justify-content: center; gap: 6px; }
.zone-dot { width: 5px; height: 22px; border-radius: 3px; display: inline-block; }
.zone-title .zone-dot { background: var(--gold); }
.zone-europe .zone-dot { background: var(--blue); }
.zone-relegation .zone-dot { background: var(--red); }
.zone-none .zone-dot { background: transparent; }

.team-cell { display: flex; align-items: center; gap: 10px; }
.crest {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.crest-img {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.crest-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(16,21,31,0.15));
}
/* Del 58, fyrtionde uppföljningen: Juventus eget märke (assets/img/crests/juventus.png, se
   crests.js) är rent svart — inget annat officiellt färgschema finns för det, till skillnad
   från de flesta andra klubbmärken som redan har egna kulörer och syns fint i båda lägena.
   Osynligt (svart-på-mörkt) i mörkt läge utan denna regel — användaren bad specifikt om att det
   skulle synas där också. `invert(1)` vänder svart till vitt (funkar rent, eftersom märket bara
   har två "färger": svart och transparent — ingen färgton blir konstig av att vändas). Matchar
   bilden via dess filnamn i `src`-attributet, eftersom `crest()` i app.js bygger samma
   `.crest-img img`-tagg för alla klubbar utan något sätt att särskilja "bara Juventus" i CSS
   annars — ingen JS-ändring behövdes. Rör bara den här specifika bilden, aldrig andra märken. */
html[data-theme="dark"] .crest-img img[src*="/crests/juventus.png"] {
  filter: invert(1) drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
.team-name { color: var(--text); font-weight: 600; }
.team-name .short { display: none; }
.team-name a,
.league-card td a { color: inherit; text-decoration: none; }
.team-name a:hover,
.league-card td a:hover { text-decoration: underline; }

/*
 * Del 44: internlänkar i löpande brödtext (poang_autolink_team_mentions()/
 * poang_autolink_league_mentions(), t.ex. "Malmö FF"/"Allsvenskan" nämnda i en ligas
 * "Historia och bakgrund"-text) — MÅSTE synas tydligt som länkar, till skillnad från
 * .team-name/.league-card ovan (en medvetet diskret stil för lagnamn i en tät datatabell,
 * ett annat sammanhang). Utan egen stil ärvde de bara sajtens globala `a { text-decoration:
 * none }`-reset och syntes inte alls förrän man hovrade — dåligt för besökare och exakt det
 * mönster Google varnar för (länkar som inte går att urskilja från vanlig text).
 */
.autolink {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.autolink:hover { text-decoration-thickness: 2px; }

.form-dots { display: flex; gap: 4px; justify-content: center; }
.form-dot {
  width: 20px; height: 20px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.form-dot.W { background: var(--accent); }
.form-dot.O, .form-dot.D { background: #5b6b8c; }
.form-dot.F, .form-dot.L { background: var(--red); }

.legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .zone-dot { height: 12px; }

/* ---------- Matches ---------- */
.match-grid { display: grid; gap: 12px; }
.match-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.match-teams { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.match-team { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.match-score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.match-meta { text-align: right; font-size: 12px; color: var(--text-faint); min-width: 92px; }
.match-meta .status-live { color: #ff8080; font-weight: 800; }
.match-meta .status-ft { color: var(--text-faint); }
.round-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  font-weight: 700;
  margin: 22px 0 10px;
}
.round-heading:first-child { margin-top: 0; }

/* ---------- Scorers ---------- */
table.scorers { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.scorers th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
table.scorers td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
table.scorers td.goals { color: var(--accent); font-weight: 800; text-align: right; }
table.scorers tr:last-child td { border-bottom: none; }

/* ---------- Hub (home) ---------- */
.league-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.league-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.league-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--card-accent, var(--accent));
}
.league-card:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 40%, var(--border));
  transform: translateY(-3px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--card-accent, var(--accent)) 16%, transparent);
}
.league-card .lc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.league-card .lc-title { font-weight: 800; font-size: 16px; }
.league-card .lc-country { font-size: 11.5px; color: var(--text-faint); }
.league-card table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.league-card td { padding: 5px 2px; color: var(--text-dim); border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-card tr:last-child td { border-bottom: none; }
.league-card .lc-pos { width: 22px; color: var(--text-faint); font-size: 13px; }
.league-card td:nth-child(2) { width: 28px; }
.league-card .lc-pts { width: 34px; text-align: right; font-weight: 800; color: var(--text); }
.league-card .lc-more { display: block; text-align: center; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--accent); }

.section-heading {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 40px 0 4px;
}
.section-sub { color: var(--text-faint); font-size: 13.5px; margin: 0 0 18px; }

/* ---------- Stat-bar (trovärdighet, "något händer") ---------- */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 22px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat-block {
  padding: 18px 14px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.stat-block:last-child { border-right: none; }
.stat-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 720px) {
  .stat-block { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-block:last-child { border-bottom: none; }
}

/* ---------- Ligorna i korthet — briefkort ---------- */
.league-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.league-brief {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brief-accent, var(--accent));
  border-radius: 10px;
  padding: 14px 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.league-brief:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.league-brief .lb-country {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-bottom: 3px;
}
.league-brief .lb-name { font-weight: 800; font-size: 14.5px; color: var(--text); margin-bottom: 6px; }
.league-brief p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* ---------- Så verifierar vi — metodiksteg ---------- */
.verify-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 8px 0 6px;
}
.verify-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
}
.verify-step .vs-num {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 900;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.verify-step h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.verify-step p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.verify-signoff { margin: 14px 0 0; font-size: 13px; color: var(--text-dim); }
.verify-signoff a { color: var(--accent); text-decoration: underline; }

/* ---------- Innehåll + annonsrail (spänner från ligorna ner till FAQ) ---------- */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 8px 32px;
  align-items: start;
}
.content-main { min-width: 0; }
.seo-block {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  min-width: 0;
}
/* Utvald bild (satt i wp-admin på en sida) — visas ovanför sidans text. */
.page-featured-image {
  margin: 0 0 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.page-featured-image img { width: 100%; height: auto; display: block; }
.seo-block h2 {
  font-size: 18px;
  color: var(--text);
  margin: 40px 0 10px;
  position: relative;
  padding-left: 14px;
}
.seo-block h2:first-of-type { margin-top: 0; }
.seo-block h2::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--blue));
}
.seo-block p { max-width: 82ch; margin: 0 0 14px; line-height: 1.7; }
.faq {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  max-width: 82ch;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.faq details:hover { transform: translateY(-1px); }
.faq details[open] { border-color: var(--accent); box-shadow: 0 4px 14px rgba(21,128,61,0.1); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  font-size: 13.5px;
  list-style: none;
  position: relative;
  padding-left: 28px;
  padding-right: 26px;
}
.faq summary .faq-num {
  position: absolute;
  left: 0; top: -1px;
  width: 19px; height: 19px;
  border-radius: 6px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px; top: -2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 10px 0 0 28px; font-size: 13.5px; animation: faq-fade .25s ease; }
@keyframes faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Kontaktsidan: riktigt, klickbart mejl-kort ---------- */
.contact-email-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 8px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 82ch;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.contact-email-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.contact-email-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.contact-email-icon svg { width: 22px; height: 22px; }
.contact-email-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-email-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
}
.contact-email-card a {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
}
.contact-email-card a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 480px) {
  .contact-email-card { padding: 14px 16px; gap: 12px; }
  .contact-email-card a { font-size: 15px; }
}

/* ---------- Ligasida: fakta-gadget (grundad/titlar/mästare + trivia) ---------- */
.league-fact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}
.league-fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.league-fact .lf-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 5px;
}
.league-fact .lf-value { font-size: 14.5px; font-weight: 800; color: var(--text); line-height: 1.4; }
.trivia-heading { font-size: 15px; color: var(--text); margin: 22px 0 10px; }
.trivia-list { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 82ch; }
.trivia-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ---------- Annonsrail (följer med hela vägen från ligorna) ---------- */
/* Del 58, fyrtionionde uppföljningen: sticky+intern skroll (från fyrtioförsta uppföljningen)
   TOGS BORT igen på uttrycklig begäran — användaren ville inte längre att railen skulle fastna
   i sidled eller ha sin egen skrollbar, utan bara bete sig "som resten av sidan": scrollar med
   helt vanligt, i takt med huvudinnehållet. `position: sticky`/`top`/`max-height`/`overflow-y`
   m.fl. borttagna, railen är nu ett helt vanligt statiskt block i rutnätet (`position: static`,
   samma som redan gällde på mobil sedan tidigare, se @media-blocket längre ner). Den egna
   scrollbar-stylingen (::-webkit-scrollbar m.fl.) togs bort samtidigt eftersom den bara gjorde
   nytta när railen faktiskt kunde skrollas internt. */
.ad-rail {
  position: static;
}
/* Del 58, tjugofemte uppföljningen: egen rubrik ("Rekommenderade spelsajter") ovanför
   annonserna, i samma stil som "Ligor"/"Senaste nytt" i huvudkolumnen — samma margin-top (30px)
   som `.home-leagues-col .section-heading`/`.home-news-col .section-heading` använder, så att
   alla tre rubriker hamnar i linje med varandra (kolumnerna är syskon i samma grid-rad,
   `align-items: start`, så samma marginal ovanför rubriken räcker för att linjera dem). */
.ad-rail > .section-heading { margin-top: 30px; }
.ad-rail-slots {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px; /* matchar .league-grid/.news-post-list margin-top under sina rubriker */
}
.ad-slot {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-slot-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Del 58, tjugofjärde uppföljningen: löser "ingen beskärning" OCH "ingen vit yta" samtidigt.
   .ad-slot-bg är en osynlig kopia av samma bild som fyller HELA rutan (cover) men är kraftigt
   suddig och nedtonad — den syns bara i det tomrum som annars hade blivit vitt. Den skarpa
   .ad-slot-fg ligger ovanpå med "contain" (aldrig beskuren, alltid hel bild). Resultat: ingen
   vit kant kvar, bilden aldrig avhuggen, rutan fortsatt exakt lika stor som alla andra. */
.ad-slot-link { position: relative; display: block; width: 100%; height: 100%; }
.ad-slot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px) brightness(0.65) saturate(1.1);
  transform: scale(1.15); /* döljer den suddiga kantens egna vita/genomskinliga pixelkant */
  z-index: 0;
}
.ad-slot-fg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ad-slot-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-faint);
}
.ad-slot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-faint);
}
.ad-slot-title { font-weight: 700; font-size: 13px; color: var(--text-dim); margin: 0; }
@media (max-width: 960px) {
  .content-layout { grid-template-columns: 1fr; }
  /* Del 58, tjugosjunde uppföljningen: på mobil ska annonserna ligga MELLAN Ligor och Senaste
     nytt, inte längst ner under hela SEO-texten/FAQ:n (där de av misstag hamnade eftersom
     `.ad-rail` bara var sist i DOM-ordningen). `.content-main`/`.home-split` är annars bara
     layout-wrappers för desktopens sida-vid-sida-rutnät — `display: contents` "tar bort" dem ur
     lådträdet på mobil så att deras barn (Ligor-kolumnen, Nyheter-kolumnen, SEO-blocket) blir
     direkta syskon till `.ad-rail` i SAMMA rutnät (`.content-layout`), och då kan `order`
     bestämma den nya mobilordningen helt utan att dubblera någon HTML eller flytta runt PHP. */
  .content-main, .home-split { display: contents; }
  .home-leagues-col { order: 1; }
  .ad-rail {
    order: 2;
    position: static;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  .home-news-col { order: 3; }
  .seo-block { order: 4; }
  /* Rubriken behöver inte de extra 30px:en här — kantlinjen/paddingen ovanför ger redan luft,
     och på mobil är det bara en enda kolumn så ingen rubrik att linjera mot längre. */
  .ad-rail > .section-heading { margin-top: 0; }
  .ad-rail-slots {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ad-slot { flex: 1 1 260px; height: 200px; }
}

/* ---------- Footer ---------- */
footer.site {
  position: relative;
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 40px 0 30px;
  color: var(--text-faint);
  font-size: 12.5px;
}
footer.site::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue), var(--gold));
}
footer.site .foot-grid {
  display: grid;
  /* Ligor-kolumnen (foot-leagues) breddad från del 47 — den rymmer numera flera grupperade
     underlistor sida vid sida i stället för en enda, allt längre kolumn. Del 50: "Guider"-
     kolumnen borttagen (se footer.php), sÅ rutnätet gick frÅn fyra till tre kolumner — det
     frigjorda utrymmet fördelat mest till "Om sajten" (0.85fr → 1.1fr) sÅ den inte blir
     onödigt smal ensam pÅ höger sida, med lite extra Åt logga/tagline-kolumnen ocksÅ. */
  grid-template-columns: 1.2fr 1.7fr 1.1fr;
  gap: 24px;
  margin-bottom: 24px;
}
/* Del 47/48: ligorna i footern grupperade (Svenska ligor / Svensk cup / Utländska ligor /
   Europacuper / Landslag, se poang_footer_league_groups() i functions.php) i stället för en
   enda platt lista som bara växte nedåt för varje ny liga/cup.
   Del 48 gick frÅn tre till fem grupper (för att skilja cup frÅn liga och landslag frÅn
   klubbturnering) — grupperna varierar nu kraftigt i höjd (1–5 länkar var), och ett strikt
   3-kolumners RUTNÄT (som del 48 först hade) lämnade dÅ ett tomt hÅl i andra raden och ett
   stort dött mellanrum innan "Guider" — användaren pÅpekade att det sÅg spretigt ut. Bytt till
   ett FLYTANDE flerkolumns-layout (`column-count`, som en tidningsspalt) i stället för ett
   rutnät: varje grupp placeras i tur och ordning och webbläsaren balanserar själv hur mycket
   som fÅr plats i varje spalt, sÅ högre och lägre grupper packas ihop utan tomma hÅl.
   `break-inside: avoid` pÅ varje grupp (nedan) ser till att en grupps rubrik och länkar
   aldrig delas mitt itu mellan tvÅ spalter. */
footer.site .foot-league-groups {
  column-count: 3;
  column-gap: 16px;
}
footer.site .foot-league-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 18px;
}
/* Del 50: rubrikerna gick knappt att skilja frÅn länkarna under (samma svaga, gråblÅ ton pÅ
   bÅda) — `opacity: .7` här tvättade dessutom ur den redan dämpade --text-dim-färgen ännu mer,
   sÅ den hamnade nästan lika ljus som länkarnas --text-faint. Opacity borttagen och vikten höjd
   till 700 (versaler+bokstavsavstÅnd fanns redan) sÅ rubriken blir tydligt mörkare/fetare än de
   vanliga, ovala länkarna under — samma fix som footer.site h3 nedan fick av samma anledning. */
footer.site .foot-league-group h4 {
  color: var(--text-dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  margin: 0 0 6px;
}
footer.site .foot-league-group a { padding: 2px 0; font-size: 12px; }
footer.site .foot-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-faint);
}
footer.site .foot-stats span { display: inline-flex; align-items: center; gap: 6px; }
footer.site .foot-stats b { color: var(--text-dim); }
footer.site .foot-brand .brand { font-size: 16px; margin-bottom: 10px; }
footer.site .foot-brand .brand .mark { width: 28px; height: 28px; }
footer.site .foot-tagline { margin: 0; max-width: 34ch; color: var(--text-faint); font-size: 12.5px; line-height: 1.6; }
/* h3 sen del 28 (var h4) — footer-kolumnerna följde annars aldrig direkt efter en h3 på sidor
   där huvudinnehållet toppar ut på h2 (t.ex. hela startsidan), vilket hoppade över en rubriknivå
   och flaggades av en Lighthouse-tillgänglighetsgranskning ("heading elements not in
   sequentially-descending order"). Utseendet är oförändrat — bara elementnamnet, ingen CSS
   nedanför behövde ändras eftersom class-baserade selektorer redan gjorde jobbet där det behövdes. */
/* Del 50: samma svaga rubrik/länk-kontrast som h4 ovan — font-weight explicit satt till 700
   (litade tidigare pÅ webbläsarens standard-fetstil för h3, som varierar) sÅ rubriken alltid
   är tydligt fetare än de vanliga länkarna under, oavsett webbläsare. */
footer.site h3 { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
footer.site a { display: block; padding: 3px 0; font-weight: 400; transition: color .15s, transform .15s; }
footer.site a:hover { color: var(--text); transform: translateX(2px); }
footer.site .disclaimer { border-top: 1px solid var(--border); padding-top: 18px; }

/* ---------- Spelansvar-raden (del 56, uppföljning) ----------
   Egen, fullbred stapel under footer.site (samma mörkblå ton som .topbar ovan, #0f172a, för
   visuell konsekvens med resten av sajtens mörka ytor). Ligger utanför footer.site helt
   medvetet — den ska synas som en tydligt AVGRÄNSAD notis, inte smälta in i footerns vanliga
   länkspalter. */
.responsible-gambling-bar {
  background: #0f172a;
  color: #dbe3f5;
  padding: 22px 16px 26px;
}
.responsible-gambling-bar .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.responsible-gambling-bar .rgb-lead {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  max-width: 46ch;
}
.responsible-gambling-bar .rgb-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-style: italic;
  color: #b7c0d6;
  max-width: 50ch;
}
.responsible-gambling-bar .rgb-sub a { color: #ffb4c6; text-decoration: underline; }
.responsible-gambling-bar .rgb-sub a:hover { color: #ffd0dc; }
.responsible-gambling-bar .rgb-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px 28px;
}
.responsible-gambling-bar .rgb-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #dbe3f5;
  white-space: nowrap;
}
.responsible-gambling-bar .rgb-badge-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  color: #dbe3f5;
}
.responsible-gambling-bar .rgb-badge-icon svg { width: 100%; height: 100%; display: block; }
.responsible-gambling-bar .rgb-badge-icon-pause { color: #ef4444; }
/* Del 56, tredje uppföljningen: den ljusa plattan bakom loggorna togs bort på begäran ("vill
   helst inte ha de vita plattorna") — i stället är de bildfiler som hade mörk/svart text
   (Spelpaus, 18+) omfärgade rakt av (svarta pixlar bytta mot vita, se statusdoktens
   redigeringsanteckning) så de syns direkt mot den mörkblå bakgrunden utan någon platta. De
   loggor som länkar till en organisation (Stödlinjen/Spelpaus/Spelinspektionen — se footer.php)
   är `<a>`-element i stället för `<span>`; 18+-märket saknar egen organisation och förblir en
   ren `<span>` utan länk. */
.responsible-gambling-bar .rgb-badge-logo {
  line-height: 0;
  text-decoration: none;
  opacity: 1;
  transition: opacity .15s ease;
}
.responsible-gambling-bar a.rgb-badge-logo:hover { opacity: 0.8; }
.responsible-gambling-bar .rgb-badge-logo img {
  display: block;
  height: 24px;
  width: auto;
}
/* Spelinspektionen-loggan är en tätare, mer detaljerad wordmark (negativ text i formerna) än de
   andra tre — vid samma 24px-höjd som de andra blir den för liten för att läsas. Klassen
   rgb-badge-logo-tall (satt på länken i footer.php) ger den lite extra höjd så detaljerna syns,
   utan att störa höjden/linjen på de andra loggorna i raden. */
.responsible-gambling-bar .rgb-badge-logo-tall img {
  height: 34px;
}
@media (max-width: 560px) {
  .responsible-gambling-bar .rgb-badges { gap: 12px 16px; }
  .responsible-gambling-bar .rgb-badge { font-size: 11px; }
  .responsible-gambling-bar .rgb-badge-logo img { height: 19px; }
  .responsible-gambling-bar .rgb-badge-logo-tall img { height: 27px; }
}

/* ---------- Speltips (del 56) ---------- */
/* Del 56, uppföljning: notisen hade tidigare en <img> (den vita, för mörk bakgrund omfärgade
   18+-logotypen från footerns spelansvar-rad, se assets/img/spelansvar/) placerad på den HÄR
   ljusa rutans ljusgrå yta — vitt på ljusgrått är i praktiken osynligt, vilket fick vänstersidan
   att se ut som ett tomt hål och gjorde att avståndet vänster/höger kändes ojämnt fast CSS-
   paddingen faktiskt var symmetrisk (bekräftat med exakt pixelmätning). Löst genom att byta ut
   bildikonen mot en egen liten "18+"-textbadge byggd i ren CSS (cirkel + `currentColor`-baserad
   textfärg) — den anpassar sig automatiskt till både ljust och mörkt läge utan att bero på en
   specifik bildfils inbakade färg, och kan aldrig bli osynlig mot sin egen bakgrund. Rutan är
   samtidigt gjord lite lättare/mindre "kort-aktig" (ingen egen bakgrundsplatta/kant runt om,
   bara en tunn linje ovanför) så den känns som en diskret notis under ingressen snarare än en
   till egen låda på sidan. */
.tips-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin: 20px 0 26px;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.6;
}
.tips-notice p { margin: 0; }
.tips-notice-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--text-faint);
  color: var(--text-dim);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 1px;
}
.tips-notice a { color: var(--text-dim); text-decoration: underline; }
.tips-notice a:hover { color: var(--accent); }

.tips-record-strip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-dim);
}
.tips-record-strip strong { font-size: 18px; color: var(--text); }

.tips-empty { padding: 40px 0; color: var(--text-dim); }
/* Redaktörsnotisen — medvetet en helt annan visuell stil (streckad kant, mindre text, ikon) än
   sidans vanliga textstycken, så den ALDRIG kan förväxlas med riktig sidcopy av misstag, ens av
   sajtägaren själv. Syns bara för inloggade som kan redigera (se inc/tips.php).
   Del 58, fyrtiosjätte uppföljningen: samma klass återanvänds nu även av [poang_expert_stats]-
   kortkoden för dess egna felmeddelanden (fel skribentnamn/ingen statistik än) — samma syfte,
   samma "kan aldrig förväxlas med riktig text"-princip, ingen anledning till en andra, nästan
   identisk klass. */
.tips-admin-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 14px;
  max-width: 60ch;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.5;
}
.tips-admin-hint-icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.tips-admin-hint-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Skribentens facit (statistikruta, [poang_expert_stats]-kortkoden) ----------
   Del 58, fyrtiosjätte uppföljningen: samma grundmönster som .league-fact-strip/.league-fact
   (tabellsidornas fakta-gadget) — en rad enkla, luftiga siffer-"kakel" i stället för en tät
   tabell, så den känns hemma på sajten trots att den dyker upp på en helt annan sorts sida (en
   fristående skribentsida, inte en ligasida). Vinst/förlust-siffrorna får samma temafärger
   (grön/röd) som resten av sajtens vunnet/förlorat-signaler (se tip-result-win/loss i
   speltipskorten ovan) — samma färgspråk, igenkännbart oavsett var på sajten man ser det. */
.expert-stats {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 22px;
  margin: 26px 0;
}
.expert-stats-title {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  margin: 0 0 16px;
}
.expert-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 18px 14px;
}
.expert-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 5px;
}
.expert-stat-value { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.2; }
.expert-stat-pct { font-size: 13px; font-weight: 700; color: var(--text-faint); margin-left: 2px; }
.expert-stat-win .expert-stat-value { color: var(--accent); }
.expert-stat-loss .expert-stat-value { color: var(--red); }
.expert-stat-refund .expert-stat-value { color: var(--gold); }

/* grid-template-columns har ett FAST maxvärde (inte 1fr) med flit: så länge det bara finns
   ett fåtal tips (t.ex. bara ett, som på en helt ny sajt) sträcker sig INTE kortet ut över hela
   radens bredd — det stannar vid maxbredden och resten av raden lämnas som marginal i stället.
   Utan detta max sträckte auto-fit/1fr ut ett ensamt kort till hela sidans bredd (~1140px), vilket
   fick allt inuti (pick-rutan, spelbolagsraden) att se glest och "för långt" ut eftersom innehållet
   inte fyllde den breda ytan. Maxvärdet 360px är avstämt mot sajtens --maxw (1180px) så att tre
   kort fortfarande får plats per rad på skrivbord när det finns fler tips. */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
  gap: 20px;
  margin: 0 0 40px;
}
.tip-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
/* En tunn färgad topplist ger korten lite mer "märkeskänsla" och gör att de sticker ut mot en
   annars ganska vit sida, utan att bli larmigt eller barnsligt.
   Del 58, fyrtioandra uppföljningen: listen var tidigare EXAKT samma grön-till-blå-gradient på
   alla kort oavsett resultat — dvs den bar ingen information, bara dekoration. Användaren tyckte
   det var svårt att snabbt hålla isär vilka tips som redan är avgjorda och vilka som fortfarande
   är kommande matcher när man skummar igenom flera kort i rutnätet. Listen är nu i stället en
   statusfärg (blå=kommande, grön=vunnet, röd=förlorat, guld=push, grå=void, se
   `.tip-card-state-*::before` nedan) — samma färger som redan användes på statusetiketten
   (.tip-result-*), bara flyttade upp till den mest synliga ytan på hela kortet. Tanken är att man
   ska kunna avgöra utfallet på en hel rad kort bara genom att svepa blicken över topplisterna,
   utan att behöva läsa någon text alls. Basfärgen nedan (grå) används bara som fallback ifall ett
   kort mot förmodan saknar en giltig state-klass. */
.tip-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--border);
}
.tip-card-state-open::before { background: var(--blue); }
.tip-card-state-win::before { background: var(--accent); }
.tip-card-state-loss::before { background: var(--red); }
.tip-card-state-push::before { background: var(--gold); }
.tip-card-state-void::before { background: var(--text-faint); }
.tip-card:hover {
  box-shadow: 0 14px 30px rgba(16, 21, 31, 0.12);
  transform: translateY(-2px);
}
/* Del 57, tjugofemte uppdateringen: kortets översta rad var tidigare logga+"Poängställnings
   tips"-text (vänster) + Units (höger) — loggan/texten togs bort på användarens begäran, sport/
   liga-pillen (tjugotredje uppdateringen) flyttades hit i stället så raden inte blir tom.
   `flex-wrap` skyddar mot att pill+units krockar på riktigt smala skärmar. */
.tip-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
/* .tip-stars/.tip-stars svg (den gamla 1–5-stjärnindikatorn) används inte längre sen "Units
   X/10" ersatte den (del 57, åttonde uppdateringen) — reglerna lämnas kvar orörda ifall
   stjärnorna någon gång ska tas tillbaka, men matchar ingen markup i inc/tips.php just nu. */
.tip-stars { display: flex; gap: 2px; flex-shrink: 0; }
.tip-stars svg { width: 14px; height: 14px; }

/* Ny "Units X/10"-indikator (ersätter stjärnorna) — ren text + en liten fyllnadsbar i stället
   för ikoner, dels för att matcha vanlig speltips-terminologi, dels för att undvika att någon
   framtida SVG-storleksbugg (se cache-fixen ovan i det här dokumentet/README) ens är möjlig här.
   `margin-left: auto` (tillagd tjugofemte uppdateringen) håller Units mot höger kant oavsett om
   sport-pillen (dess enda möjliga syskon på raden) finns med eller inte. */
.tip-units { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; margin-left: auto; }
.tip-units-text { white-space: nowrap; line-height: 1; }
.tip-units-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; margin-right: 3px; }
.tip-units-num { font-size: 13.5px; font-weight: 800; color: var(--accent); }
.tip-units-max { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.tip-units-bar { width: 64px; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tip-units-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* Del 57, tjugotredje uppdateringen: liten färgad sport/liga-pill, samma grönton som sajtens
   accentfärg — direkt inspirerad av "ISHOCKEY – NHL"/"FOTBOLL – SERIE A"-pillarna i
   referensbilderna av överodds.se ("vi ska ha in lite mer färg overall ... så att det händer
   nåt"). Tjugofemte uppdateringen: flyttad in i .tip-card-top (bredvid Units) i stället för att
   ligga som en egen rad, sen loggan/brand-texten som tidigare låg där togs bort.
   Del 58, fyrtiotredje uppföljningen: bytt från samma gröna accentfärg som "Dagens värdespel"/
   "Vunnet"/topplisten till en neutral grå ton, på användarens begäran efter att statusetiketten
   (fyrtioandra uppföljningen) tillkommit — tre olika saker på kortet (sport/liga, redaktionell
   tagg, matchstatus) hade då av en slump landat i exakt samma grönton, vilket gjorde att pillen
   smälte ihop med "Dagens värdespel" och "Vunnet" i stället för att stå för sig själv som ren,
   neutral metadata (vilken sport/liga det är, inget "utfall" eller "vår bedömning"). Medvetet
   INTE en egen fjärde färg (guld/blå/röd är redan upptagna av andra betydelser på kortet) — grått
   signalerar "bara fakta/kategori" utan att konkurrera om uppmärksamhet med de färgkodade
   elementen, och behåller ändå samma pill-form/storlek som innan ("gillar utseendet, bara inte
   för likt"). */
.tip-sport-pill {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 999px;
}

.tip-matchup-teams {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tip-matchup-vs { color: var(--text-faint); font-weight: 600; }
.tip-matchup-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}
/* Del 57, tjugofemte uppdateringen: "Spelstopp:"-etikett framför matchens datum/tid, på
   användarens begäran — samma etikettstil (fet, versal, dämpad färg) som redan används för
   "Spelrek:"/"Units" på andra ställen på kortet, för konsekvens. */
.tip-matchup-deadline-label { font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .03em; }

.tip-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tip-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tip-badge-gold { background: var(--gold-bg); color: var(--gold); }
.tip-badge-accent { background: var(--accent-dim); color: var(--accent); }
.tip-badge-blue { background: var(--blue-bg); color: var(--blue); }
.tip-badge-neutral { background: var(--surface-2); color: var(--text-dim); }
/* Del 58, trettionde uppföljningen: saknades helt innan — de FASTA taggarna (poang_tip_badge_
   options()) använder bara accent/gold/blue och behövde därför aldrig en röd variant, men den nya
   egna fritextaggen (poang_custom_badge_color()) återanvänder samma fyrfärgade hash-palett som
   poang_book_color() (accent/gold/blue/RED) — utan den här regeln blev taggen helt ostylad
   (ingen bakgrund/färg alls) varje gång hashen råkade landa på "red". Upptäckt genom att faktiskt
   rendera och titta på en skärmdump, inte bara läsa koden. */
.tip-badge-red { background: var(--red-dim); color: var(--red); }
/* Del 58, fyrtiofjärde uppföljningen: "vunna spel ska poppa ännu mer, man vill skylta med spelen
   som sitter" — VUNNET fick därför en HELT fylld bakgrund (i stället för samma ljusa
   fyllnad+text-i-färg som alla andra lägen delar, se .tip-result-loss/push/void/open nedan) med
   vit text, så den sticker ut med betydligt högre kontrast än de andra statusetiketterna. Ingen
   kant behövs längre (border: 1px solid currentColor från .tip-result-badge hade annars blivit en
   vit ring — snyggt i sig, men onödigt här när fyllnaden redan gör jobbet). */
.tip-result-win { background: var(--accent); color: #fff; border-color: transparent; }
/* Fyrtiofemte uppföljningen, samma dag: FÖRLORAT fick samma fylld-bakgrund-behandling som
   VUNNET ovan, på uttrycklig begäran. Push/void/open (nedan) fortsatt oförändrade — bara de två
   AVGJORDA "starka" utfallen (vunnet/förlorat) ska sticka ut extra mycket. */
.tip-result-loss { background: var(--red); color: #fff; border-color: transparent; }
/* Del 57, fjortonde uppdateringen: Push fick guld/gult i stället för grått (samma nyans som
   .tip-badge-gold/"Bästa tipset") på användarens begäran, för att sticka ut mer som ett
   "särskilt" resultat i stället för att se lika neutralt/obetydligt ut som Void. Void är
   kvar grått — det är fortfarande ett neutralt "räknas inte"-utfall. */
.tip-result-push { background: var(--gold-bg); color: var(--gold); }
.tip-result-void { background: var(--surface-2); color: var(--text-faint); }

/* Del 58, fyrtioandra uppföljningen: "Kommande" (öppna/ej spelade tips) fick tidigare ingen
   etikett alls, se motiveringen i inc/tips.php poang_render_tip_card(). Blå matchar
   .tip-card-state-open::before ovan och sajtens övriga användning av blått för "på gång/kval"
   (se --blue-kommentaren i :root). */
.tip-result-open { background: var(--blue-bg); color: var(--blue); }

/* Statusetiketten (.tip-result-badge) ska alltid vara det första man lägger märke till i
   taggraden — den beskriver ett OBJEKTIVT faktum (matchens status), till skillnad från de
   redaktionella taggarna (.tip-badge-gold/accent/blue/neutral, "Dagens värdespel" osv) som bara
   är sajtens egen bedömning/vinkel. En extra kant i samma nyans som texten + en liten prick-ikon
   räcker för att den ska skilja sig från de mjukare, kantlösa redaktionella taggarna utan att bli
   för skrikig — ingen egen bakgrundsfärg utöver den redan existerande .tip-result-*-färgen ovan. */
.tip-result-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
}
.tip-result-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  flex-shrink: 0;
}
/* Den blå "Kommande"-pricken pulserar svagt (samma @keyframes pulse som livetickerns .live-dot,
   se rad ~168) — en liten, redan etablerad visuell signal på sajten för "något som fortfarande
   pågår/inte är klart än", återanvänd här i stället för att hitta på en ny animation. Vunna/
   förlorade/push/void-prickarna står stilla — de beskriver ett redan avgjort, statiskt utfall. */
.tip-result-open .tip-result-dot { animation: pulse 1.6s infinite; }
/* Bock-/kryss-ikonen som ersätter pricken för VUNNET/FÖRLORAT (se inc/tips.php) — samma
   `currentColor`-trick som pricken, så den automatiskt blir vit på de nu fyllda bakgrunderna. */
.tip-result-icon { width: 11px; height: 11px; margin-right: 4px; flex-shrink: 0; stroke: currentColor; }

/* Del 58, fyrtiofjärde uppföljningen, fortsättning: hela kortet ska gå att känna igen som en
   "vinnare" utan att man ens behöver läsa taggen — tjockare topplist, en grön kant runt hela
   kortet i stället för den neutrala standardkanten, och ett svagt grönt sken bakom kortet utöver
   sajtens vanliga skugga. `box-shadow` skrivs med FLERA kommaseparerade skuggor (sajtens vanliga
   --shadow + en extra, grönfärgad, mjuk skugga) i stället för att ersätta den vanliga skuggan —
   annars hade vunna kort tappat sin vanliga djupkänsla och bara sett "plattare" ut, tvärtemot
   avsikten. Hover-varianten skriver om HELA .tip-card:hovers regel (inte bara lägger till) med
   samma lyft+skugga som alla andra kort redan har, plus samma gröna sken, så det inte blir
   inkonsekvent vilket kort som lyfter mest vid hover.
   Fyrtiofemte uppföljningen, samma dag: identisk behandling (röd i stället för grön) på
   .tip-card-state-loss — "ska man kanske göra samma på förlorat". Push/void/open helt
   oförändrade, bara vunnet/förlorat ska sticka ut extra. */
.tip-card-state-win {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent-dim), 0 10px 26px -8px rgba(21, 128, 61, 0.45);
}
.tip-card-state-win:hover {
  box-shadow: 0 14px 30px rgba(16, 21, 31, 0.12), 0 0 0 1px var(--accent), 0 14px 30px -8px rgba(21, 128, 61, 0.5);
}
.tip-card-state-win::before { height: 6px; }

.tip-card-state-loss {
  border-color: var(--red);
  box-shadow: var(--shadow), 0 0 0 1px var(--red-dim), 0 10px 26px -8px rgba(220, 38, 38, 0.45);
}
.tip-card-state-loss:hover {
  box-shadow: 0 14px 30px rgba(16, 21, 31, 0.12), 0 0 0 1px var(--red), 0 14px 30px -8px rgba(220, 38, 38, 0.5);
}
.tip-card-state-loss::before { height: 6px; }

.tip-analysis { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin: 0; }

/* Del 57, tjugoandra uppdateringen, steg 1 av skribentomställningen: en enkel, kompakt byline
   (avatar + namn) under analystexten, bara om tipset har en kopplad expert. Avataren är antingen
   experten faktiska uppladdade foto (beskuret till en cirkel) eller — om inget foto finns — en
   liten cirkel med namnets initialer, så det aldrig blir ett tomt/trasigt hål.
   Tjugotredje uppdateringen, samma dag: två konkreta rättningar efter användarens första skarpa
   test (experten "Albin", utan foto). (1) Avataren fick tre möjliga bakgrundsfärger (grön/guld/
   blå, valda deterministiskt per expert-ID i PHP, se poang_expert_color()) i stället för att
   alltid vara samma enfärgade grönt — mer liv, olika experter syns tydligare isär. Avataren
   gjordes samtidigt något större (26px → 30px) för att kännas mer som en riktig avatar. (2) Den
   gamla, felplacerade gröna bocktexten bredvid namnet ersattes med en riktig, blå, cirkelformad
   "verifierad"-badge SOM OVERLAY på avatarens nedre högra hörn (position: absolute), med en
   tunn "ring" i sidans egen bakgrundsfärg runt om så den inte flyter ihop med fotot/initialerna
   — samma mönster som Twitter/Instagrams verifierad-bock, vilket var vad referensbilden visade. */
.tip-byline { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; }
.tip-byline-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-byline-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.tip-byline-avatar-accent { background: var(--accent-dim); }
.tip-byline-avatar-accent .tip-byline-initials { color: var(--accent); }
.tip-byline-avatar-gold { background: var(--gold-bg); }
.tip-byline-avatar-gold .tip-byline-initials { color: var(--gold); }
.tip-byline-avatar-blue { background: var(--blue-bg); }
.tip-byline-avatar-blue .tip-byline-initials { color: var(--blue); }
.tip-byline-initials { font-size: 11px; font-weight: 700; }
.tip-byline-name { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.tip-byline-verified-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
  display: flex;
}
.tip-byline-verified-badge svg { width: 14px; height: 14px; display: block; }

/* Del 57, tjugofjärde uppdateringen — HELT NY bokmakarsektion, ersätter uppdatering tjugos
   "låsta" pick-box-design (se borttagen kommentar/regler, tidigare här) på uttrycklig begäran:
   "hela boxen ser ju exakt likadan ut ... fortfarande väldigt vit och grön ... det saknas ju
   färg samt de olika saker som finns på de bilder jag skicka." Färgvärdena är inte gissade —
   https://overodds.se besöktes på riktigt och deras faktiska renderade CSS-färger lästes av
   (blå länktext #36A9E1 → vår egen var(--blue), grön oddspill #86C06A → vår egen var(--accent),
   ljusgrå knapp #E7EDEE-familjen → var(--surface-2)), så samma ROLL som i referensen återskapas
   med sajtens EGNA temafärger i stället för att importera främmande hex-koder som inte följer
   med i mörkt läge automatiskt. */
.tip-pick-line { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.tip-pick-line-label { font-weight: 700; color: var(--text-faint); text-transform: uppercase; font-size: 11px; letter-spacing: .03em; margin-right: 4px; }

/* En enhetlig lista av fullbreddade rader — huvudpicken och alla jämförelserader ser likadana ut
   (ingen "vinner mest uppmärksamhet"-ruta längre), precis som referensens "Rygga reken hos X"-
   rader. Max fyra rader totalt (huvudpick + tre extra, se admin-formuläret/save-spärren). */
.tip-book-list { display: flex; flex-direction: column; gap: 8px; }
.tip-book-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
a.tip-book-row:hover { border-color: var(--blue); transform: translateY(-1px); }

/* Radens lilla färgade "logotyp"-ruta är INTE en påhittad/gissad spelbolagslogga (samma no-
   fabrication-princip som byline-avatarerna) — bara bolagets initial i en av sajtens fyra
   temafärger, vald stabilt per bolagsnamn (poang_book_color() i inc/tips.php). */
.tip-book-row-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.tip-book-row-logo-accent { background: var(--accent); }
.tip-book-row-logo-gold { background: var(--gold); }
.tip-book-row-logo-blue { background: var(--blue); }
.tip-book-row-logo-red { background: var(--red); }
/* Del 58, tjugoåttonde uppföljningen: samma bild-variant som .betting-bookmaker-logo-img
   (inc/betting.php) — visas i stället för initial-badgen när spelbolagsnamnet matchar ett bolag
   som redan har en riktig logotyp uppladdad på Spelbolag-sidan. */
.tip-book-row-logo-img { object-fit: contain; background: var(--surface-2); padding: 3px; }

/* Blå, fet länktext för en klickbar rad (motsvarar referensens #36A9E1) — en vanlig div (inte en
   länk, inte blå) när inget avtal/spårningslänk är ifyllt än, så det aldrig ser klickbart ut utan
   att vara det. */
.tip-book-row-name { font-size: 14px; font-weight: 700; flex: 1 1 auto; min-width: 0; color: var(--text-dim); }
a.tip-book-row .tip-book-row-name { color: var(--blue); }

.tip-book-row-odds {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}

.tip-ad-disclosure { font-size: 10.5px; color: var(--text-faint); margin: 0; }

@media (max-width: 560px) {
  .tip-card { padding: 16px; }
  .tip-matchup-teams { font-size: 15px; }
  .tips-notice { flex-direction: column; align-items: flex-start; }
  /* Del 57, tjugosjätte uppdateringen: på mobil ska tipskortet fylla ut skärmen mer än tidigare
     ("kan du göra så att boxen på mobil fyller ut skärmen") — INTE bara vara lika brett som
     `.wrap`s 20px-padding tillåter, som tidigare. grid-template-columns byts från skrivbordets
     fasta 320–360px-tak till 1fr, så den enda kolumnen på mobil sträcker sig ut mot skärmkanten
     i stället för att stanna kvar på 360px. Gäller BARA under 560px — skrivbordsstorleken
     (320–360px-taket från femte uppdateringen, som fanns för att en ensam bred desktop-kolumn
     såg gles/tom ut) rörs inte alls.
     Tjugosjunde uppdateringen (rättelse, samma dag): en fullständigt negativ marginal (-20px,
     exakt lika med .wrap:s padding) gjorde kortet HELT kant-i-kant med skärmkanten — inga
     synliga sidomarginaler alls. Användaren påpekade att det då slutade se ut som en "box"
     ("det måste ändå vara som en box man ser, nu går den hela vägen ut och det bli lite fel").
     Löst genom att bara kompensera bort HÄLFTEN av .wrap:s padding (-12px av 20px), så att en
     liten men tydlig gutter (8px) finns kvar på var sida — kortets rundade hörn, ram och skugga
     syns fortfarande mot sidans bakgrund som en avgränsad box, samtidigt som den är betydligt
     bredare än ursprungsläget (som hade hela 20px gutter). */
  .tips-grid {
    grid-template-columns: 1fr;
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* ---------- Betting (del 58) ----------
   Spelbolagslistans radlayout (rank + logotyp + text + knapp) är samma grundidé som Speltips-
   sidans .tip-book-row (se inc/tips.php/tjugofjärde uppdateringen), bara skalad upp med mer
   innehåll per rad (fördelar, egen call-to-action-knapp) eftersom det här är den fristående
   spelbolagslistan, inte en kompakt rad inuti ett tipskort. Använder samma
   poang_book_color()/poang_initials()-färgprincip som .tip-book-row-logo, se inc/betting.php. */
.betting-section-heading { margin: 40px 0 8px; }
.betting-section-intro { margin: 0 0 18px; color: var(--text-dim); }

/* Del 58, elfte uppföljningen: ersätter den stora, inramade .tips-notice-rutan med en liten,
   diskret rad utan stor badge — se den utförliga kommentaren i inc/betting.php för bakgrunden
   till bytet.
   Tolfte/trettonde uppföljningen: helt utan ram kändes för osynlig, så en tunn, liten ram/box
   lades till igen (betydligt mindre påtaglig än originalets stora kort med 18+-badge) — bara en
   smal ram + lite innerpadding, ingen badge, ingen stor yta.
   Sextonde uppföljningen: döpt om från .betting-compliance-note till detta generiska namn och
   återanvänds nu på SAMMA sätt av Speltips-sidan (inc/tips.php) — samma önskemål där ("kan vi
   också fixa till denna på samma sätt"). .tips-notice/.tips-notice-badge längre upp i den här
   filen används inte längre av något, kvar orörda om det skulle behövas igen. */
.poang-compliance-note {
  /* Del 58, sjuttonde uppföljningen: saknade underkant-marginal, så rutan gick nästan ihop med
     det som kom direkt efter (tipskorten på Speltips-sidan, bokmakarlistan på Betting-sidan) —
     "boxen går in i våra bettingtips, måste ha lite luft mellan". */
  margin: 18px 0 24px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-faint);
}
.poang-compliance-note a { color: var(--text-faint); text-decoration: underline; }
.poang-compliance-note a:hover { color: var(--accent); }

/* Del 58, fjärde uppföljningen: sidans bredd/marginaler ska vara EXAKT som resten av sajtens
   sidor (full `.wrap`, ingen extra centrerad/smalare kolumn — den förra uppdateringen som gjorde
   det var fel väg att gå, bekräftat av användaren: "du skulle ej göra listan samt texten mindre
   och centrerat"). Det faktiska problemet satt i RADEN, inte i sidbredden: en enkel flex-rad med
   bara "logotyp + namn/fördelar" packat längst till vänster och en knapp längst till höger, utan
   något i mellanrummet, ser trasig ut när raden är 1180px bred — inte för att raden är bred, utan
   för att layouten inte använde bredden till något. Löst genom att göra om raden till ett RIKTIGT
   grid med egna kolumner (rank, logotyp, namn/beskrivning, fördelar, knapp) — samma grundidé som
   referenssajtens tabellrad (SPELBOLAG | FÖRDELAR | BONUS | BETYG | BESÖK), fast i sajtens egen
   design. Fördelarna får nu en egen kolumn i stället för att klämmas in under namnet, vilket
   sprider ut innehållet naturligt över hela radens bredd i stället för att klumpa ihop allt till
   vänster. */
.betting-bookmakers { display: flex; flex-direction: column; gap: 14px; margin: 0 0 8px; }
.betting-bookmaker-card {
  position: relative;
  display: grid;
  /* Del 58, tionde uppföljningen (desktop): bonuskolumnen behöver inte lika mycket plats som
     fördelarna (bonustexterna är korta, "100% upp till 1500kr" får gott om plats även smalare)
     — smalnade av bonuskolumnen och gav utrymmet vidare till fördelarna i stället, så längre
     fördelstexter ("Live streaming + betting i samma tjänst") får plats på en rad utan
     radbrytning, bekräftat med en riktig skärmdump från användaren där just den texten annars
     bröts av till två rader.
     Trettonde uppföljningen: bonusrutorna skulle flyttas "lite mer till vänster" medan
     fördelarna/knappen skulle ligga kvar där de var. Löst genom att flytta 0.25fr FRÅN
     namn/beskrivnings-kolumnen (info, 1fr → 0.75fr) TILL bonuskolumnen (0.6fr → 0.85fr) — den
     kombinerade bredden info+bonus är exakt densamma som innan (1.6fr båda gångerna), så
     fördelarnas och knappens position rör sig inte alls, bara var gränsen mellan namnet och
     bonusrutorna går, vilket flyttar bonusrutorna åt vänster (och ger dem lite mer plats,
     bra bieffekt: mindre risk att bonusrutans egen text radbryter på smalare skärmar). */
  grid-template-columns: auto auto minmax(140px, 0.75fr) minmax(150px, 0.85fr) minmax(210px, 1.35fr) auto;
  grid-template-areas: "rank logo info bonus perks cta";
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Del 58, femte uppföljningen: valfri "stämpel" (t.ex. "Topprankad") ger raden en egen
   färgad ram + en liten flagga som sticker upp ovanför kortet — samma idé som referensens
   "TOP RATED!"-ram, fast i sajtens egen gröna accentfärg i stället för kopierad design. */
.betting-bookmaker-card-featured {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(21,128,61,0.16);
}
.betting-bookmaker-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.betting-bookmaker-rank {
  grid-area: rank;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.betting-bookmaker-logo {
  grid-area: logo;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.betting-bookmaker-logo-accent { background: var(--accent); }
.betting-bookmaker-logo-gold { background: var(--gold); }
.betting-bookmaker-logo-blue { background: var(--blue); }
.betting-bookmaker-logo-red { background: var(--red); }
.betting-bookmaker-logo-img { object-fit: contain; background: var(--surface-2); padding: 4px; }

.betting-bookmaker-info { grid-area: info; min-width: 0; }
.betting-bookmaker-name { margin: 0 0 2px; font-size: 16px; }
.betting-bookmaker-desc { margin: 0; font-size: 13.5px; color: var(--text-dim); }

/* Del 58, femte uppföljningen: två valfria bonusrutor (Välkomstbonus/Bonus extra), egen kolumn
   precis som fördelarna — samma platshållarprincip (.betting-bookmaker-bonus-empty) så kolumnen
   inte kollapsar och flyttar resten av raden på rader som saknar bonusinfo. Återanvänder samma
   färgpar som "Tänk på"-rutorna (gold/accent) i stället för att hitta på nya färger. */
.betting-bookmaker-bonus, .betting-bookmaker-bonus-empty { grid-area: bonus; }
.betting-bookmaker-bonus { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.betting-bookmaker-bonus-box {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  min-width: 0;
}
/* Del 58, sjätte uppföljningen, rättelse: --gold-bg (brun-ton i mörkt läge) uppfattades som
   fult/otydligt av användaren i skarpt läge, se skärmdump. Bytt till samma blå färgpar som
   redan finns i temat (används annars bara för "europaplats/kval" och en av illustrationerna)
   — ger en tydligare blå/grön tvåfärgskombination i stället för den brunaktiga gul/grön-kombon,
   och ingen krock med "Tänk på"-rutornas gula färg längre ner på sidan. */
.betting-bookmaker-bonus-welcome { background: var(--blue-bg); border-left-color: var(--blue); }
.betting-bookmaker-bonus-extra { background: var(--accent-dim); border-left-color: var(--accent); }
.betting-bookmaker-bonus-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-faint);
}
.betting-bookmaker-bonus-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  overflow-wrap: break-word;
}

/* Egen kolumn, inte längre stoppad under namnet — det är den här kolumnen som gör att raden
   faktiskt fyller ut bredden i stället för att lämna ett tomt hål. En osynlig platshållare
   (.betting-bookmaker-perks-empty) reserverar samma kolumnbredd när ett bolag inte fyllt i några
   fördelar, så knappen ändå hamnar på samma ställe rad för rad — annars hade grid-kolumnerna
   flyttat sig beroende på om just den raden råkade ha fördelar ifyllda eller inte. */
.betting-bookmaker-perks, .betting-bookmaker-perks-empty { grid-area: perks; }
.betting-bookmaker-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.betting-bookmaker-perks li { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.betting-bookmaker-perk-check { color: var(--accent); font-weight: 800; flex-shrink: 0; }

/* Del 58, femte uppföljningen: knappen ligger nu i en egen liten kolumn tillsammans med en
   18+-text under, i stället för att vara själva grid-cellen — samma tänk som referensens
   knapp + "18+ · T&C apply"-rad, men med sajtens egen ansvarsfullt-spelande-formulering i
   stället för att hitta på nytt innehåll. Ingen andra/sekundär knapp (t.ex. "recension")
   tillagd — bekräftat med användaren att hoppa över det tills det finns riktiga recensioner
   att länka till. */
.betting-bookmaker-cta-wrap {
  grid-area: cta;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.betting-bookmaker-cta {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  /* Del 58, tionde uppföljningen: knappen gjord större/längre på användarens uttryckliga
     begäran ("gör spel-knappen lite större/längre än den är nu") — mer horisontell och
     vertikal padding, ett par storlekar större text. */
  padding: 13px 34px;
  min-width: 140px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition: transform .15s ease, opacity .15s ease;
}
a.betting-bookmaker-cta:hover { transform: translateY(-1px); }
div.betting-bookmaker-cta { background: var(--surface-2); color: var(--text-faint); }
.betting-bookmaker-disclaimer { margin: 0; font-size: 10.5px; color: var(--text-faint); text-align: center; white-space: nowrap; }

.betting-bookmaker-card-empty {
  display: flex;
  justify-content: center;
  border-style: dashed;
  box-shadow: none;
}
.betting-bookmaker-empty-body { text-align: center; }
.betting-bookmaker-empty-text { margin: 0; font-size: 13.5px; color: var(--text-faint); }

/* "Tänk på"-rutorna som bryter upp den längre brödtexten — samma idé som .tips-notice
   (badge + text) men som en fristående, lite mer framträdande ruta mitt i innehållet. */
.betting-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0;
  padding: 16px 18px;
  background: var(--gold-bg);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
}
.betting-tip-box-warn { background: var(--red-dim); border-left-color: var(--red); }
.betting-tip-box-icon { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.betting-tip-box-body { min-width: 0; }
.betting-tip-box-label {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
}
.betting-tip-box-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.betting-tip-box-text a { color: var(--text-dim); text-decoration: underline; }

/* Tre illustrationer sida vid sida i stället för en enda (del 58, uppföljning) — samma
   kortstil som resten av sajten (yta/kant/radie), bara i ett grid i stället för en fristående
   ruta så de tre bildas som en enhetlig grupp snarare än tre lösryckta element. */
.betting-illustration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.betting-illustration-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.betting-illustration { width: 100%; max-width: 260px; height: auto; }
.betting-illustration-caption { margin: 0; font-size: 12.5px; color: var(--text-faint); text-align: center; }

@media (max-width: 900px) {
  /* Del 58, fjärde uppföljningen: kortet gick från flex till grid med fasta kolumner
     (se kommentaren ovanför .betting-bookmaker-card) för att lösa desktop-buggen, men
     samma fasta kolumner fick inte plats på en mobilskärm — innehåll klipptes av utanför
     kortet. Här byggs raden om till två kolumner och staplas i stället (rank+logga i
     vänsterkolumnen, namn i högerkolumnen, sen bonus/fördelar/knapp som egna fullbredds-
     rader under), med hjälp av samma grid-area-namn som redan sätts på varje del av kortet
     ovan. Femte uppföljningen: samma mönster utökat med en egen rad för bonusrutorna, och
     brytpunkten höjd från 640px till 900px — sex fasta desktop-kolumner (rank, logga, namn,
     bonus, fördelar, knapp) blir för trångt redan på surfplatte-/liten bärbar-bredd, inte
     bara på telefon, så samma stapel-layout används nu genomgående under 900px (samma
     brytpunkt som sajtens egen mobilmeny redan använder). */
  .betting-bookmaker-card {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo info"
      "bonus bonus"
      "perks perks"
      "cta cta";
    gap: 10px 14px;
    padding: 16px;
  }
  /* Del 58, åttonde uppföljningen (bara mobil, enligt användarens uttryckliga önskemål — desktop
     rörs inte här): rank-siffran togs bort helt ("ta bort siffran uppe i hörnet"), och loggan tar
     nu dess plats högst upp i vänsterkolumnen i stället, förstorad så den går i linje med namnet
     och beskrivningstexten bredvid ("flytta upp loggan... öka storlek på den"). Eftersom "logo" nu
     är ensam i sin grid-rad centreras den automatiskt mot hela info-blockets höjd (namn + text). */
  .betting-bookmaker-rank { display: none; }
  .betting-bookmaker-logo { width: 64px; height: 64px; border-radius: 12px; font-size: 20px; }
  /* De tre fördelarna (bockarna) flyttade in en aning så de hamnar i linje med var
     "VÄLKOMSTBONUS"-texten ovanför börjar (bonusrutans egen border-left 3px + padding-left 10px
     = 13px indrag) i stället för att stå längre ut till vänster än bonustexten ovanför. */
  .betting-bookmaker-perks { padding-left: 13px; }
  .betting-bookmaker-perks-empty, .betting-bookmaker-bonus-empty { display: none; }
  .betting-bookmaker-bonus { flex-direction: row; flex-wrap: wrap; }
  .betting-bookmaker-bonus-box { flex: 1 1 130px; }
  .betting-bookmaker-cta-wrap { width: 100%; }
  .betting-bookmaker-cta { width: 100%; }
  .betting-bookmaker-badge { left: 16px; }
  /* Del 58, tjugonde uppföljningen (bara mobil — desktop rörs inte, redan bra där enligt
     användaren): stämpeln (.betting-bookmaker-badge) sitter med top:-12px, dvs. den sticker upp
     12px OVANFÖR sitt eget korts överkant. Med den vanliga radmellanrummet (.betting-bookmakers
     gap: 14px, gäller alla bredder) blev det bara ~2px luft kvar mellan stämpelns absoluta
     toppkant och FÖREGÅENDE korts nederkant — så gott som ingenting, vilket gjorde att stämpeln
     visuellt gick in i kortet ovanför på smala skärmar (bekräftat med en riktig skärmdump:
     "SWISH OCH TRUSTLY"-stämpeln rörde vid SpeedyBet-kortet ovanför). Höjer bara radmellanrummet
     på mobil, inte mkt ("inte mkt men lite" enligt användaren) — 14px → 22px ger stämpeln produkt
     ~10px egen luft i stället för ~2px, utan att det blir ett stort glapp mellan korten. */
  .betting-bookmakers { gap: 22px; }
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 50;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(21,128,61,0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  table.standings { min-width: 560px; }
  .team-name .full { display: none; }
  .team-name .short { display: inline; }
  .match-card { flex-direction: column; align-items: stretch; }
  .match-meta { text-align: left; }
  /* Del 50: en kolumn i stället för två — sen "Guider" togs bort (footer.php) är "Om sajten"
     den enda vanliga rutnätscellen kvar här (Logga/tagline och Ligor-blocket tvingas redan
     till full bredd nedan), och en ensam kolumn i en 2-kolumnsrad hade bara lämnat ett tomt
     halvt hÅl bredvid den. */
  footer.site .foot-grid { grid-template-columns: 1fr; }
  footer.site .foot-brand { grid-column: 1 / -1; }
  /* Del 47: Ligor-blocket får hela bredden på smala skärmar (annars klämdes de tre
     underkolumnerna ihop i en enda smal ruta) — de tre grupperna får då plats sida vid sida. */
  footer.site .foot-leagues { grid-column: 1 / -1; }
  .back-to-top { right: 14px; bottom: 14px; }
}
@media (max-width: 480px) {
  /* Under ~480px räcker inte bredden längre för tre spalter ens med full footer-bredd —
     staplas i stället i en enda spalt så varje grupprubrik/lista förblir läsbar. */
  footer.site .foot-league-groups { column-count: 1; }
}
@media (min-width: 721px) and (max-width: 980px) {
  /* Mellanlägen (surfplatta) — Ligor-kolumnen är fortfarande bara en av fyra kolumner här
     (footerns egen 720px-brytpunkt ovan gäller resten av sidan, inte footern), så tre
     spalter sida vid sida blir för smalt och namn som "Premier League" radbryts. Två
     spalter ger varje länk gott om plats i stället. */
  footer.site .foot-league-groups { column-count: 2; }
}