/* Site-wide additions that sit on top of the compiled Tailwind stylesheet. */

body, .font-albert, .font-nunito, button, input, select, textarea {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: "cv11", "ss03";
    -webkit-font-smoothing: antialiased;
}

/* Match form: results with no data show as a grey box. */
.form:not(.w):not(.l):not(.d) {
    background: #A3A3A3 !important;
    color: #fff;
}

/* Footer text links */
.tp-footer-link { color: #fff !important; text-decoration: underline; transition: color .15s ease; }
.tp-footer-link:hover { color: #F40000 !important; }

/* SEO content */
.footer-content { margin-top: 1.5rem; padding: clamp(1.1rem, 3vw, 2.25rem); background: #fff; border-radius: 1rem; box-shadow: 0 1px 8px rgba(0, 0, 0, .1); color: #3B3B3B; font-size: 15.5px; line-height: 1.75; overflow-wrap: anywhere; }
.footer-content > :first-child { margin-top: 0; }
.footer-content h1, .footer-content h2 { margin: 2rem 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid #F3F3F3; color: #151515; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.footer-content h1:first-child, .footer-content h2:first-child { margin-top: 0; }
.footer-content h3 { margin: 1.5rem 0 .5rem; color: #1E1E1E; font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.footer-content h4, .footer-content h5, .footer-content h6 { margin: 1.25rem 0 .4rem; color: #1E1E1E; font-size: 1rem; font-weight: 700; }
.footer-content p { margin: 0 0 1rem; }
.footer-content ul, .footer-content ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.footer-content ul { list-style: disc; }
.footer-content ol { list-style: decimal; }
.footer-content li { margin-bottom: .4rem; padding-left: .15rem; }
.footer-content li::marker { color: #F40000; }
.footer-content a { color: #D40000; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.footer-content a:hover { color: #8F0000; }
.footer-content strong, .footer-content b { color: #1E1E1E; font-weight: 700; }
.footer-content blockquote { margin: 1.25rem 0; padding: .9rem 1.1rem; border-left: 3px solid #F40000; border-radius: 0 .6rem .6rem 0; background: #FAFAFA; }
.footer-content img { max-width: 100%; height: auto; border-radius: .6rem; }
.footer-content table { display: block; width: 100%; margin: 1.1rem 0; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.footer-content th { background: #151515; color: #fff; font-weight: 600; text-align: left; }
.footer-content th, .footer-content td { padding: .6rem .8rem; border: 1px solid #E6E6E6; }
.footer-content tr:nth-child(even) td { background: #FAFAFA; }

/* Blog list */
.tp-blog { background: #fff; border-radius: .75rem; padding: .75rem .875rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }
.tp-blog-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.tp-blog-head h3 { font-size: .95rem; font-weight: 600; color: #1E1E1E; }
.tp-blog-more { font-size: .75rem; font-weight: 600; color: #D40000; white-space: nowrap; }
.tp-blog-item { padding: .55rem 0; border-top: 1px solid #F3F3F3; }
.tp-blog-item:first-of-type { border-top: 0; }
.tp-blog-title { display: block; font-size: .82rem; font-weight: 600; line-height: 1.35; color: #1E1E1E; transition: color .15s ease; }
.tp-blog-item:hover .tp-blog-title { color: #D40000; }

/* Leagues page */
.tp-leagues { background: #fff; border-radius: 1rem; padding: clamp(1rem, 2.5vw, 1.75rem); }
.tp-leagues h2 { font-size: 1.05rem; font-weight: 700; color: #1E1E1E; }
.tp-top-leagues { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1.5rem; }
.tp-top-league { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .85rem; border: 1px solid #EDEDED; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #1E1E1E; }
.tp-top-league:hover { border-color: #F40000; color: #D40000; }
.tp-leagues-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid #EDEDED; }
.tp-leagues-search { width: 100%; max-width: 280px; min-height: 42px; padding: 0 .9rem; border: 1px solid #E5E5E5; border-radius: 999px; font-size: .85rem; color: #1E1E1E; background: #FAFAFA; }
.tp-country { border-bottom: 1px solid #F3F3F3; }
.tp-country summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .4rem .35rem; cursor: pointer; font-size: .9rem; font-weight: 600; color: #1E1E1E; list-style: none; }
.tp-country summary::-webkit-details-marker { display: none; }
.tp-country summary::after { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #8A8A8A; transition: transform .15s ease; }
.tp-country[open] summary::after { transform: rotate(180deg); }
.tp-country-leagues { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; padding: 0 .35rem .75rem; }
.tp-country-leagues a { display: block; padding: .5rem 0; font-size: .85rem; color: #3B3B3B; }
.tp-country-leagues a:hover { color: #D40000; }

/* The compact sidebar tables on league and match pages */
.tp-empty-note { padding: 1rem 0; font-size: .75rem; color: #8A8A8A; text-align: center; }

.tp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Market list icons */
.sidebar a { display: flex; align-items: center; gap: .55rem; white-space: nowrap; }
.tp-market-icon { flex: none; width: 1.05rem; text-align: center; font-size: .85em; opacity: .75; }
.sidebar a.active .tp-market-icon, .sidebar a:hover .tp-market-icon { opacity: 1; }

.tp-flag { flex: none; width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }

/* Slip total */
.tp-total-odds { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-radius: .6rem; background: #DCFCE7; color: #15803D; font-size: 1rem; font-weight: 600; }
.tp-total-odds b { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Blog images */
.tp-blog-item { display: flex; align-items: center; gap: .65rem; }
.tp-blog-thumb { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: .4rem; background: #F3F3F3; }

/* League stats */
.tp-stats { padding: .75rem .875rem; background: #fff; border-radius: .75rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }
.tp-stats-head { display: flex; flex-direction: column; gap: .45rem; }
.tp-stats-head h3 { font-size: .95rem; font-weight: 600; color: #1E1E1E; }
.tp-stats-name { font-size: .8rem; font-weight: 600; color: #5A5A5A; }
.tp-stats-select { width: 100%; min-height: 38px; padding: 0 .6rem; border: 1px solid #E5E5E5; border-radius: .5rem; background: #FAFAFA; font-size: .8rem; font-weight: 600; color: #1E1E1E; }
.tp-stats-tabs { display: flex; gap: 3px; margin: .6rem 0 .4rem; padding: 3px; border-radius: 999px; background: #F3F3F3; }
.tp-stats-tabs button { flex: 1; min-height: 32px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #5A5A5A; cursor: pointer; }
.tp-stats-tabs button[aria-selected="true"] { background: #F40000; color: #fff; }
.tp-stats-scroll { max-height: 420px; overflow-y: auto; }
.tp-stats-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.tp-stats-table th { padding: .3rem .25rem; font-size: .62rem; font-weight: 600; text-transform: uppercase; text-align: center; color: #8A8A8A; }
.tp-stats-table td { padding: .4rem .25rem; border-top: 1px solid #F5F5F5; text-align: center; color: #1E1E1E; }
.tp-stats-table .tp-left { text-align: left; }
.tp-stats-table .tp-muted { color: #737373; }
.tp-stats-team { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tp-stats-team img { flex: none; width: 16px; height: 16px; object-fit: contain; }
.tp-stats-player { display: block; font-weight: 500; }
.tp-stats-club { display: block; font-size: .65rem; color: #737373; }

/* Footer links panel */
.tp-textlinks { position: relative; padding: 1rem 1.25rem 2.75rem; border-radius: .9rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.tp-textlinks-list { max-height: 3.6rem; overflow: hidden; line-height: 1.8; color: #A8A8A8; overflow-wrap: anywhere; }
.tp-textlinks.is-open .tp-textlinks-list { max-height: none; }
.tp-textlinks-list a { color: #D6D6D6; }
.tp-textlinks-toggle { position: absolute; right: .75rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: 0 .75rem; border-radius: 999px; background: #F40000; color: #fff; font-size: .72rem; font-weight: 600; cursor: pointer; }

/* Login and sign-up */
.tp-auth { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; min-height: 100vh; padding: 1.5rem 0; }
.tp-auth > div { width: 100%; max-width: 480px; }

/* Tips and section headers, always smaller than the page's H1 */
.tp-tips-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #1E1E1E; }
@media (min-width: 768px) {
    .tp-tips-title { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
    .tp-tips-title { font-size: 1.25rem; }
}

/* Bottom tab bar on phones and tablets */
.tp-tabs-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255, 255, 255, .1); background: #0B0B0D; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
.tp-tabs-bar a, .tp-tabs-bar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 62px; color: #B9B9B9; font-size: .69rem; font-weight: 600; cursor: pointer; transition: color .15s ease; }
.tp-tabs-bar i { font-size: 1.15rem; line-height: 1; }
.tp-tabs-bar .is-active { color: #fff; }
.tp-tabs-bar .is-active::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; border-radius: 0 0 2px 2px; background: #F40000; }
.tp-tabs-bar .is-active i { color: #FF5A5A; }
.tp-tabs-live { position: relative; display: block; width: 18.4px; height: 18.4px; }
.tp-tabs-live span { position: absolute; inset: 4px; border-radius: 50%; background: #F40000; }
.tp-tabs-badge { position: absolute; top: 7px; left: calc(50% + 8px); min-width: 16px; padding: 0 4px; border-radius: 999px; background: #F40000; color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; }
.tp-tabs-backdrop { position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .55); }
.tp-tabs-sheet { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 59; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .875rem; border-radius: 1.1rem 1.1rem 0 0; border-top: 1px solid rgba(255, 255, 255, .12); background: #141417; }
.tp-tabs-sheet a { display: flex; align-items: center; gap: .65rem; min-height: 52px; padding: 0 .9rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: .75rem; color: #fff; font-size: .875rem; font-weight: 600; }
.tp-tabs-sheet i { width: 1.1rem; color: #FF5A5A; text-align: center; }
@media (min-width: 1024px) {
    .tp-tabs { display: none; }
}

/* Hero bar */
.tp-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: .75rem 0 1.25rem; padding: clamp(1.15rem, 2.6vw, 1.75rem) clamp(1.15rem, 3vw, 2.25rem); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.25rem; background: radial-gradient(55% 150% at 0% 0%, rgba(244, 0, 0, .3), rgba(244, 0, 0, 0) 70%), radial-gradient(40% 120% at 100% 100%, rgba(244, 0, 0, .14), rgba(244, 0, 0, 0) 70%), #0B0B0D; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.tp-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; opacity: .45; pointer-events: none; }
.tp-hero::after { content: ""; position: absolute; top: 0; left: 0; width: min(38%, 280px); height: 2px; background: linear-gradient(90deg, #F40000, rgba(244, 0, 0, 0)); }
.tp-hero-text { position: relative; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.tp-hero-text h1 { letter-spacing: -.025em; line-height: 1.2; }
.tp-hero-text h1 span { color: #FF6B6B; }
.tp-hero-text p { max-width: 62ch; line-height: 1.55; color: #C9C9C9; }
.tp-hero-ad { position: relative; flex: none; }
.tp-hero-ad img { max-width: 100%; }
.tp-hero-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FFC9C9; }
.tp-hero-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #F40000; box-shadow: 0 0 0 3px rgba(244, 0, 0, .22); }
@media (max-width: 767px) {
    .tp-hero { flex-direction: column; align-items: stretch; }
}

/* Left bar: a rounded outline around each item */
.sidebar { gap: .4rem; }
.sidebar a { border: 1px solid #E6E6E6; border-radius: .75rem; }
.sidebar a.active, .sidebar a:hover { border-color: #F40000; }
.tp-bar { min-height: 38px; padding: .4rem .65rem; border: 1px solid #EDEDED; border-radius: .65rem; transition: color .15s ease, border-color .15s ease; }
.tp-bar:hover { border-color: #F40000; }

/* Header Telegram button */
.tp-tg-btn { display: inline-flex; align-items: center; gap: .4rem; background: linear-gradient(90deg, #2AABEE, #2481B2); color: #fff; }
.tp-tg-btn:hover { filter: brightness(1.08); }
@media (max-width: 479px) {
    .tp-tg-join { display: none; }
}
@media (max-width: 359px) {
    .tp-tg-label { display: none; }
}

/* Markets dropdown */
.tp-markets-menu { width: 560px; padding: .5rem; }
.tp-markets-menu > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }

/* Keep the page from moving sideways on phones. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .tp-mainnav ul { gap: 1rem; font-size: .8rem; }
}
@media (max-width: 1023px) {
    html { touch-action: pan-y pinch-zoom; }
    /* Room for the bottom tab bar, so it never covers the end of the page. */
    body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
    /* The market and date strips swipe on their own without moving the page. */
    .date-strip, .overflow-x-auto, .overflow-y-auto { overscroll-behavior-x: contain; scrollbar-width: none; }
    .date-strip::-webkit-scrollbar, .overflow-x-auto::-webkit-scrollbar, .overflow-y-auto::-webkit-scrollbar { display: none; }
}