@import url('https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100..800&family=Russo+One&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: "magistral black";
  src: url("/styles/MagistralBlack.otf");
}

@font-face {
  font-family: "anek devanagari";
  src: url("/styles/Anek Devanagari.ttf");
}

@font-face {
  font-family: "magistral extrabold";
  src: url("/styles/magistral_extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* colors

blue
var(--bg-color-1)
var(--bg-color-2)
var(--bg-color-3)
var(--bg-color-4)

yellow
var(--highlight-color-1)
    

*/

* {
    box-sizing: border-box;
}

html {
    color: #0F0F0F;
}

body {
    background-color: var(--bg-color-1);
    color: #fff;
}

select {
    font-family: "anek devanagari", sans-serif;
    padding: 3px 6px;
    background-color: var(--bg-color-4);
    color: #fff;
    border: 1px solid var(--bg-color-4);
    border-radius: 9px;
}

.button-1 {
    border: 1px solid var(--highlight-color-1);
    border-radius: 6px;
    font-family: "Russo One", sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    background-color: var(--highlight-color-1);
    color: var(--bg-color-1);
    padding: 3px 30px 3px 30px;
    text-align: center;
}

.button-1:hover {
    background-color: var(--highlight-color-2);
}

.button-1 a {
    text-decoration: none;
    color: var(--bg-color-1);
}

.button-1 a:hover {
    text-decoration: none;
    color: var(--bg-color-1);
}

.button-2 {
    border: 1px solid var(--highlight-color-1);
    border-radius: 6px;
    font-family: "Russo One", sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    background-color: var(--highlight-color-1);
    color: var(--bg-color-1);
    padding: 3px 30px 3px 30px;
    text-align: center;
}

.button-2:hover {
    background-color: var(--highlight-color-2);
}

.button-2 a {
    text-decoration: none;
    color: var(--bg-color-1);
}

.button-2 a:hover {
    text-decoration: none;
    color: var(--bg-color-1);
}

.button-3 {
    border: 1px solid var(--base-color-gray);
    border-radius: 6px;
    font-family: "Russo One", sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    background-color: var(--base-color-gray);
    padding: 3px 30px 3px 30px;
    text-align: center;
}

.button-3:hover {
    background-color: #D8D8D8;
}

.button-3 a {
    text-decoration: none;
    color: var(--bg-color-1);
}

.button-3 a:hover {
    text-decoration: none;
    color: var(--bg-color-1);
}

.button-4 {
    border: 1px solid #0174DF;
    border-radius: 9px;
    font-family: "Russo One", sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    background-color: #0174DF;
    color: #fff;
    text-align: center;
}

.button-4:hover {
    background-color: #0080FF;
}

.button-4 a {
    text-decoration: none;
    color: #fff;
}

.button-4 a:hover {
    text-decoration: none;
    color: #fff;
}

.button-5 {
    border: none !important;
    border-radius: 15px;
    font-family: "Anek Devanagari", sans-serif;
    font-weight: 540;
    cursor: pointer;
    display: inline-block;
    background-color: #0174DF;
    color: #fff;
    padding: 4px 15px 1px 15px;
    text-align: center;
}

.button-5:hover {
    background-color: #0080FF;
}

.button-5 a {
    text-decoration: none;
    color: #fff;
}

.button-5 a:hover {
    text-decoration: none;
    color: #fff;
}

.button-6 {
    border: 1px solid var(--bg-color-2);
    border-radius: 6px;
    font-family: "Anek Devanagari", sans-serif;
    font-size: 0.9em;
    font-weight: 540;
    cursor: pointer;
    display: inline-block;
    color: #fff;
    padding: 3px 15px 0px 15px;
    text-align: center;
}

.button-6 a {
    text-decoration: none;
    color: #fff;
}

.button-6 a:hover {
    text-decoration: none;
    color: var(--base-color-light-blue);
}

.button-7 {
    border: none !important;
    border-radius: 15px;
    font-family: "Anek Devanagari", sans-serif;
    font-size: 0.9em;
    font-weight: 540;
    cursor: pointer;
    display: inline-block;
    background-color: #D8D8D8;
    color: #151515;
    padding: 4px 15px 1px 15px;
    text-align: center;
}

.button-7:hover {
    background-color: #E6E6E6;
}

.button-7 a {
    text-decoration: none;
    color: #fff;
}

.button-7 a:hover {
    text-decoration: none;
    color: #fff;
}

.button-8 {
    border: none !important;
    border-radius: 6px;
    font-family: "Anek Devanagari", sans-serif;
    font-size: 0.9em;
    font-weight: 540;
    cursor: pointer;
    display: inline-block;
    background-color: #27ae60;
    color: #fff;
    padding: 3px 15px 0px 15px !important;
    text-align: center;
    box-shadow: 0 3px 0 #268c51, 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button-8:hover {
    background-color: #2fc66e;
    box-shadow: 0 3px 0 #26ab5d, 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button-8 a {
    text-decoration: none;
    color: #fff;
}

.button-8 a:hover {
    text-decoration: none;
    color: #fff;
}

.button-9 {
    border: none !important;
    border-radius: 6px;
    font-family: "Anek Devanagari", sans-serif;
    font-size: 0.9em;
    font-weight: 540;
    cursor: pointer;
    display: inline-block;
    background-color: #ff6666;
    color: #fff;
    padding: 3px 15px 0px 15px !important;
    text-align: center;
    box-shadow: 0 3px 0 #fe3e3e, 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button-9:hover {
    background-color: #f97676;
    box-shadow: 0 3px 0 #fe4d4d, 0 1px 3px rgba(0, 0, 0, 0.1);
}

.button-9 a {
    text-decoration: none;
    color: #fff;
}

.button-9 a:hover {
    text-decoration: none;
    color: #fff;
}

.button-blue {
    border: 1px solid #29A0DA;
    border-radius: 12px;
    font-size: 0.9em;
    cursor: pointer;
    display: inline-block;
    background-color: #29A0DA;
    color: var(--base-color-blue);
    padding: 4px 18px 1px 18px;
    text-align: center;
    transition: 0.2s ease-in-out;
    font-weight: 570;
    font-family: "anek devanagari";
}

.button-blue:hover {
    transform: scale(1.05);
    transition: 0.2s ease-in-out;
}

.button-blue a {
    text-decoration: none;
    color: #E6E6E6;
    font-weight: 590;
}

.button-blue a:hover {
    text-decoration: none;
    color: #fff;
}

.no-underline:hover {
    text-decoration: none;
}

.alternate-link {
    color: #83B4FF;
    font-size: 1.0em;
}

.alternate-link:hover {
    color: #83B4FF;
    font-size: 1.0em;
}

.alternate-link-2 {
    color: #fff;
    font-size: 1.0em;
}

.alternate-link-2:hover {
    color: #fff;
    font-size: 1.0em;
}

.alternate-link-3 {
    color: var(--bg-color-1);
    font-size: 1.0em;
}

.alternate-link-3:hover {
    color: var(--bg-color-1);
    font-size: 1.0em;
}

.alternate-link-4 {
    color: #F07821;
    font-size: 1.0em;
}

.alternate-link-4:hover {
    color: #F07821;
    font-size: 1.0em;
}

.alternate-link-5 {
    color: #00FF87;
    font-size: 1.0em;
}

.alternate-link-5:hover {
    color: #00FF87;
    font-size: 1.0em;
}

.alternate-link-6 {
    color: #BE0B57;
    font-size: 1.0em;
}

.alternate-link-6:hover {
    color: #BE0B57;
    font-size: 1.0em;
}

.alternate-link-7 {
    color: #03EDFF;
    font-size: 1.0em;
}

.alternate-link-7:hover {
    color: #03EDFF;
    font-size: 1.0em;
}

.alternate-link-8 {
    color: #00FF87;
    font-size: 1.0em;
}

.alternate-link-8:hover {
    color: #00FF87;
    font-size: 1.0em;
}

.alternate-link-9 {
    color: #fff;
    font-size: 1.0em;
    font-weight: bold;
}

.alternate-link-9:hover {
    color: var(--base-color-green);
    font-size: 1.0em;
    text-decoration: none;
}

.alternate-link-10 {
    color: #F4FA58;
    font-size: 1.0em;
    font-weight: bold;
}

.alternate-link-10:hover {
    color: #F4FA58;
    font-size: 1.0em;
}

.alternate-link-11 {
    color: var(--highlight-color-1);
    font-family: "magistral extrabold", "magistral black", sans-serif;
    font-size: 14px;
    letter-spacing: 0px;
    margin: 0px 3px;
}

.alternate-link-11:hover {
    color: var(--highlight-color-1);
    transition: 0.2s ease-in-out;
}

.alternate-link-12 {
    color: var(--base-color-light-blue);
}

.alternate-link-12:hover {
    color: var(--base-color-light-blue);
}

.alternate-link-13 {
    color: var(--highlight-color-1);
}

.alternate-link-13:hover {
    color: var(--highlight-color-1);
}

.alternate-link-14 {
    color: var(--base-color-blue);
    text-decoration: underline;
}

.alternate-link-14:hover {
    text-decoration: underline;
    color: var(--base-color-light-blue);
}

.alternate-link-15 {
    color: #3498db;
    text-decoration: underline;
}

.alternate-link-15:hover {
    text-decoration: underline;
    color: #3498db;
}

.alternate-link-16 {
    color: #0055e9;
}

.alternate-link-16:hover {
    color: #0055e9;
    text-decoration: underline;
}

.blog-link {
    color: var(--bg-color-1);
}

.blog-link:hover {
    color: #83B4FF;
    text-decoration: none;
}

.blue-font {
    color: var(--base-color-blue);
    font-size: 1.1em;
}

h1 {
    margin-bottom: 6px;
}

h2 {
    margin-bottom: 6px;
}

h4 {
    margin: 0px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}

table {
    border-collapse: collapse;
    vertical-align: middle;
    color: #000;
}

.arrow-scroll {
    display: none;
    cursor: pointer;
}

.def-table {
    font-size: 0.9em;
}

.def-table th {
    font-size: 1.0em;
    background-color: var(--bg-color-2);
    border-bottom: 1px solid var(--highlight-color-1);
    color: #A6AFCD;
    padding: 1px 6px;
    font-weight: bold;
    text-align: left;
}

.def-table td {
    padding: 1px 6px;
    text-align: left;
    background-color: var(--bg-color-2);
    border-bottom: 1px solid var(--bg-color-2);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   CONTAINERS
   ═══════════════════════════════════════════════════════ */

.container {
    background-color: var(--bg-color-1);
    padding-top: 12px !important;
}

.container-2 {
    background-color: var(--bg-color-2);
    margin-bottom: 24px;
}

#content {
    background-color: var(--bg-color-3);
    margin: 72px 0px 0px 0px;
}

.white-bg {
    border-radius: 15px;
    margin-top: 18px;
    padding: 24px 18px;
    color: #000;
}

.content-table {
    overflow: auto;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   HORIZONTAL SCROLLING MENU
   ═══════════════════════════════════════════════════════ */

.menu-main {
    display: flex;
    padding-bottom: 3px;
    margin-bottom: 18px;
}

.menu-main:hover {
    padding-bottom: 3px;
}

.menu-main-content {
    height: 150px;
    border-radius: 15px 15px 15px 90px;
    border: 1px solid var(--bg-color-4);
    background: linear-gradient(60deg, var(--bg-color-1) 0%, var(--bg-color-2) 50%, var(--bg-color-5) 100%);
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    justify-content: center;
    margin: 0 12px;
}

.menu-main-content:hover {
    background: linear-gradient(60deg, var(--bg-color-5) 0%, var(--bg-color-2) 50%, var(--bg-color-1) 100%);
}

.last {
    margin-right: 18px;
}

#menu-main-left-right-arrows {
    text-align: right;
    padding: 3px 9px 0px 0px;
    margin-bottom: 0px;
}

.menu-main-content-col-2 {
    vertical-align: top;
    padding: 15px 6px 0px 18px;
}

.menu-main-content-col-2-1 {
    overflow: hidden;
    color: #fff;
    font-weight: bold;
}

.menu-main-content-col-2-2 {
    overflow: hidden;
    font-size: 0.85em;
    color: var(--base-color-blue);
    line-height: 1.2;
    height: 48px;
}

.menu-main-content-col-2-3 {
    overflow: hidden;
    font-size: 0.9em;
    font-weight: 560;
    color: #fff;
    text-align: left;
}

.menu-main-content-col-2-3 a {
    color: var(--base-color-blue);
    background-color: var(--bg-color-5);
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 660;
    font-family: "anek devanagari";
    cursor: pointer;
    margin-top: 14px;
    padding: 4px 18px 1px 18px;
    display: inline-block;
}

.menu-main-content-col-2-3 a:hover {
    color: var(--highlight-color-1);
    text-decoration: none;
}

.hexagon {
    clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%);
    background-color: var(--bg-color-1);
    width: 149px;
    height: 149px;
    background-repeat: no-repeat;
    background-size: 149px 149px;
    border-radius: 15px 0px 0px 0px;
    margin: -1px;
    border: 1px solid var(--bg-color-2);
}

.vedonlyonti {
    background-image: url("/img/odds.jpg");
}

.vihjepalvelu {
    background-image: url("/img/vihjepalvelu-2.png");
}

.ravit {
    background-image: url("/img/ravit7.png");
}

.viikkokatsaus {
    background-image: url("/img/viikkokatsaus.png");
}

.blogit {
    background-image: url("/img/blogit.png");
}

.live-veto {
    background-image: url("/img/live-vedot-4.png");
}

.kerroinhalytys {
    background-image: url("/img/alert-31.png");
}

.fantasy {
    background-image: url("/img/fantasy-7.png");
}

.campaign {
    background-image: url("/img/campaign.png");
}

.moneyball {
    background-image: url("/img/moneyball_5.png");
}

.kerroinvahti {
    background-image: url("/img/kerroinvahti-12.png");
}

.xg-calculator {
    background-image: url("/img/vihjepalvelu-2.png");
}

/* ═══════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════ */

.heading-container-1 {
    margin: 12px 18px;
}

.header {
    background-color: var(--bg-color-1);
}

#logo-div-mobile {
    margin: -9px -10px 0px -10px;
    padding: 18px 0px 15px 0px;
    border-radius: 15px 15px 0px 0px;
    font-family: "magistral extrabold", "magistral black", sans-serif;
    font-size: 24px;
    letter-spacing: 0px;
    color: var(--highlight-color-1);
    text-align: center;
    background: var(--bg-color-3);
    border: 1px solid var(--bg-color-1);
}

