@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');


: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));
	transition: filter 0.2s ease-in-out;
	border: 0px solid #fff;
	border-radius: 30px;
	padding: 1px;
	background: #25A5E3;
    
}

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

}

.tooltip-telegram img {
	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-color: none;
	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-color: none;
	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;
}

ul {
   	background-color: none !important;  

}

li {
   	background-color: none;

}


#overlay {
    position: fixed;
    inset: 0;              /* shorthand for top/right/bottom/left: 0 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: #0d1024;   /* whatever your overlay background should be */    
    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; /* stops it from blocking clicks during the fade, not just after */
}


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-breaking-ad {
    margin: 0px 30px 21px 30px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}    		
    		
#div-breaking-ad-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 {
    background-color: none;
    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 {
    background-color: none;
    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;                                      /* ← nudge this to sit under your avatar icon */
    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;
    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: var(--color-light-gray-blue);
    background: linear-gradient(135deg, var(--color-light-gray-blue) 0%, #fff 100%);    
    padding: 0px;
    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 {
    text-align: center; 
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-dark-gray) 100%, white 0%)  0%, color-mix(in srgb, var(--color-dark-gray) 70%, white 30%) 100%);
    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%);    
    color: #fff;
    font-size: 0.95em; 
    font-weight: 540; 
    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 {
    font-size: 22px;
}

.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; 
    line-height: 1;
}

/* Pick Tab Styles — ESPN-style solid pill toggle */
.picks-tabs {
    background: var(--color-light-gray) !important;   
    border-radius: 18px;
    /* Take up the available space in .buy-all-container instead of
       shrink-wrapping to its own content — ported over from
       stylesheet_new_.css, which had this same rule (there scoped to
       .buy-all-container.desktop .picks-tabs inside a min-width:769px
       media query) but it never made it into this file during the
       migration. */
    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: none !important;
    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: 12px;
  height: 12px;
  margin-left: auto;   /* pushes it to the far right of the header row */
  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) 50%, white 0%);

}

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

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




.is-highlight-pick .pick-header {
    background: var(--color-mid-gray);
    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 * 8px);   /* ← replace both 12px with your .pick-content's actual left/right padding */
    margin-left: -8px;              /* ← same value, as a negative */
    margin-right: -8px;             /* ← same value, as a negative */
    margin-top: 0px;
    margin-bottom: 6px;
    border-radius: 0px 0px 8px 8px;             /* remove this line if you want it truly flush/square at the edges */
    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: #fff;
    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;
}

.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;     /* was: nothing → default inline, baseline-aligned */
    align-items: center;      /* vertically centers icon + text against each other */
    gap: 4px;                 /* replaces manual spacing, cleaner than margins */
    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;   /* was: 20px 24px — 30px sides now matches .desktop-layout-wrapper's horizontal padding exactly */
    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;
    color: #f2f2f2;
    font-size: 1.0em;
	font-weight: 400;
    color: var(--color-dark-gray) !important;
    margin-top: 1px;
}

.faq-answer p {

}

.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 {
    --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;
}

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

/* ── Desktop: wide, dynamic height, multi-column links ── */
.site-menu-panel {
    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; /* multi-column and flex are mutually exclusive */
    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: 0.9em;
}

.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, #00ff87 0%, color-mix(in srgb, #00ff87 70%, white 30%) 100%);

    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(90deg, color-mix(in srgb, var(--color-blue) 100%, white 0%) 0%, color-mix(in srgb, var(--color-blue) 70%, white 30%) 100%);
    background: linear-gradient(135deg, var(--color-cyan-mid) 0%, color-mix(in srgb, var(--color-cyan-light) 50%, white 50%) 100%); 
    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;
    box-shadow: 0 3px 0 #0080ff, 0 1px 3px rgba(0, 0, 0, 0.1);       

}
.sticky-div-top-center-2 .button-5:hover {
	background-color: #00a8ff;
    box-shadow: 0 3px 0 #0094ff, 0 1px 3px rgba(0, 0, 0, 0.1);  
}


.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 {
    background: linear-gradient(135deg, var(--color-cyan-mid) 0%, color-mix(in srgb, var(--color-cyan-light) 50%, white 50%) 100%);
    margin: -30px -18px 30px -18px;
    padding: 21px 30px 12px 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.section-header-tabs {
    background: linear-gradient(135deg, var(--color-cyan-dark) 0%, var(--color-cyan-dark) 100%);
    margin: 12px -30px -12px -30px;
    padding: 4px 30px 1px 30px;    
}

.section-header h1 {
    color: var(--color-cyan-extra-dark) !important;
    font-weight: 700 !important;
    font-size: 1.8em;
    letter-spacing: 0.1px;

}

.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-cyan-light) 0%, white 100%) 0%, color-mix(in srgb, var(--color-cyan-light) 30%, white 70%) 90%, color-mix(in srgb, var(--color-cyan-light) 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-cyan-light) 0%, white 100%) 0%, color-mix(in srgb, var(--color-cyan-light) 30%, white 70%) 90%, color-mix(in srgb, var(--color-cyan-light) 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-4);
        border-radius: 0px;
        padding: 6px 12px;
        font-size: 1.0em;
        margin: 0px;
    }
    
    .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 */
    .user-dropdown::before {
        top: -9px;
        right: 18px;                                      /* ← nudge this to sit under your avatar icon */
        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: 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-breaking-ad {
        margin: -17px 0px 18px 0px; 
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }    		
        		
    #div-breaking-ad-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;
    }    
    
    #breaking-ad-text, #breaking-ad-icon {
        font-size: 0.9em;
    }

    .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;   /* was: 20px 24px — 30px sides now matches .desktop-layout-wrapper's horizontal padding exactly */
        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 {
        /* Base .footer-top-row is display:grid (grid-template-columns:
           auto 1fr), not flex — flex-direction here was a no-op left
           over from an earlier version of the rule, which is why the
           two-column grid was still forcing the nav links into a
           squeezed sliver next to the logo at mobile widths instead
           of actually stacking. Switch to a single grid column so
           logo and nav links each take the full row width, stacked. */
        grid-template-columns: 1fr;
        row-gap: 12px;
        align-items: flex-start;
    }
    
    .footer-top-row .logo {
        padding: 6px 12px !important;    
        width: something;
    }
    
    .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; 
        justify-content: flex-end;
        gap: 12px; 
        margin: 12px 9px 0px 6px; 
        line-height: 1;
        width: 100%;        /* forces it to take the full row width */
    }

    #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);   /* ← replace both 12px with your .pick-content's actual left/right padding */
        margin-left: -9px;              /* ← same value, as a negative */
        margin-right: -9px;             /* ← same value, as a negative */
        margin-top: -36px;
        margin-bottom: 6px;
        border-radius: 8px;             /* remove this line if you want it truly flush/square at the edges */
        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;                          /* fallback if JS hasn't run yet */
        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. */
    
    .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. */
    #content {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: calc(var(--header-height)) !important; 
        padding-top: 9px !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 {
        padding: 21px 24px 12px 24px;
    }
    
    .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-cyan-light) 0%, white 100%) 40%, color-mix(in srgb, var(--color-cyan-light) 30%, white 70%) 90%, color-mix(in srgb, var(--color-cyan-light) 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 {
        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;
    }    
    
	.desktop {
		display: none !important;
	}
	
	.mobile {
		display: block !important;
	}    
    
}