/*
 Theme Name:        Oddsium 2.0
 Theme URI:         https://oddsium.com
 Author:            Oddsium
 Author URI:        https://oddsium.com
 Version:           2.0.0
 Requires at least: 6.0
 Tested up to:      6.7
 Requires PHP:      8.0
 Text Domain:       oddsium
*/

/****************************************************************/
/************************* CUSTOM *******************************/
/****************************************************************/
body {
  color: #000000;
  font-weight: 300;
}
h1,
h2 {
  font-family: var(--font-inter);
}

ul:not(.ez-toc-list) {
  list-style: disc;
  padding-left: 0;
  margin-left: 0;

  ol {
    list-style: decimal;
    padding-left: 0;
    margin-left: 0;
  }

  li {
    margin-left: 1rem;
    padding-left: 0;
    position: relative;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);

    &::marker {
      font-size: 0.8em;
    }
  }
}

/* Greek hero heading */
body.gr .hero-title,
body.gr h2,
body.gr .single-content h1 {
  font-family: var(--font-lewis);
}
body.single-picks {
  background: #FAFAFA;
}
/* Copy bonus code */
.fade {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* Single content */
.single-content a:not(.btn) {
  color: var(--color-secondary);
  text-underline-offset: 2px;
  transition: all 0.2s ease-in-out;

  &:hover {
    text-decoration: underline;
  }
}

/* Footer links */
.widget_nav_menu li {
  margin-left: 0 !important;
}

.footer-nav-links h3 {
  font-size: 1.25rem;
  line-height: 28px;
  font-weight: 700;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid white;
  max-width: calc(2 / 3 * 100%);
}

.footer-nav-links .menu {
  padding-left: 0;
}
.footer-nav-links a {
  padding-inline: 0;
  padding-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--text-base);
  transition: color 0.2s ease-in-out;

  &:hover {
    box-shadow: none !important;
    background-color: transparent !important;
    color: #d1d5dc;
  }
}

.footer-nav-links p {
  margin-top: 1.6rem;
  line-height: 1.7rem;
}

@media screen and (max-width: 768px) {
  .footer-nav-links {
    h3 {
      font-size: var(--text-base);
      line-height: var(--text-base--line-height);
    }
    .menu,
    a {
      padding-top: 0;
    }
    a,
    p {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }
    li {
      margin-block: 0.2rem;
    }

    .widget_text:not(:last-of-type) {
      margin-bottom: 1.25rem;
    }
  }
}