#logo-div-mobile a {
    color: var(--highlight-color-1);
    text-decoration: none;
}

.header .menu {
    display: inline-block;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: var(--bg-color-1);
    padding-bottom: 12px;
    height: 30px;
    margin: 18px 12px 0px 12px;
    font-family: "anek devanagari";
}

#menu-top-desktop {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 18px;
}

#menu-top-mobile {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 18px;
}

.menu-item {
    display: inline-block;
    color: #A6AFCD;
    margin: 3px 12px 0px 12px;
}

.menu-item a {
    color: #A6AFCD;
    font-size: 1.3em;
    font-weight: 540;
    text-decoration: none;
}

.menu-item a:hover {
    color: var(--highlight-color-1);
}

.menu .active a {
    color: var(--highlight-color-1);
    background-color: var(--bg-color-1);
}

/* ═══════════════════════════════════════════════════════
   SLIDE-OUT MENU
   ═══════════════════════════════════════════════════════ */

.menu-desktop {
    background: var(--bg-color-4);
    display: none;
    position: fixed;
    top: 0;
    min-width: 300px;
    left: 0;
    overflow: auto;
    z-index: 1050;
    box-shadow: 2px 0 3px -1px var(--bg-color-2);
    opacity: 0.97;
}

.menu-desktop-top {
    padding-bottom: 9px;
}

.menu-desktop-content {
    background: var(--bg-color-5);
    height: calc(100vh - 73px);
    padding-top: 18px;
    padding-bottom: 120px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-color: #ccc #eee;
    border-right: 2px solid var(--bg-color-5);
    margin-top: 1px;
    display: block;
}

.logo-2 {
    display: inline-block;
    margin-top: 22px;
    margin-left: 36px;
    margin-right: 18px;
    font-family: "magistral extrabold", "magistral black", sans-serif;
    font-size: 24px;
    letter-spacing: 0px;
}

.logo-2 a {
    color: var(--highlight-color-1);
}

.logo-2 a:hover {
    text-decoration: none;
}

.menu-left-tbl {
    margin-left: 30px;
}

.menu-left-tbl-td-1 {
    background-color: #343956;
    text-align: center;
    width: 48px;
    height: 30px;
    vertical-align: middle;
    border-radius: 6px 0px 0px 6px;
    border-right: 3px solid var(--bg-color-5);
}

.menu-left-tbl-td-2 {
    background-color: #343956;
    text-align: left;
    width: 204px;
    height: 30px;
    padding-top: 6px;
    padding-left: 12px;
    border-radius: 0px 6px 6px 0px;
}

.menu-item-2 {
    display: block;
    color: #fff;
    margin: 12px 42px;
    font-size: 1.0em;
    font-weight: bold;
}

.menu-item-2 a {
    color: #fff;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.menu-item-2 a:hover {
    color: var(--highlight-color-1);
    transition: 0.2s ease-in-out;
    margin-left: 3px;
}

.menu-item-3 {
    display: block;
    color: #fff;
    margin: 12px 42px;
    font-size: 1.0em;
    font-weight: bold;
}

.menu-item-3 a {
    color: #fff;
    text-decoration: none;
}

.menu-item-3 a:hover {
    color: var(--highlight-color-1);
}

/* MENU2 */

.menu-2 {
    background-color: var(--bg-color-2);
    margin: -25px -18px 0px -18px;
    border: 0px solid var(--bg-color-1);
    border-radius: 15px 15px 0px 0px;
    padding: 24px 18px;
}

.menu-2-1 {
    display: inline-block;
    background-color: var(--bg-color-2);
    color: #A6AFCD;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0px;
    margin-right: 18px;
}

.menu-2-1:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* NEW PICKS */

.betting-top {
    display: inline-block;
    min-height: 120px;
    width: 48%;
    vertical-align: top;
}

.flex-container {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    justify-content: center;
    margin: 0 auto;
}

.flex-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
}

.new-pick-container {
    display: flex;
    flex: 1;
    margin: 6px;
    background-color: var(--bg-color-3);
    padding: 12px 12px 12px 12px;
    border-bottom: 0px dashed #A6AFCD;
    border-radius: 9px;
    font-size: 0.9em;
    text-align: left;
}

.bg-info {
    margin: 12px 6px 0px 6px;
    padding: 18px;
    background-color: var(--bg-color-4);
    border-radius: 15px;
}

.desktop .new-pick-col-2-1 {
    max-width: 360px;
}

.highlight .new-pick-col-2-1 {
    color: var(--highlight-color-1);
}

.new-pick-col-1 {
    vertical-align: top;
    margin-right: 6px;
    min-width: 144px;
}

.new-pick-col-1-1 {
    font-weight: bold;
}

.new-pick-col-1-2 {
    font-weight: bold;
}

.new-pick-col-1-3 {
    font-size: 1.0em;
    color: #A6AFCD;
}

.new-pick-col-1-4 {
    margin-top: -9px;
    font-size: 1.0em;
    color: #F4FA58;
}

.starting-soon {
    color: red;
    font-weight: bold;
    font-size: 1.1em;
}

.new-pick-col-1-5 {
    margin-top: 0px;
    font-size: 1.0em;
    color: #A6AFCD;
}

.new-pick-col-2 {
    flex: 1;
    vertical-align: top;
    margin-top: 0px;
    flex-basis: 100%;
    min-width: 0;
    overflow: hidden;
    padding-right: 6px;
}

.new-pick-col-2-1 {
    min-width: 0;
    max-width: 100%;
    vertical-align: top;
    background-color: var(--bg-color-5);
    border: 1px solid var(--bg-color-5);
    border-radius: 6px;
    box-shadow: 0 3px 2px -2px #000;
    padding: 3px 9px 3px 9px;
    color: #fff;
    text-align: center;
    margin-top: 3px;
    font-family: "magistral extrabold", "magistral black", sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.new-pick-col-2-2 table {
    margin-left: 6px;
}

.new-pick-col-2-2 td {
    border: 1px solid var(--bg-color-3);
    vertical-align: middle;
    padding: 0px;
}

.new-pick-col-2-2 img {
    vertical-align: middle;
    padding-right: 6px;
}

.new-pick-hcp-totals {
    font-size: 1.0em;
    font-weight: bold;
    background-color: var(--bg-color-4);
    height: 30px;
    width: 66px;
    text-align: center;
    border-radius: 6px;
    padding: 3px 12px 0px 12px;
}

.new-pick-bookie-text {
    font-size: 0.9em;
    color: #fff;
}

.new-pick-odds {
    color: #fff;
    background-color: var(--bg-color-4);
    padding: 3px 6px 0px 6px;
    line-height: 22px;
    margin-left: 12px;
    margin-bottom: 3px;
    vertical-align: middle;
    border: 1px solid var(--bg-color-2);
    border-radius: 9px;
    width: 42px;
    text-align: center;
    font-family: "anek devanagari";
    font-size: 0.9em;
}

.max-odds {
    color: var(--highlight-color-1);
    font-weight: bold;
}

.new-pick-result-win {
    color: var(--base-color-green);
    margin-top: 13px;
    padding: 2px 9px 0px 9px;
    text-align: left;
    vertical-align: middle;
}

.new-pick-result-loss {
    color: var(--base-color-red);
    margin-top: 13px;
    padding: 2px 9px 0px 9px;
    text-align: left;
    vertical-align: middle;
}

.new-pick-result-push {
    color: #ccc;
    margin-top: 13px;
    padding: 2px 9px 0px 9px;
    text-align: left;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════
   BLOG
   ═══════════════════════════════════════════════════════ */

.blog-menu {
    background-color: var(--bg-color-3);
    font-size: 1.1em;
    color: #000;
    max-width: 1080px;
    margin: 18px auto;
    padding: 2px 0px 6px 0px;
    border-radius: 15px;
    text-align: center;
}

.blog-container {
    margin: 0px 18px;
}

.blog-text {
    background-color: #fff;
    font-size: 1.1em;
    color: #000;
    max-width: 960px;
    margin: 0px auto;
    padding: 60px;
    border-radius: 15px;
}

.blog-header-1 {
    margin: 0px;
    font-size: 27px;
    font-weight: bold;
    line-height: 30px;
    color: var(--bg-color-1);
}

.blog-header-2 {
    margin: 0px;
    color: var(--bg-color-1);
}

.blog-writer {
    font-weight: bold;
    color: var(--base-color-dark-gray);
}

.blog-writer-img-jussi {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 3px;
    background: url(/img/people/hietalahti_jussi.png);
    background-size: cover;
    border-radius: 50%;
}

.blog-writer-img-harri {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 3px;
    background: url(/img/people/kairavuo_harri.png);
    background-size: cover;
    border-radius: 50%;
}

.blog-writer-img-aapo {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 3px;
    background: url(/img/people/mutanen_aapo.png);
    background-size: cover;
    border-radius: 50%;
}

.blog-writer-img-vahanenjari {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 3px;
    background: url(/img/people/vahanen_jari.png);
    background-size: cover;
    border-radius: 50%;
}

.blog-writer-img-puhtimakijuha {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 3px;
    background: url(/img/people/puhtimaki_juha.png);
    background-size: cover;
    border-radius: 50%;
}

.blog-writer-img-vedonlyojacom {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 3px;
    background: url(/img/vl_logo_1.png);
    background-size: cover;
    border-radius: 50%;
}

.blog-date {
    margin: 0px;
    font-size: 0.9em;
    color: var(--base-color-semi-dark-gray);
}

.blog-history {
    color: var(--highlight-color-1);
    max-width: 960px;
    margin: 0px auto;
    margin-top: 60px;
    padding-left: 60px;
    border-radius: 15px;
}

.blog-history a {
    color: #fff;
}

.blog-history a:hover {
    color: #fff;
}

#blogger-name {
    font-size: 1.1em;
    font-weight: bold;
}

.person {
    flex: 1 1 420px;
    text-align: left;
    padding: 30px 12px;
    background-color: var(--bg-color-4);
    margin: 18px 12px;
    border-radius: 15px;
}

.person-name-img {
    text-align: left;
}

.person-img {
    margin-left: 12px;
}

.telegram {
    flex: 1 1 420px;
    text-align: left;
    padding: 30px 30px;
    background-color: var(--bg-color-4);
    margin: 18px 12px;
    border-radius: 15px;
    min-height: 240px;
}

.campaigns {
    flex: 1 1 420px;
    text-align: left;
    padding: 30px 30px;
    background-color: var(--bg-color-4);
    margin: 18px 12px;
    border-radius: 15px;
    min-height: 240px;
}

/* ═══════════════════════════════════════════════════════
   MATERIAL ICONS
   ═══════════════════════════════════════════════════════ */

.material-icons:hover {
    background-color: var(--bg-color-2);
}

.x-icon:hover {
    background-color: var(--bg-color-3);
}

.user-profile {
    background-color: var(--bg-color-3);
}

.material-icons-home {
    color: #ccc;
}

.material-icons-home:hover {
    padding: 0px;
    margin: 0px;
    background-color: var(--bg-color-1);
    color: var(--highlight-color-1);
}

.material-icons-person {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    border-radius: 0px;
}

.material-icons-person:hover {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    background-color: var(--bg-color-4);
}

.material-icons-person-2 {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    border-radius: 0px;
    cursor: default;
}

.material-icons-person-2:hover {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    background-color: var(--bg-color-5);
}

.material-icons-person-3 {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    border-radius: 0px;
    cursor: default;
}

.material-icons-person-3:hover {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    background-color: var(--bg-color-4);
}

.material-icons-person-4 {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    border-radius: 0px;
    cursor: pointer;
}

.material-icons-person-4:hover {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    background-color: var(--bg-color-4);
}

.material-icons-person-5 {
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    cursor: pointer;
}

.material-icons-person-5:hover {
    padding: 0px;
    margin: 0px;
    background-color: var(--bg-color-4);
}

.material-icons-star {
    padding: 0;
    margin-top: -3px;
    margin-left: 0px;
    margin-right: 6px;
    background-color: var(--bg-color-1);
    cursor: default;
}

.material-icons-star:hover {
    padding: 0;
    margin-top: -3px;
    margin-left: 0px;
    margin-right: 6px;
    background-color: var(--bg-color-1);
    cursor: default;
}

.material-icons-download {
    cursor: default;
}

.material-icons-download:hover {
    background-color: var(--bg-color-4);
    margin: 0px;
    padding: 0px;
    cursor: default;
}

.material-icons-arrows {
    cursor: default;
}

.material-icons-arrows:hover {
    padding: 0;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════ */

.tooltip-telegram {
    margin-left: 6px;
}

/* Pulsing highlight effect */

/* Tooltip text */

.tooltip-telegram .tooltiptext {
    background-color: var(--bg-color-3);
}

.tooltip-telegram .tooltiptext:hover {
    background-color: var(--bg-color-5);
}

.tooltip-purchased-picks {
    position: relative;
    display: inline-block;
    margin-top: 16px;
    margin-left: 6px;
    transition: transform 0.2s ease-in-out;
}

.tooltip-purchased-picks:hover {
    transform: scale(1.1);
}

.tooltip-purchased-picks .tooltiptext {
    visibility: hidden;
    text-align: left;
    padding: 12px 18px 8px 18px;
    border-radius: 6px;
    border: 2px solid #fff;
    font-size: 0.8em;
    font-weight: normal;
    position: absolute;
    z-index: 1;
    width: 300px;
    background-color: var(--bg-color-5);
    color: #fff;
    opacity: 0.95;
    margin: -6px 12px;
    transition: visibility 0.2s ease-in-out;
}

.tooltip-purchased-picks:hover .tooltiptext {
    visibility: visible;
}

.tooltip-vihjepalvelu {
    position: relative;
    display: none;
    margin-top: 24px;
    margin-left: 0px;
    animation: shake 2.5s ease-in-out 10;
}

.tooltip-vihjepalvelu a:hover {
    text-decoration: none !important;
}

@keyframes shake {
    0%, 100% { transform: translateY(0) scale(1); }
    5% { transform: translateY(-2px) scale(1.1); }
    10% { transform: translateY(2px) scale(1.1); }
    15% { transform: translateY(-2px) scale(1.1); }
    20% { transform: translateY(2px) scale(1.1); }
    25% { transform: translateY(0) scale(1); }
}

/* Tooltip text */

.tooltip-vihjepalvelu .tooltiptext {
    text-align: center;
    font-weight: 540;
    position: absolute;
    z-index: 1;
    width: 156px;
    color: #fff;
    margin-left: -6px;
    margin-top: -2px;
    transition: visibility 0.2s ease-in-out;
    visibility: visible;
    font-size: 1.1em;
}

.sticky-div-top-center {
    background-color: #0f6eae;
    border: 1px solid #063f65;
}

.sticky-div-top-center-2 {
    transform: translateY(-40%);
    border: 2px solid #07DB77;
}

.sticky-div-bottom-center {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    opacity: 0.9;
    z-index: 1000;
}

.close-button-2 {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.sticky-div-bottom-center .blue-theme {
    color: #004080;
    background-color: #b3d9ff;
    border-top: 1px solid #0073e6;
}

.sticky-div-bottom-center .blue-theme .close-button-2 {
    color: #0073e6;
}

.sticky-div-bottom-center .blue-theme .close-button-2:hover {
    color: #3399ff;
}

.sticky-div-bottom-center .yellow-theme {
    color: var(--base-color-dark-blue);
    background-color: #ffffb3;
    border-top: 1px solid #4d4d00;
}

.sticky-div-bottom-center .yellow-theme .close-button-2 {
    color: #b3b300;
}

.sticky-div-bottom-center .yellow-theme .close-button-2:hover {
    color: #cccc00;
}

.sticky-div-bottom-center .white-theme {
    color: #37003C;
    background-color: #fff;
    border-top: 1px solid #37003C;
}

.sticky-div-bottom-center .white-theme .close-button-2 {
    color: #37003C;
}

.sticky-div-bottom-center .white-theme .close-button-2:hover {
    color: #702d8b;
}

.sticky-div-bottom-center .red-theme {
    color: #004080;
    background-color: #ffcce6;
    border-top: 1px solid #ff4da6;
}

.sticky-div-bottom-center .red-theme .close-button-2 {
    color: #ff3399;
}

.sticky-div-bottom-center .red-theme .close-button-2:hover {
    color: #ff66b3;
}

.close-button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 21px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.close-button:hover {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */

.footer {
    background-color: #051932;
}

.footer #footer-content {
    margin: 0 auto;
    max-width: 1540px;
}

.footer table {
    text-align: left;
    color: #fff;
    font-size: 0.9em;
}

.option-language:hover {
    background-color: #ccc;
}

.social-icons {
    transition: transform 0.2s ease-in-out;
}

.social-icons:hover {
    transition: transform 0.2s ease-in-out;
    transform: scale(1.3);
}

.delete-account:hover {
    text-decoration: underline;
    cursor: pointer;
}

#menu-main-arrows {
    display: none;
}

.scroll-arrow-controls {
    height: 148px;
    margin-left: 12px;
}

.scroll-arrow-left,
 .scroll-arrow-right {
    background-color: var(--bg-color-2);
    color: #f2f2f2;
    width: 60px;
    height: 50%;
    font-size: 48px;
    font-weight: 500;
    padding: 0px 0px 6px 0px;
    cursor: pointer;
    border: 1px solid var(--bg-color-5);
    transition: background-color 0.2s ease;
}

.scroll-arrow-left {
    margin-bottom: 0px;
    border-radius: 6px 6px 0px 0px;
    border-bottom: 0px solid #fff !important;
}

.scroll-arrow-right {
    margin-top: 0px;
    border-radius: 0px 0px 6px 6px;
}

.scroll-arrow-left:hover,
 .scroll-arrow-right:hover {
    background-color: var(--bg-color-2);
    color: yellow;
}

.scroll-arrow-left:active,
 .scroll-arrow-right:active {
    background-color: var(--bg-color-2);
}

#menu-main-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-top: 12px;
    overflow-x: hidden !important;
}

.desktop-inline {
    display: inline;
}

.mobile-inline {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PICKS / INDEX PAGE
   pick-card, bet-details, toggle-switch, tabs, description, filters
   ═══════════════════════════════════════════════════════════════════════════ */

/* Breaking ad text when no link - no underline on hover */

.breaking-ad-no-link,
 .breaking-ad-no-link:hover {
    text-decoration: none !important;
}

#active-picks-container {
    background: var(--bg-color-2);
    padding: 18px 12px 0px 12px;
    margin: 0px 3px;
    border-radius: 0px 0px 9px 9px;
}

/* FlashScore-style picks container */

.picks-flashscore-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: none;
    color: #5e676a;
    padding: 0px 0px;
}

