.elementor-1154 .elementor-element.elementor-element-9dde61e{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-3222633 *//*
==========================================================
KiosBeting — FIFA Landing Page Stylesheet
File: fifa-styles.css
HOW TO USE
----------
Add these two lines inside your WordPress :
All classes use the .kb- prefix to avoid clashing
with your existing WordPress / theme styles.
TABLE OF CONTENTS
-----------------
1. CSS Variables (colours, fonts, shadows)
2. Base Reset
3. Hero Banner
4. Odds Ticker
5. Page Layout (main + sidebar grid)
6. Section Headers
7. Tournament Cards
8. Promo / CTA Box
9. Betting Tip Cards
10. Predictions Table
11. News Grid
12. FAQ Accordion
13. Sidebar Widgets
14. Scroll Reveal Animation
15. Keyframes
16. Responsive — Tablet (max-width: 860px)
17. Responsive — Mobile (max-width: 600px)
==========================================================*/
/* ─────────────────────────────────────────────────────────
1. CSS VARIABLES
Change colours here to restyle the whole page.
───────────────────────────────────────────────────────── */
.kb-fifa {
/* Brand colours */
--navy: #1a2340; /* primary dark — headers, buttons */
--navy-light: #243059; /* lighter navy — gradients */
--gold: #f5a623; /* accent — CTAs, odds, highlights */
--gold-hover: #e09510; /* gold darker hover state */
--green: #28a745; /* success / pick badges */
--green-bg: #eaf7ec; /* light green badge background */
--red: #dc3545; /* live / alert badges */
/* Neutral colours */
--white: #ffffff;
--bg: #f4f6f9; /* page background */
--bg2: #eef1f6; /* subtle card surface */
--border: #dde2ec; /* card & table borders */
--text: #1a2340; /* main body text */
--muted: #6b7a99; /* secondary / caption text */
/* Shadows */
--shadow: 0 2px 12px rgba(26, 35, 64, 0.08);
--shadow-hover: 0 6px 24px rgba(26, 35, 64, 0.15);
/* Fonts */
--font: 'Nunito Sans', sans-serif; /* body text */
--font-d: 'Barlow Condensed', sans-serif; /* headings / display */
/* Base */
font-family: var(--font);
font-size: 15px;
line-height: 1.65;
color: var(--text);
background: var(--bg);
}
/* ─────────────────────────────────────────────────────────
2. BASE RESET
───────────────────────────────────────────────────────── */
.kb-fifa *,
.kb-fifa *::before,
.kb-fifa *::after {
box-sizing: border-box;
}
.kb-fifa a {
color: inherit;
text-decoration: none;
}
/* ─────────────────────────────────────────────────────────
3. HERO BANNER
───────────────────────────────────────────────────────── */
.kb-hero {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 55%, #1e3a5f 100%);
padding: 52px 40px;
position: relative;
overflow: hidden;
border-radius: 12px;
margin-bottom: 24px;
}
/* Decorative football emoji background */
.kb-hero::after {
content: '⚽';
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
font-size: 140px;
opacity: 0.07;
pointer-events: none;
}
.kb-hero-inner {
max-width: 680px;
position: relative;
z-index: 1;
}
.kb-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(245, 166, 35, 0.15);
border: 1px solid rgba(245, 166, 35, 0.4);
color: var(--gold);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.kb-live-dot {
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
animation: kb-blink 1.4s infinite;
display: inline-block;
}
.kb-hero h1 {
font-family: var(--font-d);
font-size: clamp(34px, 5vw, 54px);
font-weight: 800;
color: #fff;
line-height: 1.05;
letter-spacing: 0.5px;
margin-bottom: 14px;
}
.kb-hero h1 .kb-gold { color: var(--gold); }
.kb-hero p {
font-size: 15px;
color: rgba(255, 255, 255, 0.72);
max-width: 540px;
margin-bottom: 28px;
line-height: 1.7;
}
.kb-hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.kb-btn-gold {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--gold);
color: var(--navy);
font-size: 14px;
font-weight: 800;
padding: 12px 26px;
border-radius: 6px;
transition: all 0.2s;
}
.kb-btn-gold:hover {
background: var(--gold-hover);
transform: translateY(-1px);
}
.kb-btn-outline {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 12px 24px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
transition: all 0.2s;
}
.kb-btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.6);
}
/* ─────────────────────────────────────────────────────────
4. ODDS TICKER
───────────────────────────────────────────────────────── */
.kb-ticker {
background: var(--navy-light);
padding: 10px 0;
overflow: hidden;
border-bottom: 3px solid var(--gold);
margin-bottom: 32px;
}
.kb-ticker-track {
display: flex;
animation: kb-ticker 30s linear infinite;
white-space: nowrap;
width: max-content;
}
.kb-ticker-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 32px;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.kb-ticker-item .m { color: #fff; }
.kb-ticker-item .o { color: var(--gold); font-weight: 700; }
/* ─────────────────────────────────────────────────────────
5. PAGE LAYOUT
Two-column: main content left, sidebar right (300px)
───────────────────────────────────────────────────────── */
.kb-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 28px;
align-items: start;
}
/* ─────────────────────────────────────────────────────────
6. SECTION HEADERS
───────────────────────────────────────────────────────── */
.kb-section {
margin-bottom: 36px;
}
.kb-sec-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 2px solid var(--navy);
}
.kb-sec-head h2 {
font-family: var(--font-d);
font-size: 22px;
font-weight: 800;
color: var(--navy);
}
.kb-sec-icon {
width: 32px;
height: 32px;
background: var(--navy);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
/* ─────────────────────────────────────────────────────────
7. TOURNAMENT CARDS
───────────────────────────────────────────────────────── */
.kb-tourn-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 8px;
}
.kb-tourn-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 24px;
box-shadow: var(--shadow);
transition: all 0.25s;
position: relative;
overflow: hidden;
}
/* Coloured top stripe */
.kb-tourn-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--navy);
}
.kb-tourn-card.kb-featured::before { background: var(--gold); }
.kb-tourn-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
border-color: var(--navy);
}
.kb-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 12px;
}
.kb-tag-live { background: rgba(220, 53, 69, 0.1); color: var(--red); }
.kb-tag-soon { background: rgba(26, 35, 64, 0.08); color: var(--navy); }
.kb-tourn-card h3 {
font-family: var(--font-d);
font-size: 20px;
font-weight: 700;
color: var(--navy);
margin-bottom: 8px;
line-height: 1.2;
}
.kb-tourn-card p {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 16px;
}
.kb-tourn-stats {
display: flex;
gap: 16px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.kb-stat { font-size: 11px; color: var(--muted); }
.kb-stat strong {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--navy);
margin-bottom: 2px;
}
.kb-tourn-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: var(--gold);
margin-top: 14px;
}
.kb-tourn-link:hover { color: var(--gold-hover); }
/* ─────────────────────────────────────────────────────────
8. PROMO / CTA BOX
───────────────────────────────────────────────────────── */
.kb-promo {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
border-radius: 10px;
padding: 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.kb-promo h2 {
font-family: var(--font-d);
font-size: 26px;
font-weight: 800;
color: #fff;
margin-bottom: 6px;
}
.kb-promo p {
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
max-width: 380px;
}
.kb-promo-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--gold);
color: var(--navy);
font-size: 14px;
font-weight: 800;
padding: 12px 24px;
border-radius: 7px;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s;
}
.kb-promo-btn:hover {
background: var(--gold-hover);
transform: translateY(-1px);
}
/* ─────────────────────────────────────────────────────────
9. BETTING TIP CARDS
───────────────────────────────────────────────────────── */
.kb-tip {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px 22px;
margin-bottom: 12px;
box-shadow: var(--shadow);
transition: all 0.2s;
}
.kb-tip:hover {
box-shadow: var(--shadow-hover);
border-color: #c5cfe0;
}
.kb-tip-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.kb-tip-match {
font-family: var(--font-d);
font-size: 19px;
font-weight: 700;
color: var(--navy);
margin-bottom: 4px;
}
.kb-tip-meta {
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
.kb-tip-odds {
background: var(--navy);
color: var(--gold);
font-family: var(--font-d);
font-size: 22px;
font-weight: 700;
padding: 8px 16px;
border-radius: 8px;
text-align: center;
flex-shrink: 0;
line-height: 1;
}
.kb-tip-odds small {
display: block;
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
font-family: var(--font);
font-weight: 600;
margin-top: 2px;
letter-spacing: 0.5px;
}
.kb-tip-body {
font-size: 13px;
color: #4a5570;
line-height: 1.7;
margin-bottom: 14px;
}
.kb-tip-foot {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.kb-pill {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
background: var(--bg2);
color: var(--navy);
}
.kb-conf {
font-size: 11px;
color: var(--gold);
font-weight: 700;
margin-left: auto;
}
.kb-checklist {
list-style: none;
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px 22px;
margin-top: 20px;
box-shadow: var(--shadow);
}
.kb-checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.kb-checklist li:last-child { border-bottom: none; }
.kb-checklist li::before {
content: '✅';
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
/* ─────────────────────────────────────────────────────────
10. PREDICTIONS TABLE
───────────────────────────────────────────────────────── */
.kb-pred-wrap {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow);
overflow: hidden;
}
.kb-pred {
width: 100%;
border-collapse: collapse;
}
.kb-pred thead { background: var(--navy); }
.kb-pred thead th {
padding: 13px 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
text-align: left;
}
.kb-pred tbody tr {
border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
.kb-pred tbody tr:last-child { border-bottom: none; }
.kb-pred tbody tr:hover { background: var(--bg2); }
.kb-pred td {
padding: 15px 16px;
font-size: 13px;
vertical-align: middle;
}
.kb-pred-name {
font-weight: 700;
color: var(--navy);
font-size: 14px;
}
.kb-pred-sub {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.kb-pick {
display: inline-block;
background: var(--green-bg);
color: var(--green);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
white-space: nowrap;
}
.kb-score {
font-family: var(--font-d);
font-size: 18px;
font-weight: 700;
color: var(--navy);
}
.kb-conf-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.kb-conf-bar {
flex: 1;
height: 5px;
background: var(--bg2);
border-radius: 3px;
overflow: hidden;
min-width: 60px;
}
.kb-conf-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, var(--navy), var(--gold));
}
.kb-conf-pct {
font-size: 11px;
font-weight: 700;
color: var(--muted);
white-space: nowrap;
}
.kb-bet-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: var(--white);
background: var(--gold);
padding: 6px 14px;
border-radius: 5px;
transition: background 0.2s;
white-space: nowrap;
}
.kb-bet-btn:hover { background: var(--gold-hover); }
/* ─────────────────────────────────────────────────────────
11. NEWS GRID
───────────────────────────────────────────────────────── */
.kb-news-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.kb-news {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px;
box-shadow: var(--shadow);
transition: all 0.2s;
display: flex;
flex-direction: column;
gap: 10px;
}
.kb-news:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-1px);
border-color: #c5cfe0;
}
/* Featured card spans full width */
.kb-news.kb-news-featured {
grid-column: 1 / -1;
flex-direction: row;
gap: 20px;
}
.kb-news.kb-news-featured .kb-news-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.kb-news-img {
width: 200px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--navy), var(--navy-light));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
min-height: 140px;
}
.kb-news-cat {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--gold);
}
.kb-news h3 {
font-family: var(--font-d);
font-size: 17px;
font-weight: 700;
color: var(--navy);
line-height: 1.25;
}
.kb-news.kb-news-featured h3 { font-size: 22px; }
.kb-news p {
font-size: 13px;
color: var(--muted);
line-height: 1.65;
flex: 1;
}
.kb-news-meta {
font-size: 11px;
color: var(--muted);
padding-top: 10px;
border-top: 1px solid var(--border);
margin-top: auto;
}
.kb-read-more {
font-size: 12px;
font-weight: 700;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 4px;
}
.kb-read-more:hover { color: var(--gold-hover); }
/* ─────────────────────────────────────────────────────────
12. FAQ ACCORDION
───────────────────────────────────────────────────────── */
.kb-faq {
background: var(--white);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 8px;
overflow: hidden;
}
.kb-faq-q {
width: 100%;
background: none;
border: none;
cursor: pointer;
padding: 16px 20px;
text-align: left;
font-family: var(--font);
font-size: 14px;
font-weight: 700;
color: var(--navy);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.kb-faq-q:hover { background: var(--bg2); }
.kb-faq-icon {
font-size: 18px;
color: var(--gold);
transition: transform 0.25s;
flex-shrink: 0;
}
.kb-faq-q.open .kb-faq-icon { transform: rotate(45deg); }
.kb-faq-a {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.2s;
font-size: 13px;
color: var(--muted);
line-height: 1.7;
}
.kb-faq-a.open {
max-height: 200px;
padding: 0 20px 16px;
}
/* ─────────────────────────────────────────────────────────
13. SIDEBAR WIDGETS
───────────────────────────────────────────────────────── */
.kb-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.kb-widget {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.kb-widget-head {
background: var(--navy);
padding: 12px 18px;
font-family: var(--font-d);
font-size: 15px;
font-weight: 700;
color: #fff;
letter-spacing: 0.3px;
}
.kb-widget-body { padding: 16px 18px; }
/* Casino rows */
.kb-casino-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.kb-casino-row:last-of-type { border-bottom: none; }
.kb-casino-logo {
width: 44px;
height: 44px;
background: var(--navy);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-d);
font-size: 11px;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.5px;
flex-shrink: 0;
text-align: center;
line-height: 1.2;
}
.kb-casino-info { flex: 1; min-width: 0; }
.kb-casino-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.kb-casino-bonus { font-size: 11px; color: var(--green); font-weight: 600; }
.kb-casino-btn {
display: block;
padding: 6px 12px;
background: var(--gold);
color: var(--navy);
font-size: 11px;
font-weight: 800;
border-radius: 5px;
text-align: center;
white-space: nowrap;
transition: background 0.2s;
flex-shrink: 0;
}
.kb-casino-btn:hover { background: var(--gold-hover); }
/* Odds rows */
.kb-odds-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.kb-odds-row:last-child { border-bottom: none; }
.kb-odds-team { font-weight: 600; color: var(--navy); }
.kb-odds-val {
background: var(--navy);
color: var(--gold);
font-family: var(--font-d);
font-size: 15px;
font-weight: 700;
padding: 3px 10px;
border-radius: 5px;
}
.kb-widget-cta {
display: block;
width: 100%;
margin-top: 14px;
padding: 12px;
background: var(--gold);
color: var(--navy);
font-size: 13px;
font-weight: 800;
text-align: center;
border-radius: 7px;
transition: background 0.2s;
}
.kb-widget-cta:hover { background: var(--gold-hover); }
/* Responsible gaming box */
.kb-rg {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
text-align: center;
}
.kb-rg-badges {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.kb-rg-badge {
background: var(--white);
border: 1px solid var(--border);
border-radius: 5px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
color: var(--navy);
}
/* ─────────────────────────────────────────────────────────
14. SCROLL REVEAL ANIMATION
Elements fade up into view as the user scrolls.
JS in fifa-body.html adds .kb-visible on scroll.
───────────────────────────────────────────────────────── */
.kb-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.kb-reveal.kb-visible {
opacity: 1;
transform: translateY(0);
}
.kb-d1 { transition-delay: 0.1s; }
.kb-d2 { transition-delay: 0.2s; }
.kb-d3 { transition-delay: 0.3s; }
/* ─────────────────────────────────────────────────────────
15. KEYFRAMES
───────────────────────────────────────────────────────── */
@keyframes kb-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes kb-ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════════════════════
16. RESPONSIVE — TABLET (max-width: 860px)
Sidebar stacks below main content.
Sidebar itself becomes a 2-column grid.
═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* Layout: sidebar below main */
.kb-layout {
grid-template-columns: 1fr;
gap: 20px;
}
/* Sidebar: 2-col grid side by side */
.kb-sidebar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Hero */
.kb-hero { padding: 36px 20px; border-radius: 8px; }
.kb-hero::after { font-size: 90px; right: 12px; opacity: 0.05; }
.kb-hero h1 { font-size: 38px; }
.kb-hero p { font-size: 14px; margin-bottom: 22px; }
/* Promo box: stack vertically */
.kb-promo {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 22px;
}
.kb-promo-btn { width: 100%; justify-content: center; }
/* Predictions table: hide Score & Confidence on tablet */
.kb-pred th:nth-child(3),
.kb-pred th:nth-child(4),
.kb-pred td:nth-child(3),
.kb-pred td:nth-child(4) { display: none; }
/* News featured: stack image above text */
.kb-news.kb-news-featured {
flex-direction: column;
}
.kb-news-img {
width: 100%;
min-height: 90px;
font-size: 40px;
}
}
/* ═══════════════════════════════════════════════════════════
17. RESPONSIVE — MOBILE PHONE (max-width: 600px)
Full single-column layout.
Predictions table converts to stacked cards.
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* Base font */
.kb-fifa { font-size: 14px; }
/* Hero */
.kb-hero {
padding: 28px 16px;
margin-bottom: 0;
border-radius: 0;
}
.kb-hero::after { display: none; }
.kb-hero h1 { font-size: 32px; line-height: 1.1; margin-bottom: 10px; }
.kb-hero p { font-size: 13px; margin-bottom: 20px; }
.kb-badge { font-size: 10px; padding: 4px 10px; }
.kb-hero-btns { flex-direction: column; gap: 10px; }
.kb-btn-gold,
.kb-btn-outline { width: 100%; justify-content: center; padding: 13px 20px; font-size: 14px; }
/* Ticker: speed up slightly on small screens */
.kb-ticker-track { animation-duration: 20s; }
.kb-ticker-item { padding: 0 20px; font-size: 11px; }
/* Section headers */
.kb-sec-head h2 { font-size: 18px; }
.kb-sec-icon { width: 28px; height: 28px; font-size: 14px; }
/* Tournament cards: single column */
.kb-tourn-grid { grid-template-columns: 1fr; }
.kb-tourn-card { padding: 18px; }
.kb-tourn-card h3 { font-size: 18px; }
.kb-tourn-stats { gap: 12px; flex-wrap: wrap; }
/* Promo box */
.kb-promo { padding: 18px 16px; border-radius: 8px; }
.kb-promo h2 { font-size: 20px; }
.kb-promo p { font-size: 12px; }
/* Tip cards */
.kb-tip { padding: 16px; }
.kb-tip-top { flex-direction: row; align-items: center; gap: 10px; }
.kb-tip-match { font-size: 16px; }
.kb-tip-odds { font-size: 18px; padding: 6px 12px; min-width: 58px; }
.kb-tip-foot { gap: 6px; }
.kb-pill { font-size: 10px; padding: 3px 8px; }
.kb-conf { font-size: 10px; width: 100%; margin-left: 0; margin-top: 4px; }
/* Checklist */
.kb-checklist { padding: 14px 16px; }
.kb-checklist li { font-size: 13px; }
/* Predictions table → stacked cards (each row becomes a card) */
.kb-pred-wrap {
overflow: visible;
border: none;
box-shadow: none;
background: transparent;
border-radius: 0;
}
.kb-pred thead { display: none; }
/* Make each table row a block card */
.kb-pred,
.kb-pred tbody,
.kb-pred tr,
.kb-pred td { display: block; width: 100%; }
.kb-pred tr {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 10px;
box-shadow: var(--shadow);
}
.kb-pred td {
padding: 4px 0;
border: none;
font-size: 13px;
}
/* Show hidden columns as blocks on mobile */
.kb-pred td:nth-child(3),
.kb-pred td:nth-child(4) { display: block; }
/* Prepend data-label as a small heading above each cell value */
.kb-pred td::before {
content: attr(data-label);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 2px;
}
.kb-pred td:last-child { margin-top: 8px; }
.kb-bet-btn { width: 100%; justify-content: center; padding: 10px; font-size: 13px; }
.kb-score { font-size: 16px; }
/* News: single column */
.kb-news-grid { grid-template-columns: 1fr; }
.kb-news.kb-news-featured { grid-column: auto; flex-direction: column; }
.kb-news-img { width: 100%; min-height: 80px; font-size: 36px; }
.kb-news h3 { font-size: 15px; }
.kb-news.kb-news-featured h3 { font-size: 17px; }
/* FAQ */
.kb-faq-q { font-size: 13px; padding: 14px 16px; }
/* Sidebar: single column */
.kb-sidebar { grid-template-columns: 1fr; gap: 12px; }
.kb-widget-head { font-size: 14px; padding: 10px 16px; }
.kb-widget-body { padding: 12px 16px; }
.kb-casino-logo { width: 38px; height: 38px; font-size: 10px; }
.kb-widget-cta { font-size: 13px; padding: 11px; }
.kb-rg { font-size: 11px; padding: 14px 16px; }
}/* End custom CSS */