/* TOC Widget */
.toc-widget-wrapper {
  #ez-toc-container,
  #ez-toc-widget-container {
    border: none;
    padding: 0;
    box-shadow: none;
    width: 100%;
    max-width: 75%;
  }
  .ez-toc-title-container {
    /* padding-bottom: 1rem; */
    /* margin-bottom: 1rem; */
    border-bottom: 1px solid;
    border-color: #eaeaea;
  }
  #ez-toc-container .ez-toc-list,
  #ez-toc-widget-container .ez-toc-list {
    padding-left: 0;
  }

  #ez-toc-container .ez-toc-title,
  #ez-toc-widget-container .ez-toc-title {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-inter);
    text-transform: none;
  }

  #ez-toc-container .ez-toc-btn-default,
  #ez-toc-widget-container .ez-toc-btn-default {
    border: none;
    background-image: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-base-content);
  }

  #ez-toc-container a[class*="ez-toc-heading-"],
  #ez-toc-widget-container a[class*="ez-toc-heading-"] {
    padding-bottom: 0;
  }

  #ez-toc-container a::before,
  #ez-toc-widget-container a::before {
    display: none;
  }
  #ez-toc-container :where(li ul) a,
  #ez-toc-widget-container :where(li ul) a {
    padding-block: 0.175rem;
    padding-inline: 0.75rem;
  }

  #ez-toc-container :where(li.active),
  #ez-toc-widget-container :where(li.active) {
    background-color: transparent;
  }

  #ez-toc-container :where(li.active ul):before,
  #ez-toc-widget-container :where(li.active ul):before {
    background-color: #0388fd;
    content: "";
    z-index: 90;
    inset-inline-start: 0;
    width: 5px;
    height: 1rem;
    position: absolute;
    top: 0.45rem;
    bottom: 0.85rem;
    opacity: 1;
  }
  .ez-toc-list :where(li) {
    flex-flow: column wrap;
    flex-shrink: 0;
    align-items: stretch;
    display: flex;
    position: relative;
    font-size: 0.875rem;
  }
  .ez-toc-list :where(li ul) {
    white-space: nowrap;
    margin-inline-start: 1rem;
    padding-inline-start: 0.5rem !important;
    position: relative;
    margin-left: 0 !important;
  }
  .ez-toc-list :where(li ul):before {
    /* background-color: #00182a; */
    opacity: 0.1;
    width: 1px;
    content: "";
    inset-inline-start: 0;
    position: absolute;
    top: 0.85rem;
    bottom: 0.65rem;
  }
  .ez-toc-heading-level-2 > a[class*="ez-toc-heading-"] {
    font-size: 0.875rem;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font-weight: 700;
    padding-left: 0;
    /* color: #000; */
    color: var(--color-base-content);
  }

  @media screen and (max-width: 768px) {
    #ez-toc-container,
    #ez-toc-widget-container {
      max-width: 100%;
      padding: 0.5rem;
      border: 1px solid #eaeaea;
      border-radius: 6px;
            margin-bottom: 14px;

    }
    #ez-toc-container .ez-toc-title-container,
    #ez-toc-widget-container .ez-toc-title-container {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    #ez-toc-container nav > .ez-toc-list,
    #ez-toc-widget-container nav > .ez-toc-list {
      border-top: 1px solid #eaeaea;
      padding-top: 1rem;
      margin-top: 1rem;
    }
    #ez-toc-container .ez-toc-js-icon-con,
    #ez-toc-widget-container .ez-toc-js-icon-con {
      border: none;
    }
    #ez-toc-container .ez-toc-title-container,
    #ez-toc-widget-container .ez-toc-title-container {
      place-items: center;
      justify-items: center;
    }
    #ez-toc-container .ez-toc-title,
    #ez-toc-widget-container .ez-toc-title {
      font-weight: normal;
      font-family: var(--font-sans);
      font-size: 14px;
    }

    #ez-toc-container .ez-toc-title,
    #ez-toc-container .ez-toc-title-toggle,
    #ez-toc-widget-container .ez-toc-title,
    #ez-toc-widget-container .ez-toc-title-toggle {
      display: inline-flex;
      width: 100%;
      align-items: center;
    }
  }
}

.toc-content-wrapper {
  .toc-headline {
    font-size: 36px;
    line-height: 42px;
  }

  h2,
  h3 {
    /* text-transform: uppercase; */
  }
  h1.toc-headline,
  h2,
  h3,
  h4 {
    font-family: var(--font-inter);
    font-weight: 700;
  }

  h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
    /* line-height: var(--text-3xl--line-height); */
  }

  h3,
  h4 {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }

  a {
    color: var(--color-secondary);

    &:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }

  ul {
    list-style: disc;
    padding-left: 0;
    margin-left: 0;
  }
  ol {
    list-style: decimal;
    padding-left: 0;
    margin-left: 0;
  }
  li {
    margin-left: 1rem;
    padding-left: 0;
    position: relative;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);

    &::marker {
      font-size: 0.8em;
    }
  }
}

body.gr .toc-content-wrapper h2,
body.gr .toc-content-wrapper h3,
body.gr .toc-content-wrapper h4 {
  font-family: var(--font-lewis);
  font-weight: 700;
}

body.gr #ez-toc-container .ez-toc-title,
body.gr #ez-toc-widget-container .ez-toc-title {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 700;
  font-family: var(--font-lewis);
}

body.gr .toc-content-wrapper .toc-headline {
  font-size: 2.625rem;
  line-height: 2.75rem;
}

body.gr .toc-content-wrapper h3,
body.gr .toc-content-wrapper h4 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

/* Country select */
.country-select-modal {
  /* position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  padding: 1rem; */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}
.country-select-modal.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
  z-index: 100;
  pointer-events: auto;
}