.league-header-wrapper {
    margin-bottom: 0;
}

.league-header {
    display: flex;
    align-items: center;
    padding: 0px 6px;
    background-color: #eef7ff;
    border-radius: 5px;
    gap: 8px;
}

.league-header__body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.league-header__icon {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    vertical-align: middle;
    margin-top: 4px;
}

.league-header__icon img {
    height: 18px;
    width: auto;
    vertical-align: middle;
}

.league-header__body img {
    vertical-align: middle;
}

.league-header__titleWrapper {
    display: flex;
    align-items: center;
}

.league-header__category {
    font-size: 0.75em;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: none;
}

.league-header__category-colon {
    color: #999;
    display: none;
}

.league-header__title {
    font-size: 1.0em;
    font-weight: 600;
    color: #5e676a;
    margin-left: 2px;
    margin-top: 3px;
}

/* Pick Card Styles */

.pick-card {
    padding: 9px 9px;
}

/* Pick Tab Styles */

.pick-tab {
    font-family: 'anek devanagari', Sans-Serif;
}

/* Make picks-tabs container take available space in desktop buy-all-container */

@media only screen and (min-width: 769px) {

    .buy-all-container.desktop .picks-tabs {
        flex: 1;
    }
}

/* Hide desktop tabs on mobile, show mobile button */

.buy-all-container.desktop {
    display: flex !important;
}

.buy-all-container.mobile {
    display: none !important;
}

@media only screen and (max-width: 768px) {

    .buy-all-container.desktop {
        display: none !important;
    }
    .buy-all-container.mobile {
        display: flex !important;
    }
}

/* Mobile pick tab buttons */

.mobile-pick-tab {
    background: #2d324f !important;
    color: #ccc !important;
    transition: background-color 0.2s;
    text-transform: uppercase;
    font-size: 1.0em;
    font-weight: 600 !important;
    flex: 1;
    width: 50%;
}

.mobile-pick-tab.active {
    color: var(--base-color-green) !important;
    border-left: 4px solid var(--base-color-green) !important;
}

/* Hide mobile toggle container on desktop */

@media only screen and (min-width: 769px) {

    #mobile-picks-toggle-container {
        display: none !important;
    }
}

/* Ensure mobile buttons are visible on mobile */

@media only screen and (max-width: 768px) {

    #toggle-picks-view-btn-mobile-akt,
     #toggle-picks-view-btn-mobile-omat {
        display: inline-block !important;
    }
}

@media only screen and (min-width: 769px) {

    #toggle-picks-view-btn-mobile-akt,
     #toggle-picks-view-btn-mobile-omat {
        display: none !important;
    }
}

.pick-content {
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
}

.pick-header {
    font-size: 1.1em;
}

.league-name {
    font-weight: 600;
    margin-top: 3px;
    margin-right: 12px;
    margin-left: 3px;
}

.league-roi {
    font-size: 1.0em;
    font-weight: 540;
    margin-right: 3px;
}

.match-teams-container {
    margin-top: 3px;
}

/* start-time in container */

.start-time {
    font-weight: 500;
    font-size: 1.1em;
}

.team {
    line-height: 15px;
    font-weight: 540;
    max-width: 189px;
    width: 189px;
    height: 18px;
    color: #fff;
    font-size: 1.1em;
}

/* home team */

.team.home {
    grid-row: 1;
}

/* away team */

.team.away {
    grid-row: 2;
}

/* wrapper for bet-added-time + bookie (grid item) */

.bet-meta-cell {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* bet-added-time (inside bet-meta-cell) */

.bet-added-time {
    font-size: 0.9em;
    color: #cdcdd7;
    margin-top: 3px;
    line-height: 15px;
}

/* bet-type spans 2 rows, sits immediately right of teams */

.bet-type {
    font-weight: 500;
    color: blue;
    display: none;
}

.match-header {
    margin-left: 12px;
}

.bet-details {
    margin: 9px 0px 18px 0px;
}

/* keep items compact */

.bet-header > div {
    white-space: nowrap;
}

.match-bet-info {
    font-weight: 600;
}

.bet-description-wrapper {
    position: relative;
}

.bet-description {
    color: #f2f2f2;
}

.description-toggle {
    color: #666;
    border-radius: 6px;
}

.description-toggle:hover {
    background-color: #f2f2f2;
    border-color: #777;
}

.odds-row {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.odds {
    color: #f2f2f2;
}

.additional-bet-container {
    color: #f2f2f2;
    font-weight: 540;
    margin-bottom: 12px !important;
    margin-top: 0px;
    margin-left: 12px;
}

.additional-bet-bet {
    font-weight: 600;
    font-size: 1.1em;
}

.price-row {
    margin-top: 12px;
}

.price-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 6px;
}

.price-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.price-row span,
 .price-row .toggle-switch,
 .price-row .price {
    white-space: nowrap;
}

.pick-has-description {
    font-size: 1.1em;
    margin-top: 0px !important;
    color: #f2f2f2;
}

.pick-guaranteed {
    font-size: 1.0em;
    font-weight: 540;
    margin-top: 0px !important;
    color: #ddd;
}

.bet-bookie {
    font-size: 1.0em;
    margin-left: -1px;
}

.open-in-new-window-text {
    font-size: 1.0em;
}

/* Mobile: put icons on their own row */

@media (max-width: 768px) {

    .match-bet-info {
        font-size: 1.2em;
        font-weight: 600;
        color: var(--base-color-green);
    }
    .mobile-div {
        margin-top: -2px;
    }
    .open-in-new-window-text {
        font-size: 0.9em;
    }
    .bet-description {
        font-size: 1.2em;
    }
    .bet-description[data-is-expanded="false"] {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .odds {
        margin-top: 0px;
        line-height: 18px;
    }
    .price-row {
        gap: 0px;
        margin-top: -9px;
    }
    .price-row-left {
        width: 100%;
        justify-content: center;
        margin: 0px !important;
        margin-bottom: 0px !important;
        font-size: 0.9em;
    }
    .pick-guaranteed {
        font-size: 1.1em;
        margin-top: 0px !important;
        color: #ddd;
        padding-top: 5px;
    }
    .pick-has-description {
        padding-top: 5px;
    }
    .price-row-right {
        width: 100%;
        justify-content: flex-end;
    }
    .additional-bet-container {
        font-size: 1.1em;
    }
}

.odds {
    line-height: 18px;
}

.price {
    font-weight: 540;
    color: #fff;
    text-decoration: underline;
    margin-left: -6px;
}

/* Toggle Switch Styles */

.toggle-slider {
    background-color: #ccc;
}

.toggle-switch:has(input:checked),
 .toggle-switch:has(input:disabled) {
    box-shadow: none;
}

.pick-toggle:checked + .toggle-slider,
 .pick-toggle:disabled + .toggle-slider,
 .buy-all-toggle:checked + .toggle-slider,
 .buy-all-toggle:disabled + .toggle-slider {
    box-shadow: none;
}

@media (max-width: 768px) {

    .toggle-switch {
        margin-right: 6px;
    }
    .pick-header {
        margin-bottom: 10px;
    }
    .bet-header {
        padding: 6px 0px 15px 0px;
    }
    .pick-header img,
     .pick-header span {
        display: inline-block;
        vertical-align: middle;
    }
    .league-roi {
        margin-left: auto;
        margin-right: 3px;
    }
    .match-row {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 4px;
    }
    .match-teams-container {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 4px;
    }
    .team {
        width: 100% !important;
        max-width: none !important;
    }
    .team.home {
        grid-row: 1;
    }
    .team.away {
        grid-row: 2;
        align-self: start;
    }
    .match-header {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* Prevent checkbox flickering on hover */

input[type="checkbox"] {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

input[type="checkbox"]:hover {
    outline: none !important;
    box-shadow: none !important;
}

input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

input[type="checkbox"]:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure labels don't cause flickering */

label[for*="bet-filter"] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Last Signal */

.last-signal {
    background-color: var(--bg-color-2);
    border: 2px solid var(--bg-color-4);
    border-radius: 9px;
    padding: 18px 18px 12px 18px;
    background: linear-gradient(180deg, var(--bg-color-1) 0%, var(--bg-color-5) 100%);
    max-width: 480px;
    margin: 0px auto;
    margin-top: 18px;
}

.last-signal-header {
    text-align: center;
    color: #fff;
    font-size: 1.0em;
    font-weight: 600;
    padding: 7px 0px 2px 0px;
    margin: -18px -18px 0px -18px;
    background-color: var(--bg-color-3);
    border-radius: 8px 8px 0px 0px;
}

/* Outcome bet styling (from index_kerroinvahti.html) */

.last-signal .outcome-cell {
    transition: background-color 0.2s;
    margin-bottom: 12px;
}

.last-signal .outcome-bet {
    padding: 4px 9px 0px 9px;
    padding-right: 6px;
    font-size: 0.95em;
    font-weight: 560;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 4px solid #ff5500;
}

.last-signal .outcome-bet span {
    color: #151515;
}

/* Top 5 leagues */

.top-five {
    background-color: var(--bg-color-2);
    border: 2px solid var(--bg-color-4);
    border-radius: 9px;
    padding: 18px 18px 12px 18px;
    background: linear-gradient(180deg, var(--bg-color-1) 0%, var(--bg-color-5) 100%);
    max-width: 480px;
    margin: 0px auto;
    margin-top: 18px;
}

.top-five-header {
    text-align: center;
    color: #fff;
    font-size: 1.0em;
    font-weight: 600;
    padding: 7px 0px 2px 0px;
    margin: -18px -18px 0px -18px;
    background-color: var(--bg-color-3);
    border-radius: 8px 8px 0px 0px;
}

.top-five td {
    color: #fff;
    line-height: 15px;
    padding: 5px 6px 0px 6px;
    text-align: center;
}

.top-five th {
    line-height: 15px;
    padding: 5px 6px 0px 6px;
    font-size: 0.8em;
    font-weight: 570;
    text-align: center;
    padding-bottom: 6px;
    color: var(--base-color-blue);
}

.top-five-rank {
    background-color: yellow;
    color: #151515 !important;
    font-weight: 600;
    text-align: center !important;
    width: 24px !important;
    border-radius: 6px;
}

.top-five-league {
    padding-left: 12px !important;
    font-weight: 570;
    text-align: left !important;
}

.top-five-picks {
    text-align: center;
}

.top-five-roi {
    background-color: var(--bg-color-4);
    opacity: 1;
    padding: 7px 8px 2px 8px !important;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 1.0em;
}

/* Live Bet Information Styles */

.live-bets {
    background-color: var(--bg-color-2);
    border: 2px solid var(--bg-color-4);
    border-radius: 9px;
    padding: 18px 18px 12px 18px;
    background: linear-gradient(180deg, var(--bg-color-1) 0%, var(--bg-color-5) 100%);
    max-width: 480px;
    margin: 0px auto;
    margin-top: 18px;
}

.live-bets-header {
    text-align: center;
    color: var(--base-color-blue);
    font-size: 1.0em;
    font-weight: 600;
    padding: 7px 0px 2px 0px;
    margin: -18px -18px 0px -18px;
    background-color: var(--bg-color-3);
    border-radius: 8px 8px 0px 0px;
}

.last-bet-info {
    padding: 12px;
    font-size: 1.0em;
    color: #f2f2f2;
}

.bet-event {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 6px;
}

.bet-line {
    margin-top: 24px;
}

.bet-timestamp {
    color: #F4FA58;
}

.bet-result {
    font-weight: bold;
}

.bet-result:contains("Voitto") {
    color: #28a745;
}

.bet-result:contains("Tappio") {
    color: #dc3545;
}

.no-bets,
 .error-message {
    color: #6c757d;
    font-style: italic;
    text-align: center;
    margin: 10px 0;
}

/* Unified hover area for checkbox and label */

.filter-option-container {
    cursor: pointer;
    padding: 6px 6px 0px 6px;
    border-radius: 9px;
    transition: background-color 0.1s ease;
    position: relative;
    background-color: var(--bg-color-5);
    margin: 6px 9px 6px 0px;
    height: 34px;
}

.filter-option-container:hover {
    background-color: var(--bg-color-5);
    color: var(--highlight-color-1);
}

.filter-option-container input[type="checkbox"] {
    cursor: pointer;
    pointer-events: none;
}

.filter-option-container label {
    cursor: pointer;
    pointer-events: none;
}

.filter-option-container img,
 .filter-option-container span {
    pointer-events: none;
}

#overlay {
    background-color: var(--bg-color-1);
}

.button-5 {
    font-size: 0.85em;
}

.pick-content .button-5 {
    width: 100%;
}

.button-6 {
    background-color: var(--bg-color-4);
}

.button-6:hover {
    background-color: var(--bg-color-4);
}

#rotating-ad {
    margin: 12px 0px 24px 0px;
    font-size: 1.1em;
}

#div-about-container {
    max-width: 720px;
    background-color: var(--bg-color-1);
    margin: 0 auto;
    margin-top: 60px;
    font-size: 1.1em;
    padding: 0 30px;
}

/* FAQ Section */

.faq-section {
    background-color: var(--bg-color-1);
    color: #fff;
}

.faq-section h2 {
    font-family: "anek devanagari", sans-serif;
}

.faq-question {
    background: var(--bg-color-2);
    font-family: "anek devanagari", sans-serif;
}

.faq-toggle {
    line-height: 30px;
}

.faq-answer {
    line-height: 1.6;
}

.material-icons-visibility {
    font-size: 21px;
}

.material-icons-visibility:hover {
    background: none;
    padding: 0px;
    margin: 0px;
    cursor: default;
}

.sport-icon-football {
    height: 18px;
    margin: 2px 0px 3px 0px;
    vertical-align: middle;
}

.sport-icon-basket {
    font-size: 16px;
    margin: 2px 0px 3px 0px;
    vertical-align: middle;
}

/* Mobile styles for rotation */

/* Unified hover area for checkbox and label */

@media only screen and (max-width: 768px) {

    .filter-option-container {
        background-color: var(--bg-color-4);
        text-align: left;
        height: 36px;
    }
}

/* Make tennis icon smaller on mobile */

@media only screen and (max-width: 768px) {

    .sport-icon-tennis {
        font-size: 15px !important;
        margin-bottom: 3px !important;
    }
    .sport-icon-football {
        height: 22px !important;
        margin: 0px 0px 3px 0px;
    }
    .sport-icon-basket {
        font-size: 15px !important;
        margin-bottom: 3px !important;
    }
    #main-page-right-section {
        margin: 0px 3px !important;
        width: calc(100% - 6px) !important;
        max-width: calc(100% - 6px) !important;
    }
    #live-bets-container-mobile {
        margin: 0px 3px;
    }
    .live-bets {
        margin: 18px 3px !important;
        width: calc(100% - 6px) !important;
        max-width: calc(100% - 6px) !important;
    }

    #rotating-ad {
        margin: 12px 6px 12px 6px;
        font-size: 1.0em;
    }
    #div-about-container {
        background-color: var(--bg-color-1);
        margin: 0 auto;
        margin-top: 60px;
        font-size: 1.1em;
        padding: 0 18px;
    }
}