/* Tooltips */
/* .tooltip::before {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  padding: 1rem;
  font-size: 0.75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
} */

/* Breadcrumbs */

.aioseo-breadcrumb,
.aioseo-breadcrumb > * {
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  text-transform: uppercase;
  text-underline-offset: 2px;

  a:hover {
    text-decoration: underline;
  }
}
.aioseo-breadcrumb-separator {
  color: var(--color-error);
}

/* Disclaimer */
.disclaimer-wrapper figure {
  margin-bottom: 0;
}

/* FIX */
footer figure.size-full {
  height: auto !important;
}
.btn.btn-primary.btn-lg.btn-block {
  color: var(--color-primary-content);
}
.btn.btn-primary.btn-lg.btn-block:hover {
  text-decoration: none; 
}
h3.normal-case span, h3.normal-case { text-transform: none !important; }
/* Generate AI-button */
            main#primary {
                font-family: 'Inter' !important;
            }
            body.page-template-predictions {
                background: #FAFAFA;
            }
            .best-highlights .card-body {
                padding: 1.5rem 0 1.5rem 0;
            }
            .league .card-body{
                padding: 0;
            }
            .bg-blue-600 {
                background-color: aqua;
            }


            .size-4 {
                font-size: 18px;
                height: 16px;
            }

            .date-navigation a {
    transition: all 0.2s ease;
}
.date-navigation a:hover {
    transform: translateX(-2px);
}
.date-navigation a:last-child:hover {
    transform: translateX(2px);
}
.date-navigation svg {
    stroke-width: 2.5;
}

.ai-summary-content.border-t.p-3.mt-2, .ai-summary-skeleton.space-y-3.p-3.border-t.mt-2, .metainfo.border-t.mt-2.p-2 { border-color: #e5e7eb; }
    article .card-body {
        border-radius: var(--radius-box);
    }
    .max-w-230px {
        max-width:230px;
    }
    .max-w-280px {
        max-width:280px;
    }
        .max-w-310px {
        width:310px;
    }
.ai-summary-btn {
  position: relative;
  padding: 5px 12px;
  border: none;
  background: #fff;
  color: #3b46ff;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
}

/* Gradientborder som alltid rör sig långsamt */
.ai-summary-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    #4f46e5,
    #6366f1,
    #8b5cf6,
    #ec4899,
    #6366f1,
    #4f46e5
  );
  background-size: 300% 300%;
  z-index: -1;
  animation: borderFlow 8s linear infinite;
}

.text-gradient {
  background: linear-gradient(
    120deg,
    #4f46e5,
    #6366f1,
    #8b5cf6,
    #ec4899,
    #6366f1,
    #4f46e5
  );
  background-size: 300% 300%;
}

/* Vit insida så gradienten bara syns som kant */
.ai-summary-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: #ffffff;
  z-index: -1;
}

/* Vid hover: snabbare animation */
.ai-summary-btn:hover::before {
  animation: borderFlow 2s linear infinite;
}

@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.ez-toc-widget-container li.active>a {
  font-weight: 700 !important;
}
/****************************************************************/
/************************ DARK MODE *****************************/
/****************************************************************/

/* --- Color scheme hint for browser UI --- */
[data-theme="dark"] {
  color-scheme: dark;
}

/* --- Base body text & page backgrounds --- */
[data-theme="dark"] body {
  color: #d1d5db;
}
[data-theme="dark"] body.single-picks {
  background: #191e24;
}