/* FAQ Section */

@media only screen and (max-width: 768px) {

    .faq-section {
        padding: 2rem 1rem 4rem 1rem;
    }
    .faq-toggle {
        font-size: 30px !important;
        line-height: 30px !important;
        margin-bottom: 3px;
        margin-left: 3px;
    }
    .top-five-league {
        font-size: 0.9em;
    }
    .faq-question {
        font-size: 1.2rem;
    }
    .main-description {
        font-size: 0.9em;
    }
}

/* Extra small mobile devices */

@media only screen and (max-width: 430px) {

    .pick-header {
        font-size: 0.8em;
    }
}

/* Desktop layout wrapper styles */

.desktop-layout-wrapper {
    background-color: var(--bg-color-3);
}

/* Ensure minimum width for single pick */

#main-page-right-section {
    min-width: 300px;
}

/* Responsive breakpoint for side-by-side layout */

/* Unified hover area for checkbox and label */

@media (max-width: 1200px) {

    .desktop-layout-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    .desktop-layout-wrapper .container-2 {
        width: 100%;
        order: 1;
    }
    .desktop-layout-wrapper #main-page-right-section {
        min-width: auto;
        width: 100% !important;
        margin: 0px auto;
        order: 2;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP OVERLAYS
   pick-description-popup, competition-message-popup
   ═══════════════════════════════════════════════════════════════════════════ */

.popup-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.popup-header {
    background-color: var(--bg-color-5);
    border-radius: 9px 9px 0 0;
    padding-bottom: 12px;
    position: relative;
    text-align: center;
}

.popup-header-logo.logo {
    color: var(--highlight-color-1);
    font-size: 1.2em;
    margin: 18px 0px 0px 0px;
}

.popup-message-content {
    background-color: #fff;
    color: #151515;
    padding: 6px;
    border-radius: 12px;
    font-size: 1.1em;
}

.close-popup-3 {
    position: absolute;
    right: 30px;
    top: 24px;
    font-size: 42px;
    cursor: pointer;
    color: #ccc;
    font-weight: normal;
}

.close-popup-3:hover {
    color: #fff;
}

.product-card {
    background-color: #F6F7FC;
    background-image: linear-gradient(#F6F7FC, #f8f8f8);
    padding-bottom: 12px;
    border-radius: 0 0 9px 9px;
}

.popup-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0;
}

.action-button {
    padding: 8px 20px 4px 20px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 15px;
    background-color: #0174DF;
    color: white;
    transition: background-color 0.2s;
    font-weight: 540;
    font-family: "anek devanagari", sans-serif;
}

.action-button:hover {
    background-color: #0080FF;
}

.action-button.cancel-button {
    background-color: #D8D8D8;
    color: #000;
}

@media screen and (max-width: 768px) {

    .popup-content {
        max-width: 100%;
    }
    .popup-header-logo.logo {
        margin-left: -12px;
    }
    .desktop-layout-wrapper {
        padding: 0px 0px 18px 0px !important;
        margin: 0px 3px !important;
        background-color: var(--bg-color-1);
    }
    .top-five,
     .last-signal {
        max-width: none;
        margin-top: 9px;
    }
    .top-five {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 768px) {

    div {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    body {
        padding-bottom: 542px;
    }
    a {
        transition: none;
    }
    a:hover {
        transition: none;
    }
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
    .desktop-inline {
        display: none;
    }
    .mobile-inline {
        display: inline;
    }
    .desktop-only {
        display: none;
    }
    html,
     body {
        overflow-x: hidden;
    }
    select {
        font-size: 1.0em;
    }
    .container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        overflow-x: hidden !important;
    }
    .container-2 {
        font-size: 1.0em;
        padding: 18px 18px;
        margin-top: 12px;
    }
    .container-2-mobile {
        font-size: 1.0em;
        padding: 18px 0px;
        margin-top: 12px;
        background-color: var(--bg-color-3);
    }
    #menu-main-arrows {
        display: none !important;
    }
    #menu-main-container {
        display: none !important;
    }
    #content {
        margin-left: 6px;
        margin-right: 6px;
        padding: 9px 9px;
    }
    .logo {
        margin-top: 18px;
        margin-left: 24px;
        font-size: 30px;
    }
    .header .menu {
        overflow-x: auto;
        height: 30px;
    }
}

/* MENU MAIN */

@media only screen and (max-width: 768px) {

    .menu-main {
        overflow-x: auto;
        display: flex;
        padding: 0px 0px 18px 0px;
        margin-bottom: 18px;
    }
    .menu-main:hover {
        overflow-x: scroll;
    }
}

/* MENU */

@media only screen and (max-width: 768px) {

    .menu-mobile {
        background: var(--bg-color-2);
        display: none;
        position: fixed;
        width: 100%;
        overflow: auto;
        border: 0px;
        z-index: 1100;
        font-size: 1.2em;
    }
    .menu-mobile-top {
        background-color: var(--bg-color-1);
        padding-bottom: 9px;
    }
    .menu-mobile-scroll {
        height: 100vh;
        overflow-y: auto;
    }
    .menu-mobile-content {
        background-color: var(--bg-color-5);
        border-radius: 15px;
        padding-top: 18px;
        height: 100vh;
        margin: 11px 6px 0px 6px;
        font-size: 1.1em;
        padding-bottom: 120px;
    }
    .menu-item {
        display: block;
        margin: 12px 30px;
    }
    .menu-item a {
        color: #fff;
        text-decoration: none;
        font-size: 1.0em;
    }
    .menu-item a:hover {
        color: var(--highlight-color-1);
    }
    .menu-2 {
        margin: -10px;
        padding: 9px;
    }
    .menu-item-3 {
        margin-left: 30px;
    }
    .menu-item-4 {
        display: block;
        margin: 12px 30px;
    }
    .menu-item-4 a {
        color: #f2f2f2;
        text-decoration: none;
        font-size: 0.9em;
    }
    .menu-item-4 a:hover {
        color: #fff;
    }
    #menu-main-left-right-arrows {
        text-align: right;
        padding: 3px 3px 0px 0px;
        margin-bottom: 0px;
    }
    .last {
        margin-right: 18px;
    }
}

/* NEW PICKS */

@media only screen and (max-width: 768px) {

    .betting-top {
        display: block;
        width: 100%;
    }
    .bg-info {
        margin: 12px -12px 0px -12px;
    }
    .flex-container {
        display: flex;
    }
    .new-pick-container {
        flex: 100%;
        min-width: 0px;
        padding: 12px 12px 12px 12px;
        font-size: 0.9em;
        margin: 6px;
        width: 100%;
        background-color: var(--bg-color-2);
    }
    .new-pick-container td {
        border: 1px solid var(--bg-color-2);
    }
    .new-pick-col-1 {
        min-width: 135px;
        margin-right: 12px;
    }
    .new-pick-col-1-5 {
        font-size: 1.0em;
        margin-top: 0px;
    }
    .new-pick-col-2 {
        min-width: 0;
        overflow: hidden;
        padding-right: 6px;
    }
    .new-pick-col-2-1 {
        padding: 3px 3px 3px 3px;
        min-width: 171px;
        background-color: var(--bg-color-5);
    }
}

/* BLOG */

@media only screen and (max-width: 768px) {

    .blog-container {
        margin: 0px;
        padding: 0px;
    }
    .blog-text {
        width: 100%;
        margin: 0px 0px;
        padding: 24px 18px;
    }
    .blog-history {
        color: var(--highlight-color-1);
        max-width: 960px;
        margin: 0px auto;
        margin-top: 60px;
        padding-left: 18px;
        border-radius: 15px;
    }
    .person {
        margin: 18px 0px;
        padding: 30px 6px;
    }
    .person-name-img {
        text-align: center;
    }
    .person-img {
        margin-left: 0px;
    }
    .fpl-team-selection-container {
        width: 100%;
    }
    .telegram {
        flex: 1 1 420px;
        text-align: left;
        padding: 30px 30px;
        background-color: var(--bg-color-4);
        margin: 18px 0px;
        border-radius: 15px;
        min-height: 240px;
    }
    .button-login {
        margin-top: 0px;
    }
    .button-blue {
        transition: none;
    }
    .button-blue:hover {
        transform: none;
        transition: none;
    }
    .material-icons-person-3 {
        padding: 0px;
        margin: 0px;
        margin-top: 5px;
        border-radius: 0px;
    }
    .material-icons-person:hover {
        background-color: var(--bg-color-3);
    }
    .money-container:hover {
        background-color: var(--bg-color-3);
    }
    .footer {
        padding: 30px 12px;
    }
    .sticky-div-bottom-right {
        padding-top: 3px;
        font-size: 1.3em;
        width: 192px;
        height: 137px;
    }
    .button-sticky-div-bottom-right {
        margin: 12px auto;
        width: 114px;
    }
    .menu-left-tbl {
        margin-left: 0px;
        margin-top: 6px;
        width: 100% !important;
    }
    .menu-left-tbl-td-1 {
        background-color: #343956;
        text-align: center;
        width: 48px;
        height: 42px;
        vertical-align: middle;
        border-radius: 6px 0px 0px 6px;
        border-right: 3px solid var(--bg-color-5);
    }
    .menu-left-tbl-td-2 {
        background-color: #343956;
        text-align: left;
        height: 42px;
        padding-top: 6px;
        padding-left: 12px;
        border-radius: 0px 6px 6px 0px;
    }
    .menu-icon:hover {
        background-color: var(--bg-color-1);
    }
    .x-icon:hover {
        background-color: var(--bg-color-1);
    }
    .sticky-div-top-center {
        top: 60px !important;
    }
    .sticky-div-top-center-2 {
        top: 40%;
        left: calc(50% - 150px);
        transform: translateY(-40%);
        width: 300px;
    }
    .sticky-div-top-center-2 .close-button-2 {
        font-size: 1.8em;
    }
    .menu-arrows {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 12px;
    }
    .menu-arrow-up,
     .menu-arrow-down {
        width: 51px;
        height: 30px;
        background: #343956;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        border-radius: 6px;
        margin-bottom: 6px;
    }
    .container #content {
        padding-bottom: 0px !important;
    }
    .container {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 960px) {

    #menu-top-desktop {
        display: none;
    }
    #vihjepalvelu-active-picks-desktop {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */

.slide-from-left {
    animation: slideIn 0.3s ease-out forwards;
    transform: translateX(-100%);
    opacity: 0;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER UTILITIES
   Classes replacing inline styles in header.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Menu icon sizes — replaces inline font-size on emoji icons */

.menu-icon-15 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    padding-top: 6px;
}

.menu-icon-18 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    padding-top: 6px;
}

.menu-icon-21 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 21px;
    padding-top: 3px;
}

/* Menu category section headings (VEDONLYÖNTI, RAVIT, etc.) */

.menu-category-heading {
    color: #addeff;
    font-weight: 500;
    padding-left: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER UTILITIES
   Classes replacing inline styles in footer.php
   ═══════════════════════════════════════════════════════════════════════════ */

.language-switcher {
    display: none;
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
}

.language-selected {
    border: 1px solid var(--base-color-light-blue);
    background-color: var(--bg-color-3);
}

.language-options {
    background-color: #fff;
    border: 1px solid #6E6E6E;
}

/* Auth section — always pushed to right in header flex row */

.header-auth-section {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* ── Popup system ────────────────────────────────────────────────────────────
   Standard popup pattern used across all pages.
   Usage:
     <div class="popup-overlay" id="my-popup">
       <div class="popup-box">
         <div class="popup-head">
           <span class="logo">SITE NAME</span>
           <button class="popup-close" onclick="closePopup('my-popup')">&times;</button>
         </div>
         <div class="popup-body">...content...</div>
       </div>
     </div>
   JS: openPopup('my-popup') / closePopup('my-popup')
───────────────────────────────────────────────────────────────────────────── */

.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.popup-box {
    font-family: "anek devanagari", sans-serif;
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #f2f2f2;
    width: 100%;
    max-width: 520px;
    text-align: center;
    color: #202021;
    overflow: hidden;
    padding: 1px;
}

.popup-head {
    background-color: var(--bg-color-5);
    border-radius: 6px 6px 0 0;
    padding: 5px 18px 0px 9px !important;
    text-align: left;
}

.popup-head .logo {
    font-family: "anek devanagari", sans-serif;
    font-size: 1.0em;
    font-weight: 600;
    margin-left: 6px !important;
    color: var(--highlight-color-1);
}

.popup-close {
    position: absolute;
    right: 15px;
    top: 6px;
    font-size: 1.6em;
    cursor: pointer;
    color: #ccc;
    background: none;
    border: none;
    line-height: 1;
    padding: 0;
    transition: color 0.15s;
    font-weight: 400 !important;
}

.popup-close:hover {
    color: #fff;
}

.popup-body {
    background-color: #fafafa;
    padding: 24px;
    text-align: center;
    color: #202021;
    border-radius: 0 0 15px 15px;
}


.popup-body b {
    font-weight: 600;
}

.popup-btns {
    background-color: #f2f2f2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px -24px -24px -24px;   /* cancels .popup-body padding: right, bottom, left */
    padding: 12px 24px;               /* keeps the buttons off the edge */
    border-top: 1px solid #dcdfe8;
}

@media (max-width: 768px) {

    .popup-box {
        max-width: 100%;
        border-radius: 12px;
        font-size: 18px !important;
    }
    .popup-body {
        padding: 16px 14px 20px 14px;
    }
    .popup-head {
        padding: 7px 12px 6px 12px !important;
        border-radius: 9px 9px 0 0;
    }
    .popup-head .logo {
        font-size: 1.1em;
        margin-top: 3px;

    }
    .popup-close {
        font-size: 1.8em;
        right: 15px;
        top: 4px;
    }
    .popup-body {
        font-size: 18px;
    }
    
    .popup-btns {
    
    }

}

:root {
    --header-height: 42px;
    --header-height-mobile: 60px;
    --content-width: 1280px;
    --color-dark-gray: #2b2c2d;
    --color-mid-gray: #e3e4eb;
    --color-light-gray: #edeef0;
    --color-light-gray-blue: #f9f9fb;
    --color-red: #dd0000;
    --color-green: #07DB77;
    --color-blue: #0066cc;
    --color-navy-blue: #282D4A;
    --color-light-blue: #b6c8d8;
    --color-cyan-mid: #5cd4ff;
    --color-cyan-light: #0ae9ff;
    --color-cyan-dark: #378cb4;
    --color-cyan-extra-dark: #00557d;
    --bg-color-1: #00142D;
    --bg-color-2: #202540;
    --bg-color-3: #282D4A;
    --bg-color-4: #353B5B;
    --bg-color-5: #3A4060;
    --base-color-black: #000;
    --base-color-white: #fff;
    --base-color-blue: #acbece;
    --base-color-light-blue: #03EDFF;
    --base-color-dark-blue: #00142D;
    --base-color-gray: #ccc;
    --base-color-semi-dark-gray: #848484;
    --base-color-dark-gray: #424242;
    --base-color-green: #07DB77;
    --base-color-red: #FF1751;
    --highlight-color-1: #F1C40F;
    --highlight-color-2: #FAD541;
}

/* ═══════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════ */

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

a:hover {
    color: var(--color-blue);
    text-decoration: underline;
    transition: 0.2s ease-in-out;
}

.link-default {
    color: var(--color-dark-gray);
}

.link-default:hover {
    color: var(--color-dark-gray);
}

/* ═══════════════════════════════════════════════════════
   MATERIAL ICONS
   ═══════════════════════════════════════════════════════ */

.material-icons {
    all: unset;
    color: var(--color-light-blue);
    cursor: default;
    line-height: 1;
    vertical-align: middle;
}

.material-icons:hover {
    background: none;
    padding: inherit;
    margin-top: inherit;
    margin-left: inherit;
    margin-right: inherit;
    border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */

.button-login {
    border: 2px solid var(--color-light-blue);
    border-radius: 12px;
    font-family: "Russo One", sans-serif;
    font-size: 0.75em;
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    background-color: var(--color-navy-blue);
    filter: brightness(0.95);
    padding: 4px 15px 4px 15px;
    text-align: center;
    color: var(--color-light-blue);
    opacity: unset;
    margin-top: unset;
}

.button-login:hover {
    border: 2px solid #fff;
    color: #fff;
}

.button-login a {
    text-decoration: none;
}

.button-login a:hover {
    text-decoration: none;
}

.button-default {
    border: none !important;
    border-radius: 50px;
    font-family: "Anek Devanagari", sans-serif;
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    background: var(--color-blue);
    color: #fff;
    padding: 4px 18px 1px 18px;
    text-align: center;
}

.button-default:hover {
    background: color-mix(in srgb, var(--color-blue) 100%, white 10%);
}

.new-badge {
    position: relative;
    top: unset;
    right: unset;
    font-size: 0.75em;
    padding: 5px 5px 0px 5px;
    line-height: 1;
    background-color: yellow;
    color: #151515;
    border: 1px solid #666;
    border-radius: 0px;
    font-weight: 560;
    white-space: nowrap;
    margin-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════ */

.tooltip-telegram {
    margin-top: 2px;
    position: relative;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    z-index: 1000;
}

.tooltip-telegram:hover {
    transform: scale(1.1);
}

.tooltip-telegram img {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

.tooltip-telegram:hover img {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}

.tooltip-telegram img {
    transition: filter 0.2s ease-in-out;
    border: 0px solid #fff;
    border-radius: 30px;
    padding: 1px;
    background: #25A5E3;
    animation: pulse 2s infinite;
}

/* Pulsing highlight effect */

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 #2E9AFE;
	}
	70% {
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

/* Tooltip text */

.tooltip-telegram .tooltiptext {
    visibility: hidden;
    text-align: left;
    padding: 0px;
    padding-top: 1px;
    border-radius: 0px;
    border-left: none;
    font-size: 0.85em;
    font-weight: 570;
    position: absolute;
    z-index: 1;
    background: transparent;
    color: #fff;
    opacity: 0.95;
    margin: 0px 0px 0px 0px;
    padding-left: 36px;
    transition: visibility 0.2s ease-in-out;
    width: 218px;
    top: 0px !important;
}

.tooltip-telegram:hover .tooltiptext {
    visibility: visible;
}

.tooltip-telegram .tooltiptext:hover {
    background: none;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   GENERAL
   ═══════════════════════════════════════════════════════ */

html {
    height: 100%;
    margin: 0;
    font-family: "anek devanagari", sans-serif;
    font-size: 16px;
    cursor: default;
    line-height: 1.7em;
}

body {
    background: var(--color-light-gray);
    font-weight: 400;
    padding-bottom: 120px;
    height: auto !important;
    margin: 0;
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}

#overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: #0d1024;
    opacity: 1;
    transition: opacity 0.5s ease;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

#overlay .logo {
    font-size: 1.8em;
}

#overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

h1 {
    font-family: "anek devanagari", sans-serif;
    font-size: 1.6em;
    font-weight: 700 !important;
    color: var(--color-dark-gray);
    text-transform: none !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 1 !important;
}

h2 {
    font-family: "anek devanagari", sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-dark-gray);
    text-transform: none !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 1 !important;
}

h3 {
    font-family: "anek devanagari", sans-serif;
    font-size: 1.1em !important;
    font-weight: 540 !important;
    color: var(--color-dark-gray) !important;
    text-transform: none !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 1 !important;
}

img {
    padding: 0px;
    margin: 0px;
    line-height: 1;
}

#div-site-notice {
    margin: 0px 30px -30px 30px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: calc(var(--header-height) + 6px);
}

#div-site-notice-inner {
    background-color: yellow;
    color: #151515;
    padding: 9px 18px 4px 18px;
    margin: 0px 0px;
    font-size: 1.0em;
    font-weight: 520;
    text-align: center;
    line-height: 1;
}

.divider {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 6px;
}

.header {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    height: 72px;
}

.header-fixed-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--color-navy-blue);
    filter: brightness(1.0);
    min-height: var(--header-height);
    box-shadow: 0 2px 4px rgba(60,60,60,0.5);
}

.header-inner {
    display: flex;
    align-items: center;
    margin: 0 auto;
    max-width: var(--content-width);
    width: 96%;
    padding: 0 0;
    background: none;
    height: var(--header-height);
}

#menu-icon-home span {
    font-size: 24px;
    margin-right: 8px;
    margin-top: 2px;
}

#menu-telegram {
    margin-top: 4px;
}

#menu-telegram img {
    height: 22px;
}

#menu-desktop-icon .material-icons {
    line-height: 1;
    vertical-align: middle;
    font-size: 25px;
    margin-top: 3px;
}

.logo {
    display: inline-block;
    margin-top: 0;
    margin-left: 18px !important;
    margin-right: 18px;
    font-family: "magistral black", sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0px;
}

.logo a {
    color: var(--highlight-color-1);
    font-size: 18px;
}

.logo a:hover {
    text-decoration: none;
}

.vedonlyojacom {
    font-family: "magistral extrabold", "magistral black", sans-serif;
    letter-spacing: 0px;
    color: var(--highlight-color-1);
}

.material-icons-default:hover {
    cursor: pointer;
    filter: brightness(1.15);
}

.user-menu-trigger {
    font-size: 21px;
}

.user-profile {
    padding: 0px 9px;
    margin-top: 3px;
    color: var(--color-light-blue);
    height: 34px;
}

.user-profile:hover {
    background-color: inherit;
    color: var(--color-light-blue);
}

.user-profile .material-icons {
    margin-top: 3px;
    font-size: 24px !important;
}

.user-profile .hover:hover {
    color: var(--color-light-blue);
    filter: brightness(1.25);
    margin-top: 3px;
    cursor: pointer;
}

.money-container {
    margin-top: 0px;
    text-wrap: nowrap;
    background-color: var(--bg-color-2);
    filter: brightness(1.0);
    padding: 11px 12px 0px 9px !important;
    height: var(--header-height);
    border-radius: 0px;
    align-items: center;
    font-size: 1.1em;
    border-left: 1px solid var(--bg-color-4);
    border-right: 1px solid var(--bg-color-4);
    display: flex;
}

.money-container:hover {
    background-color: var(--bg-color-3);
    color: var(--color-light-blue);
    cursor: pointer;
}

.user-dropdown::before,
 .user-dropdown::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

/* Outer triangle — acts as the arrow's outline, matching the dropdown's border */

.user-dropdown::before {
    top: -9px;
    right: 12px;
    border-bottom: 9px solid #fff;
}

/* Inner triangle — the fill, matching the color of the top segment it's pointing from */

.user-dropdown::after {
    top: -8px;
    right: 13px;
    border-left-width: 7px;
    border-right-width: 7px;
    border-bottom: 8px solid #fff;
}

.container {
    background: var(--color-light-gray);
    max-width: var(--content-width);
    padding: 18px 0px 60px 0px;
    width: 96%;
    margin: 0 auto;
}

#content {
    margin-top: calc(var(--header-height) - 6px);
    background: var(--color-light-gray);
    font-size: 1.0em;
    border-radius: 15px 15px 0px 0px;
    padding: 0px 18px 0px 18px;
}