/* --- Background overrides (white / light gray) --- */
[data-theme="dark"] .bg-white {
  background-color: #1d232a !important;
}
[data-theme="dark"] .bg-\[\#FFF\],
[data-theme="dark"] .bg-\[\#fff\],
[data-theme="dark"] .bg-\[\#ffffff\],
[data-theme="dark"] body.page-template-prediction {
  background-color: #1d232a !important;
}
[data-theme="dark"] .bg-\[\#FAFAFA\] {
  background-color: #191e24 !important;
}
[data-theme="dark"] .bg-\[\#f1f1f1\] {
  background-color: #2a323c !important;
}
[data-theme="dark"] .bg-gray-50 {
  background-color: #1d232a !important;
}
[data-theme="dark"] .bg-gray-100 {
  background-color: #232a33 !important;
}
[data-theme="dark"] .bg-gray-200 {
  background-color: #2a323c !important;
}

/* --- Hover background overrides --- */
[data-theme="dark"] .hover\:bg-white:hover {
  background-color: #232a33 !important;
}
[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: #2a323c !important;
}
[data-theme="dark"] .hover\:bg-gray-200:hover {
  background-color: #374151 !important;
}
[data-theme="dark"] .hover\:bg-base-200:hover {
  background-color: #191e24 !important;
}

/* --- Text color overrides (dark text → light) --- */
[data-theme="dark"] .text-gray-500 {
  color: #9ca3af !important;
}
[data-theme="dark"] .text-gray-600 {
  color: #9ca3af !important;
}
[data-theme="dark"] .text-gray-700 {
  color: #d1d5db !important;
}
[data-theme="dark"] .text-gray-800 {
  color: #e5e7eb !important;
}
[data-theme="dark"] .text-gray-900 {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .text-\[\#000\] {
  color: #d1d5db !important;
}
[data-theme="dark"] .text-\[\#333\] {
  color: #d1d5db !important;
}
[data-theme="dark"] .text-\[\#555554\] {
  color: #9ca3af !important;
}
[data-theme="dark"] .text-\[\#888\] {
  color: #9ca3af !important;
}
[data-theme="dark"] .text-\[\#999\] {
  color: #6b7280 !important;
}
[data-theme="dark"] .text-\[\#555555\] {
  color: #9ca3af !important;
}

/* --- Placeholder overrides --- */
[data-theme="dark"] .placeholder\:text-\[\#000\]::placeholder {
  color: #6b7280 !important;
}
[data-theme="dark"] .placeholder\:text-\[\#999\]::placeholder {
  color: #4b5563 !important;
}

/* --- Border color overrides (light → dark) --- */
[data-theme="dark"] .border-gray-200 {
  border-color: #374151 !important;
}
[data-theme="dark"] .border-gray-300 {
  border-color: #4b5563 !important;
}
[data-theme="dark"] .border-\[\#eaeaea\] {
  border-color: #374151 !important;
}
[data-theme="dark"] .border-\[\#DDDDDD\] {
  border-color: #374151 !important;
}
[data-theme="dark"] .border-\[\#CCCCCC\] {
  border-color: #4b5563 !important;
}
[data-theme="dark"] .border-indigo-200 {
  border-color: #4338ca !important;
}

/* --- Outline overrides --- */
[data-theme="dark"] .outline-\[\#f1f1f1\] {
  outline-color: #374151 !important;
}
[data-theme="dark"] .outline-gray-300 {
  outline-color: #4b5563 !important;
}
[data-theme="dark"] .outline-\[\#DDDDDD\] {
  outline-color: #374151 !important;
}
[data-theme="dark"] .hover\:outline-\[\#ddd\]:hover {
  outline-color: #4b5563 !important;
}

/* --- Shadow overrides (stronger in dark) --- */
[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* --- Ring overrides --- */
[data-theme="dark"] .ring-black\/5 {
  --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- SVG login icon stroke --- */
[data-theme="dark"] #Ologin svg path {
  stroke: #d1d5db;
}

/* --- TOC widget borders --- */
[data-theme="dark"] .toc-widget-wrapper .ez-toc-title-container {
  border-color: #374151;
}
[data-theme="dark"] .toc-widget-wrapper #ez-toc-container,
[data-theme="dark"] .toc-widget-wrapper #ez-toc-widget-container {
  border-color: #374151;
}
[data-theme="dark"] .toc-widget-wrapper #ez-toc-container nav > .ez-toc-list,
[data-theme="dark"] .toc-widget-wrapper #ez-toc-widget-container nav > .ez-toc-list {
  border-color: #374151;
}

/* --- Scrollspy nav --- */
[data-theme="dark"] #scrollspy-nav {
  background-color: #1d232a;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}

/* --- Prediction cards --- */
[data-theme="dark"] .card-body[class*="bg-[#FFF]"],
[data-theme="dark"] .card-body[class*="bg-\\[\\#FFF\\]"] {
  background-color: #1d232a;
}
[data-theme="dark"] .card-body[class*="outline-[#f1f1f1]"] {
  outline-color: #374151;
}

/* --- Skeleton loaders --- */
@keyframes skeleton-dark {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
[data-theme="dark"] [style*="background:linear-gradient(90deg,#eee"],
[data-theme="dark"] [style*="background: linear-gradient(90deg,#eee"] {
  background: linear-gradient(90deg, #2a323c 25%, #374151 50%, #2a323c 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-dark 1.2s linear infinite !important;
}

/* --- Date navigation --- */
[data-theme="dark"] .border-\[\#DDDDDD\].bg-white {
  background-color: #1d232a !important;
  border-color: #374151 !important;
}

/* --- Compare table --- */
[data-theme="dark"] .bg-white\/0 {
  background-color: transparent !important;
}
[data-theme="dark"] [class*="border-[#2F6FEA]"] {
  border-color: #3b82f6;
}

/* --- Signup / Preferences inline style overrides --- */
[data-theme="dark"] .oddsium-btn-social {
  background-color: #232a33 !important;
  color: #d1d5db !important;
  border-color: #374151 !important;
}
[data-theme="dark"] .pref-chip {
  background: #1d232a !important;
  color: #d1d5db !important;
  border-color: #374151 !important;
}
[data-theme="dark"] .pref-chip:hover {
  border-color: #4b5563 !important;
}
[data-theme="dark"] .pref-dropdown {
  background: #1d232a !important;
  border-color: #374151 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .pref-dropdown-item {
  color: #d1d5db !important;
}
[data-theme="dark"] .pref-dropdown-item:hover {
  background: #232a33 !important;
}
[data-theme="dark"] .pref-dropdown-item--selected {
  background: #1a2332 !important;
}
[data-theme="dark"] .pref-dropdown-item--selected:hover {
  background: #1e2a3c !important;
}
[data-theme="dark"] .pref-dropdown-country {
  color: #6b7280 !important;
}
[data-theme="dark"] .pref-dropdown-empty {
  color: #6b7280 !important;
}
[data-theme="dark"] .pref-dropdown::-webkit-scrollbar-thumb {
  background: #4b5563 !important;
}

/* --- Focus ring overrides (header buttons) --- */
[data-theme="dark"] .focus\:ring-offset-gray-800:focus {
  --tw-ring-offset-color: #1d232a;
}

/* Source background colors */

.sportytrader { background-color: #ededed; }
.foxbet { background-color: #242424; }
.rekatochklart { background-color: #181A1E; }
.betting { background-color: #037313; }
.betarades { background-color: #000000; }
.kingbet { background-color: #242424; }
.amerikanos24 { background-color: #090d4e; }
.apuestas-com { background-color: #283B57; }
.scommessesulweb { background-color: #ededed; }
.freesupertips { background-color: #000000; }
.mrfixitstips { background-color: #ededed; }
.bettingstugan { background-color: #043a49; }
.goapostas { background-color: #fcb900; }
.gainblers { background-color: #000000; }
.apuestas-deportivas-pe { background-color: #abb8c3; }
.apuesta-com-py { background-color: #212958; }
.apuestas-cl { background-color: #212958; }
.apuestas { background-color: #212958; }
.matchmoney { background-color: #d7181f; }
.bet-on-arme { background-color: #07182c; }
.agones { background-color: #000000; }
.betdays { background-color: #ededed; }
.footballbet { background-color: #ededed; }
.betcosmos { background-color: #161e29; }
.apuesta { background-color: #000; }
.apuestasdeportivas { background-color: #ededed; }
.covers { background-color: #15202b; }
.cassandrapronostici { background-color: #ededed; }
.speltips { background-color: #f5f5f5; }
.oddschecker { background-color: #131d26; }
.academiadeapuestasperu { background-color: #efefef; }
.legalbet { background-color: #f0f1f2; }
.pronosticosdeportivos { background-color: #034ea2; }
.apuesta-mx { background-color: #334d45; }
.redgol { background-color: #ff0034; }
.bolavip { background-color: #000000; }
.casasdeapuestas  { background-color: #ededed; }