/* Reusable version of the same background — for placing a full-width
   hex-banner band ANYWHERE in a page's own content, not just the
   fixed top-of-page slot .hero-hex-banner occupies.
   IMPORTANT: only place this as a DIRECT CHILD of .container. .container
   is centered on the page, so this breakout math (which assumes the
   element's natural horizontal center matches the viewport's center)
   resolves correctly there. .container-2 and #main-page-right-section
   are flex items inside .desktop-layout-wrapper, NOT centered on the
   page themselves — using .hex-banner inside either of those will
   misalign, since the breakout would measure from the wrong center. */

.hex-banner {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background-color: #041ab3;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='27.713'><polygon points='16.00,0.00 8.00,13.86 -8.00,13.86 -16.00,0.00 -8.00,-13.86 8.00,-13.86' fill='none' stroke='%2323a03b' stroke-opacity='0.8' stroke-width='1'/><polygon points='16.00,27.71 8.00,41.57 -8.00,41.57 -16.00,27.71 -8.00,13.85 8.00,13.85' fill='none' stroke='%2323a03b' stroke-opacity='0.8' stroke-width='1'/><polygon points='40.00,-13.86 32.00,-0.00 16.00,-0.00 8.00,-13.86 16.00,-27.72 32.00,-27.72' fill='none' stroke='%2323a03b' stroke-opacity='0.8' stroke-width='1'/><polygon points='40.00,13.86 32.00,27.72 16.00,27.72 8.00,13.86 16.00,0.00 32.00,0.00' fill='none' stroke='%2323a03b' stroke-opacity='0.8' stroke-width='1'/><polygon points='40.00,41.57 32.00,55.43 16.00,55.43 8.00,41.57 16.00,27.71 32.00,27.71' fill='none' stroke='%2323a03b' stroke-opacity='0.8' stroke-width='1'/><polygon points='64.00,0.00 56.00,13.86 40.00,13.86 32.00,0.00 40.00,-13.86 56.00,-13.86' fill='none' stroke='%2323a03b' stroke-opacity='0.8' stroke-width='1'/><polygon points='64.00,27.71 56.00,41.57 40.00,41.57 32.00,27.71 40.00,13.85 56.00,13.85' fill='none' stroke='%2323a03b' stroke-opacity='0.8' stroke-width='1'/></svg>"), linear-gradient(90deg, #166a72 0%, #0d3d8d 20%, #041ab3 50%, #0f4980 90%);
    background-size: 48px 27.713px, cover;
    background-repeat: repeat, no-repeat;
    padding: 0px;
    text-align: center;
    box-sizing: border-box;
}

.container-2 {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    border-radius: 12px !important;
    margin: 0px;
    background: #fff;
    font-size: 1.0em;
    padding: 24px 24px;
}

.default-container {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    border-radius: 12px !important;
    margin: 0px;
    background: #fff;
    font-size: 1.0em;
    padding: 24px 24px;
}

/* ═══════════════════════════════════════════════════════
   INDEX.PHP
   ═══════════════════════════════════════════════════════ */

.desktop-layout-wrapper {
    background: none;
    max-width: var(--content-width);
    padding: 0px 30px !important;
    margin: 0px;
    margin-top: 60px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-radius: 0px;
}

.desktop-layout-wrapper .container-2 {
    flex: 1;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════
   MAIN PAGE RIGHT SECTION
   ═══════════════════════════════════════════════════════ */

.desktop-layout-wrapper #main-page-right-section {
    flex: 0 0 auto;
    min-width: 300px;
    width: 300px;
}

.right-section-widget-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: stretch;
    margin: 0px auto 18px auto;
    justify-content: center;
}

.right-section-widget-row > div {
    flex: 1 1 300px;
    min-width: 300px;
    display: flex;
    justify-content: flex-start;
    max-width: 300px;
}

.right-section-widget-row .last-signal,
 .right-section-widget-row .live-bets {
    max-width: none !important;
    margin: 0 !important;
    width: 100%;
}

.site-content-links {
    margin-top: 18px;
    background: linear-gradient(135deg, var(--color-light-gray-blue) 0%, #fff 100%);
    border-radius: 12px;
    padding: 6px 12px 18px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.site-content-links-title {
    font-size: 0.85em;
    padding: 3px 0px 3px 0px;
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-dark-gray);
    border-bottom: 1px solid #ccc;
}

.site-content-links ul,
 li {
    background: none;
}

.site-content-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    column-width: 170px;
    column-gap: 18px;
}

.site-content-links li {
    padding: 6px 0px 3px 0px;
    margin: 0px;
    line-height: 1;
    break-inside: avoid;
    border-bottom: 1px dotted #ccc;
    font-size: 0.85em;
}

.site-content-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-dark-gray);
    text-decoration: none;
}

.site-content-links a:hover {
    color: var(--color-blue);
    text-decoration: none !important;
}

.site-content-links .material-symbols-outlined {
    margin-bottom: 4px;
}

.site-content-links a .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-dark-gray);
    flex-shrink: 0;
}

.site-content-links a:hover .material-symbols-outlined {
    color: var(--color-blue, #1a73e8);
}

#nr-of-active-new-picks {
    background-color: #0080FF;
    padding: 0px 4px 0px 3px;
    margin-bottom: 3px;
    height: 18px;
    width: 18px;
    vertical-align: middle;
    font-size: 0.8em;
    text-align: center;
    color: #fff;
    font-weight: 500;
    line-height: 2;
}

/* ═════════════════════════════════════════════════════ */

#active-picks-container,
 #my-picks-container {
    background: none !important;
    margin: 0px !important;
    color: var(--color-dark-gray) !important;
}

#my-picks-container {
    padding: 18px 18px 0px 18px;
}

#active-picks-container .live-ping,
 #my-picks-container .live-ping {
    display: none;
}

.panel-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-cyan-light) 3%, white 97%) 0%, color-mix(in srgb, var(--color-cyan-light) 70%, white 30%) 100%);
    border-radius: 12px 12px 0px 0px;
    padding: 15px 18px 6px 18px;
    color: var(--color-cyan-extra-dark) !important;
    font-weight: 700 !important;
    font-size: 1.4em;
    letter-spacing: 0.1px;
    text-align: left;
    line-height: 1 !important;
}

.panel-header-icon {
    width: 22px !important;
    height: 22px !important;

}

.buy-all-container {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.buy-all-toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0px 9px 0px 6px;
}

/* Pick Tab Styles — ESPN-style solid pill toggle */

.picks-tabs {
    background: var(--color-light-gray) !important;
    border-radius: 18px;
    flex: 1;
}

.pick-tab {
    background: var(--color-light-gray);
    color: #aaa;
    border: none;
    padding: 3px 18px 0px 18px;
    border-radius: 999px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 540;
    letter-spacing: 0px;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-transform: none;
    border-left: none !important;
    flex: 1;
    width: 50%;
}

.pick-tab:hover {
    background: none !important;
    color: var(--color-dark-gray);
    border-left: none !important;
}

.pick-tab.active {
    background: #fff;
    color: var(--color-dark-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-left: none !important;
    font-weight: 600;
}

.pick-tab.active:hover {
    background: #fff !important;
    opacity: 1.0;
}

.buy-all-toggle {
    display: none;
}

/* Toggle Switch Styles */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 21px;
    cursor: pointer;
    margin-top: -5px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    box-shadow: none;
    border-radius: 45%;
    transition: transform 0.2s ease;
}

.toggle-switch:hover {
    transform: scale(1.1);
}

.pick-toggle {
    position: absolute;
    opacity: 0;
    width: 42px;
    height: 21px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    top: 0;
    left: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    transition: 0.3s;
    border-radius: 24px;
    pointer-events: none;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
    pointer-events: none;
}

.pick-toggle:checked + .toggle-slider {
    background-color: var(--base-color-green);
}

.pick-toggle:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch:hover .toggle-slider {
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   PICKS
   ═══════════════════════════════════════════════════════ */

.pick-card {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--color-dark-gray);
    border-left: none;
    font-size: 0.9em;
    border: 1px solid #ccc;
    padding-bottom: 3px;
    margin-bottom: 18px;
    border-radius: 8px 8px 8px 8px;
}

.match-teams-container {
    grid-row: 1 / span 2;
    align-self: stretch;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 0px;
    margin: 3px 0px;
    align-content: start;
    border-right: 1px dotted #ccc;
    padding: 6px 3px;
}

.pick-header {
    color: var(--color-dark-gray);
    margin: -9px;
    margin-bottom: 0px;
    padding: 5px 9px 4px 9px;
    border-radius: 8px 8px 0px 0px;
    line-height: 1;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
    z-index: 1;
    background-size: 100% 100%, 100% 100%;
    background-position: 200% 0, 0 0;
    animation: pick-header-flash 6s ease-in-out infinite;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-light-gray) 2%, white 98%) 0%, color-mix(in srgb, var(--color-light-gray) 100%, white 0%) 100%);
    position: relative;
    overflow: hidden;
}

.pick-header-info {
    display: flex;
    align-items: center;
    gap: 0px;
}

.pick-header img {
    margin-left: 0px !important;
    margin-right: 3px !important;
}

/* "Live" pulse ring — small pulsing dot, radar-ping style.
   .pick-header already has position:relative + overflow:hidden (set
   up earlier for the shimmer sweep), so the ring's outward expansion
   gets softly clipped near the header's edges rather than spilling
   onto the rest of the card — by the time it reaches the edge it's
   already mostly faded out (opacity approaches 0 as scale grows), so
   this reads as intentional rather than a visible cutoff. */

.live-ping {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-left: auto;
    flex-shrink: 0;
    margin-right: 6px;
}

.live-ping::before,
 .live-ping::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-red) 80%, white 20%);
}

.live-ping::before {
    animation: pick-header-ping 1.2s ease-out infinite;
}

@keyframes pick-header-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.0); opacity: 0; }
}

.is-highlight-pick .pick-header {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-light-gray) 2%, white 98%) 0%, color-mix(in srgb, var(--color-light-gray) 100%, white 0%) 100%);
    border-bottom: 1px solid #aaa;
}

.pick-highlight-banner {
    position: relative !important;
    width: calc(100% + 2 * 9px);
    margin-left: -9px;
    margin-right: -9px;
    margin-top: 0px;
    margin-bottom: 6px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    line-height: 0;
}

.pick-highlight-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
}

.pick-highlight-banner .pick-highlight-label {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #fff;
    color: var(--color-dark-gray);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 10px;
    border-radius: 0px;
    z-index: 2;
    display: none;
}

.match-header {
    background: #fff;
    color: var(--color-dark-gray);
    border-radius: 0px;
    margin: 0px;
    padding: 6px 12px 6px 0px;
    grid-row: 1 / span 2;
    align-self: start;
    font-weight: 400;
    line-height: 24px;
    font-size: 1.1em;
    min-height: 36px;
}

.match-row {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 3px 0px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    justify-content: start;
    align-items: center;
}

.league-name,
 .team,
 .start-time,
 .bet-added-time,
 .league-roi,
 .price,
 .bet-details,
 .odds,
 .match-bet-info,
 .bet-bookie,
 .main-description {
    color: var(--color-dark-gray);
}

.bet-header {
    margin: 0px;
    padding: 18px 6px 18px 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
}

.league-name {
    margin: 4px 0px 0px 0px;
    padding: 0px;
    font-size: 1.0em;
    color: var(--color-dark-gray);
}

.league-roi {
    line-height: 1;
    margin-bottom: 1px;
    margin-top: 0px;
    margin-left: 6px;
}

.bet-info {
    line-height: 1;
    margin-bottom: 3px;
}

.match-bet-info {
    color: var(--color-blue);
    font-size: 1.15em;
    display: none;
}

.odds {
    font-size: 1.05em;
    font-weight: 500;
    margin-bottom: 0px;
    width: 100%;
    margin-top: 0px;
}

.start-time {
    margin: 0px;
    margin-top: 8px;
    line-height: 1;
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-blue);
}

.start-date {
    font-size: 0.85em;
    color: #7d7d7d;
    margin-top: 2px;
    font-weight: 500;
    line-height: 1;
    vertical-align: top;
    margin-left: 1px;
}

.bet-added-time .material-symbols-outlined {
    color: var(--color-dark-gray) !important;
}

.bet-bookie {
    margin-top: 3px;
    line-height: 1;
    color: #7d7d7d;
}

.bet-details {
    background: none;
    border-top: 1px dotted #ccc;
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px 0px 0px 0px;
}

.additional-bet-container {
    margin: 6px 6px 0px 6px;
    font-size: 1.05em;
    line-height: 1;
    padding-bottom: 0px !important;
}

.additional-bet-bet {
    color: var(--color-blue);
    line-height: 1;
    margin-right: 12px;
}

.additional-bet-odds-container {
    color: var(--color-dark-gray);
    font-weight: 500;
    line-height: 1;
    width: 100% !important;
    margin-top: 6px;
}

.additional-bet-odds {
    color: var(--color-dark-gray);
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
}

.bet-description {
    padding: 0px 6px;
    font-size: 1.1em;
    line-height: 1.5;
    margin: 0px 0px;
}

.bet-description-wrapper-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.description-toggle {
    background: var(--color-light-gray);
    border: 1px solid #ccc;
    font-size: 0.7em;
    font-weight: bold;
    cursor: pointer;
    display: block;
    text-align: center;
    line-height: 18px;
    padding: 2px 8px;
    vertical-align: middle;
    transition: background-color 0.2s, border-color 0.2s;
    letter-spacing: -0.5px;
    margin-top: 3px;
    margin-bottom: 18px;
}

.description-toggle:hover {
    border: 1px solid #aaa;
}

.main-description {
    margin: 0px 0px 6px 0px;
    color: var(--color-dark-gray);
}

.pick-has-description .material-symbols-outlined {
    margin-bottom: 5px;
}

.pick-guaranteed .material-symbols-outlined {
    margin-bottom: 5px;
}

.pick-has-description,
 .pick-guaranteed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.0em;
    font-weight: 500;
    margin-top: 0px !important;
    color: var(--color-dark-gray);
}

.price-row {
    border-top: 1px dotted #ccc;
    padding: 0px;
    padding-top: 6px;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* ═══════════════════════════════════════════════════════
   FOOTER — ESPN style: white card, left-aligned logo + pipe
   nav + copyright, secondary section below for the rest.
   ═══════════════════════════════════════════════════════ */

.footer {
    background: none;
    padding: 32px 20px 0px 20px;
    width: 100%;
    margin: 0 auto;
    left: 0;
    bottom: 0;
    border-top: 0px solid #ccc;
    position: absolute;
}

.footer-content {
    max-width: var(--content-width);
}

.footer-card {
    max-width: var(--content-width) !important;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 18px !important;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px 12px 0px 0px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* ── Top row: logo + nav ── */

.footer-top-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    align-items: stretch;
    line-height: 1;
}

.footer-top-row .logo {
    position: relative;
    z-index: 1;
    font-size: 0.9em;
    color: var(--highlight-color-1);
    background: var(--color-navy-blue);
    padding: 6px 8px 6px 9px !important;
    white-space: nowrap;
    margin: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    row-gap: 6px;
    column-gap: 12px;
}

.footer-nav-links a {
    font-size: 0.9em;
    font-weight: 540;
    color: #222;
    text-decoration: none;
    position: relative;
    padding-right: 12px;
}

.footer-nav-links a:hover {
    color: var(--color-blue);
    text-decoration: underline;
}

/* Pipe separators between links, without a trailing pipe after the last one */

.footer-nav-links a:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -2px;
    color: #ccc;
    font-weight: 400;
}

/* ── Copyright, directly under the nav row ── */

.footer-copyright {
    font-size: 0.8em;
    color: #767676;
    margin: 6px 0px 0px 0px;
    line-height: 1.5;
}

/* ── Secondary section: everything ESPN's footer doesn't need
   to account for (language switcher, payments, social, etc.) ── */

.footer-secondary {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.footer-secondary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #444;
}

.footer-secondary-row:last-child {
    margin-bottom: 0;
}

.footer-payment-logos img {
    vertical-align: middle;
    margin-right: 10px;
}

.footer-contact {
    color: #444;
    font-size: 0.9em;
    margin: 6px 0px 0px 3px;
}

.delete-account {
    color: #CC0000;
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
}

.footer-crosslink {
    display: inline-block;
}

.footer-crosslink a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    background: #F5F6F8;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 12px;
}

.footer-crosslink img {
    width: 20px;
    vertical-align: middle;
}

.footer-crosslink a:hover {
    border-color: #CC0000;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social-icons img {
    height: 22px;
    vertical-align: middle;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.footer-social-icons a:hover img {
    opacity: 1;
}

.footer-responsible-gambling {
    font-size: 0.8em;
    color: #767676;
    text-align: left;
    margin-top: 12px;
}

.footer-help-line {
    display: inline-block;
    margin-top: 3px;
    line-height: 1.35;
}

.footer-help-line a {
    color: #767676;
    margin-left: 1px;
}

/* ── Language switcher — restyle for light theme (was dark-theme
   styling with inline colors in the original) ── */

.language-selected {
    cursor: pointer;
    font-size: 13px;
    color: #222;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 10px 12px 5px 18px;
    border-radius: 6px;
    min-width: 132px;
}

.language-options {
    display: none;
    position: absolute;
    z-index: 10;
    margin-top: 4px;
    text-align: left;
    border-radius: 6px;
}

.language-options .option-language {
    padding: 8px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-size: 13px;
    color: #222;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.language-options .option-language:hover {
    background-color: #F5F6F8;
}

.custom-select-language:hover .language-options {
    display: block;
}

/* FAQ Section */

.faq-section {
    background: none;
    padding: 0px;
    margin-top: 60px;
    max-width: 100% !important;
}

.faq-section h2 {
    margin-bottom: 0.5rem !important;
    text-align: center;
    color: var(--color-dark-gray) !important;
    letter-spacing: 0px;
    font-weight: 540;
}

.faq-container {
    margin: 0px auto !important;
    max-width: 660px !important;
    font-family: "Anek Devanagari", sans-serif;
    font-weight: 400;
}

.faq-item {
    margin-bottom: 1px;
}

.faq-question {
    width: 100%;
    background-color: #fff;
    border: none;
    color: var(--color-dark-gray) !important;
    font-size: 1.0em;
    padding: 0.75rem 0.5rem 0.25rem 1rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover {
    background-color: #fff;
    color: var(--color-blue) !important;
}

.faq-toggle {
    font-size: 30px !important;
    font-weight: 400;
    transition: transform 0.3s;
}

.faq-answer {
    display: none;
    background: #fff;
    padding: 0.25rem 1rem;
    font-size: 1.0em;
    font-weight: 400;
    color: var(--color-dark-gray) !important;
    margin-top: 1px;
}

.faq-answer.active {
    display: block;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════
   SITE MENU — fully self-contained, isolated from the old
   .menu-* / table-based system. Every rule here is scoped
   under .site-menu-panel and reads from LOCAL custom
   properties (--menu-*), not the site's global --color-*
   tokens — so nothing from the legacy theme can bleed in.
   ═══════════════════════════════════════════════════════ */

.site-menu-panel a:hover {
    text-decoration: none;
}

/* ── Desktop: wide, dynamic height, multi-column links ── */

.site-menu-panel {
    --menu-bg: #fff;
    --menu-bg-muted: #F5F6F8;
    --menu-text: #222;
    --menu-text-muted: #767676;
    --menu-border: #eee;
    --menu-accent: #CC0000;
    --menu-accent-icon: #767676;
    background: var(--menu-bg);
    color: var(--menu-text);
    position: fixed;
    top: calc(var(--header-height) + 1px);
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 999;
    width: 480px;
    max-width: calc(100vw - 40px);
    height: auto;
    max-height: calc(100vh - var(--header-height) - 20px);
    border-radius: 0 0 0px 0px;
    box-shadow: 4px 4px 20px rgba(0,0,0,0.12);
}

/* ── Top bar: logo + close ── */

.site-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid var(--menu-border);
    flex-shrink: 0;
}

.site-menu-close {
    cursor: pointer;
    color: var(--menu-text-muted);
    font-size: 28px;
}

.site-menu-close:hover {
    color: var(--menu-accent);
}

/* Same angled-slash logo construction used in the footer */

.site-menu-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
}

.site-menu-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--menu-accent);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    z-index: 0;
}

.site-menu-logo span {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: #fff;
    white-space: nowrap;
}

/* ── Scrollable content area — the panel itself no longer
   scrolls; only this inner region does, so the top bar stays
   fixed in place regardless of link-list length ── */

.site-menu-scroll {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
}

/* ── Account box ── */

.site-menu-account {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f2f2f2;
    padding: 3px 6px 0px 6px;
    margin-bottom: 18px;
    line-height: 1;
}

.site-menu-account .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-blue);
    margin-bottom: 3px;
}

.site-menu-account-links a {
    color: var(--menu-text);
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
}

.site-menu-account-links a:hover {
    color: var(--color-blue);
}

.site-menu-divider {
    margin: 0 8px;
    color: #ccc;
}

/* ── Category headings ── */

.site-menu-heading {
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
    color: #333;
    margin: 18px 0 6px 0;
    padding-bottom: 3px;
    border-bottom: 1px dotted #ccc;
}

.site-menu-links .site-menu-heading:first-child {
    margin-top: 0;
}

/* ── Links container: flex-column on mobile (default),
   multi-column reflow on desktop (see modifier below) ── */

.site-menu-links {
    display: flex;
    flex-direction: column;
}

.site-menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0px 0px;
    color: var(--color-dark-gray);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 400;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-menu-link:hover {
    background: none;
    color: var(--color-blue);
}

.site-menu-link .material-symbols-outlined {
    color: var(--color-dark-gray);
    flex-shrink: 0;
    font-size: 1.2em;
    margin-bottom: 3px;
}

.site-menu-link:hover .material-symbols-outlined {
    color: var(--color-blue);
}

/* ── Desktop-only: 1–3 column reflow, same technique as
   site-content-links.php's column-width trick ── */

.site-menu-panel .site-menu-links {
    display: block;
    column-width: 200px;
    column-gap: 28px;
}

.site-menu-panel .site-menu-link {
    break-inside: avoid;
}

.site-menu-panel .site-menu-heading {
    column-span: all;
    break-inside: avoid;
}

.xg-breakdown {
    border-top: 1px dotted #ccc;
    padding: 12px 6px 18px 6px;
    color: var(--color-dark-gray);
    font-size: 1.1em;
}

.xg-breakdown-title {
    font-weight: 600;
    color: var(--color-dark-gray);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.xg-breakdown-summary {
    margin-bottom: 10px;
    font-size: 1.0em;
}

.xg-breakdown-summary-label {
    color: var(--color-dark-gray);
}

.xg-breakdown-summary-value {
    color: var(--color-dark-gray);
    font-weight: 600;
}

.xg-breakdown-label {
    font-size: 0.9em;
    line-height: 1;
    font-weight: 600;
    color: var(--color-dark-gray);
    margin-bottom: 3px;
}

.xg-breakdown-table {
    width: 100%;
    max-width: 420px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.9em;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.18);
}

/* Last table in the breakdown (BTTS) shouldn't leave trailing space
   before .xg-breakdown's own bottom padding kicks in */

.xg-breakdown-table--last {
    margin-bottom: 0px;
}

.xg-breakdown-th {
    border: 1px solid #ccc;
    padding: 5px 6px 2px 6px;
    line-height: 1;
    background: var(--color-light-gray);
    font-weight: 500;
    color: var(--color-dark-gray);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.xg-breakdown-td {
    border: 1px solid #ccc;
    font-size: 1.0em;
    padding: 5px 6px 0px 6px;
    line-height: 1.5;
    text-align: center;
    color: var(--color-dark-gray);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sticky-div-top-center {
    position: fixed;
    top: 43px;
    left: 0px;
    width: calc(100% - 0px) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-cyan-mid) 50%, white 50%) 0%, color-mix(in srgb, var(--color-cyan-mid) 20%, white 80%) 100%);
    opacity: 0.97;
    border-top: 1px solid #fff;
    border-bottom: 1px solid var(--color-cyan-dark);
    border-left: none;
    border-right: none;
    border-radius: 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 30000;
    text-align: center;
    padding: 9px 12px 6px 12px;
    color: var(--color-dark-gray);
    font-size: 1.0em;
}

.sticky-div-top-center-2 {
    position: fixed;
    top: 42px;
    left: 0px;
    width: calc(100% - 0px) !important;
    background: linear-gradient(135deg, #00ff87 0%, color-mix(in srgb, #00ff87 60%, white 40%) 100%);
    opacity: 0.97;
    border-top: 1px solid #fff;
    border-bottom: 1px solid var(--color-cyan-dark);
    border-left: none;
    border-right: none;
    border-radius: 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 30000;
    text-align: center;
    padding: 9px 12px 6px 12px;
    color: var(--color-dark-gray);
    font-size: 1.1em;
}

.sticky-div-top-center-2 .button-5 {
    background-color: #0094ff;
}

.sticky-div-top-center-2 .button-5:hover {
    background-color: #00a8ff;
}

.sticky-div-top-center-2 .close-button-2 {
    color: color-mix(in srgb, var(--color-cyan-extra-dark) 90%, white 10%);
    font-size: 1.6em;
}

.sticky-div-top-center-2 .close-button-2:hover {
    color: color-mix(in srgb, var(--color-cyan-extra-dark) 70%, white 30%);
}

.section-header {
    margin: -30px -18px 0px -18px;
    padding: 21px 18px 16px 18px;
    position: relative;
    box-shadow: none;
}

.section-header-tabs {
    background: var(--bg-color-5);
    margin: 12px -18px -12px -18px;
    padding: 4px 30px 1px 30px;
}

.section-header h1 {
    color: color-mix(in srgb, var(--color-dark-gray) 85%, white 15%) !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px;
    margin-top: -3px;
    font-size: 1.4em !important;
}


.section-header-des {
    background: var(--color-light-gray-blue);
    margin: -30px -18px 30px -18px;
    padding: 18px 30px;
    font-weight: 400;
    font-size: 1.0em;
    border-bottom: 1px dotted #ccc;
}

.section-header-tab {
    display: inline-block;
    padding: 0px 4px 0px 4px;
    margin-right: 24px;
    font-size: 1.0em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    user-select: none;
}

.section-header-tab:hover {
    color: #fff;
}

.section-header-tab.active {
    color: #fff;
}

.buy-all-toggle-container {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-green) 0%, white 100%) 0%, color-mix(in srgb, var(--color-green) 20%, white 80%) 90%, color-mix(in srgb, var(--color-green) 0%, white 100%) 100%) !important;
    border-radius: 0px 20px 20px 0px;
    line-height: 1;
    padding: 5px 0px 0px 0px;
    margin-bottom: 3px;
}

.price-row-right:has(.pick-toggle:not(:checked)) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-green) 0%, white 100%) 0%, color-mix(in srgb, var(--color-green) 20%, white 80%) 90%, color-mix(in srgb, var(--color-green) 0%, white 100%) 100%) !important;
    border-radius: 0px 20px 20px 0px;
    line-height: 1;
    padding: 5px 0px 0px 0px;
    margin-bottom: 3px;
}

.desktop {
    display: block !important;
}

.mobile {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE — consolidated from what used to be four separate
   breakpoints (600px, 700px, 768px, 1200px) into one shared
   768px cutoff. Moved to the bottom of the file so all mobile
   overrides live in one place instead of scattered throughout.
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    :root {
        --header-height: 60px;
    }
    body {
        font-size: 20px;
    }
    #overlay .logo {
        font-size: 1.4em;
    }
    .container {
        margin-bottom: 120px !important;
    }
    #logo-div-mobile {
        margin: -22px -18px 0px -18px !important;
        background: var(--bg-color-5);
        border-radius: 0px;
        padding: 6px 12px;
        font-size: 1.0em;
    }
    .header-inner .logo {
        display: none;
    }
    #menu-icon-home span {
        font-size: 33px;
        margin-left: 12px;
        margin-right: 8px;
        margin-top: 2px;
    }
    #menu-telegram {
        margin-top: 4px;
    }
    #menu-telegram img {
        height: 30px;
    }
    #menu-desktop-icon .material-icons {
        line-height: 1;
        vertical-align: middle;
        font-size: 36px !important;
        margin-top: 3px;
        margin-left: 6px;
    }
    .button-login {
        border: 2px solid var(--color-light-blue);
        border-radius: 12px;
        font-family: "Russo One", sans-serif;
        font-size: 0.75em;
        font-weight: 400;
        cursor: pointer;
        display: inline-block;
        background-color: var(--color-navy-blue);
        filter: brightness(0.95);
        padding: 4px 15px 4px 15px;
        text-align: center;
        color: var(--color-light-blue);
        opacity: unset;
        margin-top: unset;
        margin: 5px 12px 0px 0px;
    }
    .user-menu-trigger .material-icons {
        font-size: 35px !important;
        margin-top: 0px !important;
    }
    .user-dropdown {
        min-width: 240px !important;
    }
}

/* Outer triangle — acts as the arrow's outline, matching the dropdown's border */

@media (max-width: 768px) {

    .user-dropdown::before {
        top: -9px;
        right: 18px;
        border-bottom: 9px solid #fff;
    }
}

/* Inner triangle — the fill, matching the color of the top segment it's pointing from */

@media (max-width: 768px) {

    .user-dropdown::after {
        top: -8px;
        right: 19px;
        border-left-width: 7px;
        border-right-width: 7px;
        border-bottom: 8px solid #fff;
    }
    .money-container {
        display: none;
    }
    .site-menu-panel {
        top: calc(var(--header-height) + 0px);
    }
    .site-menu-account {
        padding: 6px 12px;
    }
    .site-menu-links a {
        padding: 6px;
    }
    .site-content-links {
        font-size: 1.0em;
        margin-top: 0px;
        margin-bottom: 36px !important;
    }
    .site-content-links-title span {
        font-size: 1.6em;
    }
    .site-content-links ul {
        column-count: 1;
        column-width: auto;
    }
    .site-content-links li {
        padding: 8px 6px 5px 3px;
    }
    #nr-of-active-new-picks {
        background-color: #0080FF;
        padding: 6px 4px 0px 3px;
        margin-bottom: 7px;
        height: 20px;
        width: 20px;
        vertical-align: middle;
        font-size: 0.8em;
        text-align: center;
        color: #fff;
        font-weight: 500;
        line-height: 1;
    }
    #div-site-notice {
        margin: -17px 0px 18px 0px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        display: none !important;
    }
    #div-site-notice-inner {
        background-color: yellow;
        color: #151515;
        padding: 9px 18px 4px 18px;
        margin: 0px 0px;
        font-size: 1.0em;
        font-weight: 520;
        text-align: center;
        line-height: 1;
    }
    #site-notice-text,
     #site-notice-icon {
        font-size: 0.9em;
    }
    #active-picks-empty-image {
        display: none !important;
    }
    .footer {
        background: none;
        padding: 32px 0px 0px 0px;
        width: 100%;
        left: 0;
        bottom: 0;
        border-top: 0px solid #ccc;
        position: absolute;
    }
    .footer-content {
        max-width: 100% !important;
    }
    .footer-card {
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box;
        padding: 18px 18px !important;
        margin: 0 auto;
        background: #fff;
        border-radius: 12px 12px 0px 0px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    }
    .footer-top-row {
        grid-template-columns: 1fr;
        row-gap: 12px;
        align-items: flex-start;
    }
    .footer-top-row .logo {
        padding: 6px 12px !important;
    }
    .footer-top-row > div:first-child {
        justify-self: start;
    }
    .footer-nav-links {
        margin: 0px 3px 0px 3px;
    }
    .footer-nav-links a {
        font-size: 0.8em;
        font-weight: 500;
    }
    .footer-copyright {
        margin: 12px 3px 0px 3px;
    }
    .footer-responsible-gambling {
        margin-left: 3px;
    }
    .pick-tab {
        background: var(--color-mid-gray);
        color: #aaa;
        border: none;
        padding: 3px 18px 0px 18px;
        border-radius: 999px;
        margin-bottom: 0px;
        cursor: pointer;
        font-size: 0.9em;
        font-weight: 540;
        letter-spacing: 0px;
        transition: background-color 0.15s ease, color 0.15s ease;
        text-transform: none;
        border-left: none !important;
        flex: 1;
        width: 50%;
    }
    .buy-all-container {
        flex-wrap: wrap;
    }
    .buy-all-toggle-container {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 9px 0px 6px;
        width: 100%;
    }
    #active-picks-container,
     #my-picks-container {
        font-size: 1.1em;
        padding: 18px 0px 18px 0px !important;
        background: var(--color-light-gray) !important;
        border-radius: 0px;
        margin: 0px;
    }
    #my-picks-container {
        font-size: 1.0em;
    }
    .picks-tabs {
        margin-left: 0px !important;
        background: var(--color-mid-gray) !important;
        margin: 0px 6px !important;
    }
    .toggle-switch {
        transform: scale(1.2);
    }
    .panel-header {
        border-radius: 0px 0px 0px 0px;
        border-left: none;
        margin-top: 1px;
        text-align: center;
    }
    .panel-header-icon {
        font-size: 30px;
    }
    .pick-card {
        background: #fff !important;
        padding-bottom: 9px;
    }
    .pick-header {
        padding: 6px 6px;
        font-size: 1.0em;
    }
    .pick-header img {
        transform: scale(1.3);
        margin-right: 6px !important;
    }
    .pick-header .sport-icon {
        margin-right: 6px;
    }
    .league-name {
        font-size: 1.1em !important;
        margin-top: 6px;
    }
    .league-roi {
        font-size: 1.0em !important;
        margin-top: 1px;
    }
    .pick-highlight-banner {
        position: relative !important;
        width: calc(100% + 2 * 9px);
        margin-left: -9px;
        margin-right: -9px;
        margin-top: -36px;
        margin-bottom: 6px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        line-height: 0;
    }
    .match-bet-info {
        display: none;
    }
    .odds {
        width: 100%;
    }
    .description-toggle {
        background: var(--color-light-gray);
        border: 1px solid #ccc;
        font-size: 0.7em;
        font-weight: bold;
        cursor: pointer;
        display: block;
        text-align: center;
        line-height: 18px;
        padding: 4px 12px;
        vertical-align: middle;
        transition: background-color 0.2s, border-color 0.2s;
        letter-spacing: -0.5px;
        margin-top: 6px;
        margin-bottom: 12px;
    }
    .price-row {
        flex-direction: column;
        align-items: flex-start;
        font-size: 1.0em;
        padding: 0px 0px 6px 0px;
        border: none;
    }
    .price-row-left,
     .price-row-right {
        background: none;
        line-height: 1;
        margin: 0px;
        font-size: 1.0em;
    }
    .price-row-left {
        background: var(--color-light-gray);
        border-radius: 0px;
        border-top: 1px dotted #ccc;
        margin-top: 0px !important;
    }
    .price-row-right {
        margin-top: 6px;
    }
    .pick-has-description,
     .pick-guaranteed {
        padding: 3px 0px 0px 0px;
    }
    .toggle-switch {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }
    .bet-header {
        font-size: 1.0em;
    }
    .match-row {
        display: grid;
        font-size: 1.0em;
    }
    .match-teams-container {
        grid-row: 1 / span 2;
        align-self: start;
        display: grid;
        border-right: none;
    }
    .team {
        margin: 2px 0px;
        font-size: 1.1em;
    }
    .start-time {
        grid-row: 1 / span 2;
        align-self: start;
        margin-top: 12px;
    }
    .match-header {
        grid-column: 1 / span 3;
        grid-row: 3;
        width: 100%;
        padding: 12px 6px 6px 6px;
        border-top: 1px dotted #ccc;
        font-size: 1.0em;
    }
    .pick-toggle {
        position: absolute;
        width: 50px !important;
        height: 24px !important;
        min-width: 50px;
        min-height: 24px;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    .faq-question,
     .faq-answer {
        font-size: 0.8em !important;
    }
    .faq-question {
        font-weight: 460 !important;
    }
    .faq-section h2 {
        font-size: 1.0em !important;
    }
    .faq-toggle {
        margin-bottom: 3px;
        margin-left: 3px;
    }
    .main-description {
        font-size: 0.9em;
    }
    .container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }
    .site-menu-panel {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: 60px;
    }
    .desktop-layout-wrapper {
        flex-direction: column;
        width: 100% !important;
        padding: 0px !important;
        margin: 0px !important;
    }
    .desktop-layout-wrapper .container-2 {
        background: none !important;
        border-radius: 0px;
        width: 100%;
        order: 1;
        box-shadow: none !important;
    }
    .desktop-layout-wrapper #main-page-right-section {
        min-width: auto;
        width: 100% !important;
        order: 2;
        padding-top: 0px !important;
        font-size: 18px !important;
    }
}

/* last-signal + live-bets: fill the full row width instead of
       staying capped at 300px each once stacked on mobile — that cap
       exists to make them sit side-by-side at desktop widths, but
       left unset here it just leaves empty space next to a single
       narrow widget on phone-width screens instead of using the
       space available. Also overrides flex-basis (via the flex
       shorthand) and min-width from the base rule — those can still
       govern a flex item's sizing ahead of a plain width/max-width
       override, which was likely why width:100% alone wasn't fully
       closing the gap. */

@media (max-width: 768px) {

    .right-section-widget-row {
        gap: 18px;
        margin-top: 0px;
    }
    .right-section-widget-row > div {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* #content's own 18px right padding applies uniformly to
       everything inside it (including both widgets above), regardless
       of each widget's own width fixes — reduced here so it doesn't
       eat a disproportionate chunk of a narrow phone screen. */

@media (max-width: 768px) {

    #content {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: calc(var(--header-height)) !important;
        padding-top: 9px !important;
    }

    #page-main-content {
        font-size: 18px !important;
        padding: 30px 3px !important;
    }

    .sticky-div-top-center {
        font-size: 0.9em !important;
    }
    .sticky-div-top-center-2 {
        top: 60px;
    }
    .sticky-div-top-center-2 .close-button-2 {
        font-size: 1.6em !important;
        top: 6px !important;
    }
    .section-header {
        margin: -30px 0px 0px 0px; 
        padding: 21px 12px 12px 12px;
    }
    .section-header-tabs {
        margin: 12px -18px -12px -18px;
        padding: 4px 18px 1px 18px;
    }
    .section-header-des {
        margin: -30px -12px 30px -12px;
        padding: 18px 18px;
    }
    .price-row-right:has(.pick-toggle:not(:checked)) {
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-green) 0%, white 100%) 40%, color-mix(in srgb, var(--color-green) 20%, white 80%) 90%, color-mix(in srgb, var(--color-green) 0%, white 100%) 100%) !important;
        border-radius: 0px 20px 20px 0px;
        line-height: 1;
        padding: 7px 0px 2px 0px;
        margin-bottom: 3px;
    }
    .buy-all-toggle-container {
        justify-content: flex-end;
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-light-gray) 100%, white 0%) 40%, color-mix(in srgb, var(--color-cyan-light) 30%, white 70%) 90%, color-mix(in srgb, var(--color-light-gray) 100%, white 0%) 100%) !important;
        border-radius: 0px 20px 20px 0px;
        line-height: 1;
        padding: 6px 0px 1px 0px;
        margin-bottom: 3px;
    }
    .xg-breakdown-summary {
        font-size: 0.9em;
    }
    .desktop {
        display: none !important;
    }
    .mobile {
        display: block !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO POPOVER (lt-info-*)
   Round info button that opens a popover (desktop) / bottom sheet (mobile).
   Markup + JS (ltInfoToggle / ltInfoClose) live in the page.
   ═══════════════════════════════════════════════════════════════════════════ */

.lt-info-btn { width: 28px; height: 28px; min-width: 0; border-radius: 50%; border: none !important; box-shadow: none !important; background: transparent; cursor: pointer; padding: 0 !important; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: -3px -2px 0 0 !important; line-height: 1; color: #b3b8c4; }
.lt-info-btn:hover, .lt-info-btn[aria-expanded="true"] { background: transparent; padding: 0 !important; margin: -3px -2px 0 0 !important; color: #7d8494; }
.lt-info-btn .material-symbols-outlined { font-size: 24px; line-height: 1; color: inherit; margin-bottom: 12px; transition: color .15s; }

.lt-info-pop { display: none; position: absolute; right: 18px; top: 62px; width: 440px; max-width: calc(100% - 36px); max-height: 70vh; flex-direction: column; overflow: hidden; box-sizing: border-box; background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; box-shadow: 0 8px 28px rgba(20,25,50,.2); padding: 0; z-index: 2001; font-size: 0.95em; line-height: 1.5; color: var(--color-dark-gray); }
.lt-info-pop.open { display: flex; }
.lt-info-grab { display: none; }
.lt-info-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px 3px 18px; border-bottom: 1px solid #e6e9ef; }
.lt-info-title { font-size: 1.15em; font-weight: 600; color: color-mix(in srgb, var(--color-dark-gray) 95%, white 5%); line-height: 1; margin-top: 8px; }
.lt-info-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
.lt-info-x { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.lt-info-x .material-symbols-outlined { font-size: 22px; line-height: 1; color: var(--color-dark-gray); }
.lt-info-x:hover { background: transparent; }
.lt-info-x:hover .material-symbols-outlined { color: var(--color-dark-gray); }
.lt-info-close-btn { display: none; }
.lt-info-scrim { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2000; background: transparent; }
.lt-info-scrim.open { display: block; }
.lt-info-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; margin-right: 8px; vertical-align: middle; background: color-mix(in srgb, currentColor 14%, white 86%); }
.lt-info-ico .material-symbols-outlined { font-size: 18px; line-height: 1; }
.lt-subtitle { margin: 2px 0 0 0; font-size: 0.95em; line-height: 1.5; color: color-mix(in srgb, var(--color-dark-gray) 85%, white 15%) !important; }

@media only screen and (max-width: 768px) {

    .lt-info-scrim { background: rgba(15,20,38,.45); }
    .lt-info-pop { display: flex; flex-direction: column; overflow: hidden; visibility: hidden; position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 80vh; border: none; border-radius: 20px 20px 0 0; padding: 10px 0 24px; transform: translateY(100%); transition: transform .25s ease, visibility .25s; }
    .lt-info-pop.open { display: flex; visibility: visible; transform: none; }
    .lt-info-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: #d7dbe3; margin: 0 auto 14px; }
    .lt-info-head { padding: 0 12px 10px 20px; }
    .lt-info-pop-body { font-size: 1.0em; padding: 14px 20px 0; }
    .lt-info-pop-body b {
        font-weight: 500 !important;
    }
    .lt-info-close-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 46px; margin-top: 20px; border: none; border-radius: 12px; background: var(--color-blue); color: #fff; font-size: 1em; font-weight: 600; cursor: pointer; }
}