/* ==========================================================================
   KeshoWins — Design System v2
   Single source of truth for the redesigned front end.
   Loaded LAST so it wins over bootstrap.min.css / mainkwsv2.css.
   ========================================================================== */

:root {
    /* ── Brand — yellow on black. No third hue anywhere in the system. ──
       State (won / lost / pending) is carried by fill weight, not by colour:
         solid yellow  = positive / done
         hollow yellow = in progress
         grey          = negative / inactive                                  */
    --kw-gold:        #ffcb12;
    --kw-gold-600:    #e6b500;
    --kw-gold-300:    #ffe07a;
    --kw-gold-soft:   rgba(255, 203, 18, .12);
    --kw-gold-line:   rgba(255, 203, 18, .22);

    /* ── Surfaces — pure neutrals, no colour cast ── */
    --kw-bg:          #0d0d0d;
    --kw-surface:     #161616;
    --kw-surface-2:   #1f1f1f;
    --kw-surface-3:   #292929;
    --kw-line:        rgba(255, 255, 255, .09);
    --kw-line-strong: rgba(255, 255, 255, .18);

    /* ── Text ── */
    --kw-text:        #f2f2f2;
    --kw-text-dim:    #a3a3a3;
    --kw-text-faint:  #6e6e6e;
    --kw-on-gold:     #0d0d0d;

    /* ── Shape ── */
    --kw-r-sm:  8px;
    --kw-r:     14px;
    --kw-r-lg:  20px;
    --kw-r-pill: 999px;

    /* ── Elevation ── */
    --kw-shadow:    0 6px 20px rgba(0, 0, 0, .38);
    --kw-shadow-lg: 0 14px 40px rgba(0, 0, 0, .5);

    /* ── Rhythm ── */
    --kw-gap: 12px;
    --kw-pad: 16px;

    /* ── Chrome heights (used for sticky offsets) ── */
    --kw-header-h: 62px;
    --kw-bottomnav-h: 60px;

    --kw-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--kw-bg);
    color: var(--kw-text);
    font-family: var(--body-font, "Jost", system-ui, sans-serif);
    overflow-x: hidden;
}

/* Never let a wide child blow out the viewport on mobile. */
img, svg, video, table { max-width: 100%; }

a { text-decoration: none; }

/* Space for the mobile bottom nav so content is never hidden under it. */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(var(--kw-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.kw-shell {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--kw-pad);
}

.kw-stack   { display: flex; flex-direction: column; gap: var(--kw-gap); }
.kw-row     { display: flex; align-items: center; gap: var(--kw-gap); }
.kw-row-wrap{ display: flex; align-items: center; gap: var(--kw-gap); flex-wrap: wrap; }
.kw-spacer  { margin-left: auto; }

/* Responsive auto grid — the workhorse for tips, slips, news. */
.kw-grid {
    display: grid;
    gap: var(--kw-gap);
    grid-template-columns: 1fr;
}
@media (min-width: 576px) { .kw-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 576px) { .kw-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .kw-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Content column with an optional sidebar that stacks on mobile. */
.kw-layout { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 992px) {
    /* Sidebar leads (filters, which you want reachable first). */
    .kw-layout.has-aside { grid-template-columns: 260px minmax(0, 1fr); }
    /* Sidebar trails (related posts — the article comes first in source AND on
       screen, so mobile reads the article before the extras). */
    .kw-layout.aside-right { grid-template-columns: minmax(0, 1fr) 300px; }
    .kw-layout > .kw-aside { position: sticky; top: calc(var(--kw-header-h) + 14px); align-self: start; }
}

.kw-section { padding-block: 28px; }

/* ==========================================================================
   3. Typography
   ========================================================================== */

.kw-h1 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); font-weight: 800; line-height: 1.18; color: #fff; margin: 0; }
.kw-h2 { font-size: clamp(1.2rem, 3.2vw, 1.6rem);  font-weight: 700; line-height: 1.25; color: #fff; margin: 0; }
.kw-h3 { font-size: clamp(1rem, 2.4vw, 1.15rem);   font-weight: 700; line-height: 1.3;  color: #fff; margin: 0; }

/* mainkwsv2.css sizes `h1 > a` … `h6 > a` independently of the heading (h3 > a
   is 43px), so a link inside one of our headings would ignore the heading's
   size. Links always inherit from their heading here. */
.kw-h1 > a, .kw-h2 > a, .kw-h3 > a,
.kw-news-title > a, .kw-section-title > a {
    font-size: inherit;
    line-height: inherit;
    margin-top: 0;
}
.kw-muted { color: var(--kw-text-dim); }
.kw-faint { color: var(--kw-text-faint); }
.kw-tiny  { font-size: .72rem; }
.kw-sm    { font-size: .82rem; }

.kw-clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.kw-clamp-3 { -webkit-line-clamp: 3; }

/* Section heading with the gold tick — used across every page. */
.kw-section-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 700; color: #fff;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kw-gold-line);
}
.kw-section-title::before {
    content: ''; flex: 0 0 auto;
    width: 4px; height: 18px; border-radius: 2px;
    background: var(--kw-gold);
}
.kw-section-title .kw-spacer { font-size: .78rem; font-weight: 400; color: var(--kw-text-dim); }

/* ==========================================================================
   4. Surfaces & badges
   ========================================================================== */

.kw-card {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    overflow: hidden;
}
.kw-card-pad { padding: var(--kw-pad); }
.kw-card-hover { transition: transform .2s var(--kw-ease), border-color .2s var(--kw-ease), box-shadow .2s var(--kw-ease); }
.kw-card-hover:hover { transform: translateY(-3px); border-color: var(--kw-gold-line); box-shadow: var(--kw-shadow); }

.kw-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--kw-r-pill);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1.6;
}
.kw-badge-gold   { background: var(--kw-gold);  color: var(--kw-on-gold); }
.kw-badge-ghost  { background: var(--kw-gold-soft); color: var(--kw-gold); border: 1px solid var(--kw-gold-line); }

/* State without a second hue: won reads loudest (solid), pending is hollow
   yellow, lost drops out to neutral grey. Icons carry the redundant cue so the
   meaning survives for anyone who can't separate fill weights. */
.kw-badge-win     { background: var(--kw-gold); color: var(--kw-on-gold); border: 1px solid var(--kw-gold); }
.kw-badge-pending { background: transparent; color: var(--kw-gold); border: 1px solid var(--kw-gold-line); }
.kw-badge-loss    { background: rgba(255, 255, 255, .05); color: var(--kw-text-faint); border: 1px solid var(--kw-line); text-decoration: line-through; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.kw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    min-height: 42px;                 /* comfortable tap target */
    border: 1px solid transparent;
    border-radius: var(--kw-r-pill);
    font-size: .85rem; font-weight: 700;
    cursor: pointer;
    transition: background .18s var(--kw-ease), color .18s var(--kw-ease), border-color .18s var(--kw-ease);
    white-space: nowrap;
}
.kw-btn-primary { background: var(--kw-gold); color: var(--kw-on-gold); }
.kw-btn-primary:hover { background: var(--kw-gold-600); color: var(--kw-on-gold); }
.kw-btn-ghost { background: transparent; color: var(--kw-gold); border-color: var(--kw-gold-line); }
.kw-btn-ghost:hover { background: var(--kw-gold-soft); color: var(--kw-gold); }
.kw-btn-quiet { background: var(--kw-surface-2); color: var(--kw-text); border-color: var(--kw-line); }
.kw-btn-quiet:hover { background: var(--kw-surface-3); color: #fff; }
.kw-btn-sm { padding: 6px 14px; min-height: 34px; font-size: .78rem; }
.kw-btn-block { width: 100%; }

.kw-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-sm);
    background: var(--kw-surface-2);
    color: var(--kw-text-dim);
    cursor: pointer;
    transition: color .18s var(--kw-ease), border-color .18s var(--kw-ease);
}
.kw-icon-btn:hover { color: var(--kw-gold); border-color: var(--kw-gold-line); }

/* ==========================================================================
   6. Header / navigation
   ========================================================================== */

.kw-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(18, 17, 16, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--kw-line);
}
.kw-header-inner {
    display: flex; align-items: center; gap: 14px;
    height: var(--kw-header-h);
}
.kw-logo { display: flex; align-items: center; flex: 0 0 auto; }
.kw-logo img { height: 34px; width: auto; object-fit: contain; }

/* — Desktop nav — */
.kw-nav { display: none; }
@media (min-width: 992px) {
    .kw-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
}
.kw-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px;
    border-radius: var(--kw-r-sm);
    font-size: .85rem; font-weight: 600;
    color: var(--kw-text-dim);
    transition: color .18s var(--kw-ease), background .18s var(--kw-ease);
}
.kw-nav-link:hover { color: var(--kw-gold); background: var(--kw-gold-soft); }
.kw-nav-link.is-active { color: var(--kw-gold); background: var(--kw-gold-soft); }
.kw-nav-link .kw-caret { font-size: .6rem; opacity: .7; transition: transform .18s var(--kw-ease); }

/* Hover/focus dropdown — no JS required, keyboard reachable. */
.kw-nav-item { position: relative; }
.kw-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 232px;
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    box-shadow: var(--kw-shadow-lg);
    padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s var(--kw-ease), transform .16s var(--kw-ease), visibility .16s;
}
.kw-nav-item:hover > .kw-dropdown,
.kw-nav-item:focus-within > .kw-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.kw-nav-item:hover > .kw-nav-link .kw-caret { transform: rotate(180deg); }
.kw-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: var(--kw-r-sm);
    font-size: .84rem; font-weight: 600;
    color: var(--kw-text-dim);
    transition: background .16s var(--kw-ease), color .16s var(--kw-ease);
}
.kw-dropdown a:hover { background: var(--kw-gold-soft); color: var(--kw-gold); }
.kw-dropdown a i:first-child { width: 16px; text-align: center; color: var(--kw-gold); opacity: .85; }
.kw-dropdown a .kw-count { margin-left: auto; font-size: .68rem; color: var(--kw-gold); font-weight: 700; }

/* — Header right side — */
.kw-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
@media (min-width: 992px) { .kw-header-actions { margin-left: 0; } }

.kw-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-sm);
    color: var(--kw-text); font-size: 1.05rem;
    cursor: pointer;
}
@media (min-width: 992px) { .kw-burger { display: none; } }

/* Logged-in avatar menu */
.kw-user { position: relative; }
.kw-user-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 5px;
    background: var(--kw-surface-2);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-pill);
    color: var(--kw-text); cursor: pointer;
    font-size: .82rem; font-weight: 600;
}
.kw-user-btn img { width: 28px; height: 28px; border-radius: 50%; }
.kw-user-btn .kw-user-name { display: none; }
@media (min-width: 576px) { .kw-user-btn .kw-user-name { display: inline; } }
.kw-user .kw-dropdown { left: auto; right: 0; min-width: 210px; }
.kw-user:hover > .kw-dropdown,
.kw-user:focus-within > .kw-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.kw-dropdown-head {
    padding: 10px 12px; margin-bottom: 4px;
    border-bottom: 1px solid var(--kw-line);
}
.kw-dropdown-head strong { display: block; font-size: .88rem; color: #fff; }
.kw-dropdown-head span { font-size: .72rem; color: var(--kw-text-faint); }
/* Destructive actions are separated by weight and a rule, not by a red. */
.kw-dropdown a.kw-danger { color: var(--kw-text-faint); border-top: 1px solid var(--kw-line); margin-top: 4px; padding-top: 11px; border-radius: 0; }
.kw-dropdown a.kw-danger:hover { background: transparent; color: var(--kw-gold); }
.kw-dropdown a.kw-danger i:first-child { color: var(--kw-text-faint); }
.kw-dropdown a.kw-danger:hover i:first-child { color: var(--kw-gold); }

/* ==========================================================================
   7. Mobile drawer
   ========================================================================== */

.kw-drawer-scrim {
    position: fixed; inset: 0; z-index: 1049;
    background: rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden;
    transition: opacity .24s var(--kw-ease), visibility .24s;
}
.kw-drawer-scrim.is-open { opacity: 1; visibility: visible; }

.kw-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050;
    width: min(86vw, 330px);
    background: var(--kw-surface);
    border-right: 1px solid var(--kw-line);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .26s var(--kw-ease);
    overscroll-behavior: contain;
}
.kw-drawer.is-open { transform: translateX(0); }

.kw-drawer-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px var(--kw-pad);
    border-bottom: 1px solid var(--kw-line);
    flex: 0 0 auto;
}
.kw-drawer-head img { height: 32px; width: auto; }
.kw-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 10px var(--kw-pad) 24px; }

.kw-drawer-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px;
    border-radius: var(--kw-r-sm);
    font-size: .9rem; font-weight: 600;
    color: var(--kw-text-dim);
}
.kw-drawer-link:hover, .kw-drawer-link.is-active { background: var(--kw-gold-soft); color: var(--kw-gold); }
.kw-drawer-link i:first-child { width: 20px; text-align: center; color: var(--kw-gold); opacity: .9; }
.kw-drawer-link .kw-count { margin-left: auto; font-size: .7rem; color: var(--kw-gold); }

/* Native <details> accordion — zero JS, always works. */
.kw-drawer-group > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: var(--kw-r-sm);
    font-size: .9rem; font-weight: 600;
    color: var(--kw-text-dim);
    cursor: pointer;
    list-style: none;
}
.kw-drawer-group > summary::-webkit-details-marker { display: none; }
.kw-drawer-group > summary i:first-child { width: 20px; text-align: center; color: var(--kw-gold); opacity: .9; }
.kw-drawer-group > summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900;
    margin-left: auto; font-size: .65rem; opacity: .6;
    transition: transform .2s var(--kw-ease);
}
.kw-drawer-group[open] > summary { color: var(--kw-gold); }
.kw-drawer-group[open] > summary::after { transform: rotate(180deg); }
.kw-drawer-group .kw-drawer-sub { padding-left: 20px; border-left: 1px solid var(--kw-line); margin-left: 20px; }
.kw-drawer-group .kw-drawer-sub .kw-drawer-link { padding: 10px 12px; font-size: .85rem; font-weight: 500; }

.kw-drawer-divider { height: 1px; background: var(--kw-line); margin: 12px 0; }

/* ==========================================================================
   8. Mobile bottom nav
   ========================================================================== */

.kw-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: rgba(18, 17, 16, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--kw-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 992px) { .kw-bottomnav { display: none; } }

.kw-bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: var(--kw-bottomnav-h);
    font-size: .64rem; font-weight: 600;
    color: var(--kw-text-faint);
    transition: color .18s var(--kw-ease);
}
.kw-bottomnav a i { font-size: 1.05rem; }
.kw-bottomnav a.is-active { color: var(--kw-gold); }

/* ==========================================================================
   9. Page hero
   ========================================================================== */

.kw-hero {
    position: relative;
    padding: 32px 0 28px;
    /* mainkwsv2.css centres bare h1/h2 inside banner areas — force our own. */
    text-align: left;
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(255, 203, 18, .13) 0%, transparent 58%),
        linear-gradient(180deg, var(--kw-surface) 0%, var(--kw-bg) 100%);
    border-bottom: 1px solid var(--kw-line);
}
.kw-hero .kw-crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: .76rem; color: var(--kw-text-faint);
    margin-bottom: 10px;
}
.kw-hero .kw-crumbs a { color: var(--kw-text-dim); }
.kw-hero .kw-crumbs a:hover { color: var(--kw-gold); }
.kw-hero .kw-crumbs .sep { opacity: .5; }
.kw-hero p { color: var(--kw-text-dim); margin: 10px 0 0; max-width: 62ch; font-size: .92rem; }

/* — Hero artwork —
   v1 painted a different illustration behind each section's banner. Those
   assets are reused here rather than redrawn: dropped bottom-right, faded, and
   masked so they never run under the copy. A page opts in with one of the
   .kw-hero-* modifiers below; a hero without one stays plain. */
.kw-hero { overflow: hidden; }
.kw-hero > .kw-shell { position: relative; z-index: 1; }
.kw-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--kw-hero-art, none);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 115%;
    opacity: .45;
    pointer-events: none;
    /* The v1 artwork is drawn in the old palette (green pitches, blue kits,
       purple stadiums). Rather than redraw it, collapse it to a warm
       monochrome so it reads as gold-on-black like everything else. */
    filter: grayscale(1) sepia(.62) saturate(1.5) brightness(.85);
    /* Fades out before it reaches the headline, so text contrast is the same
       with or without art. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
/* On a phone the copy spans the full width — pull the art right back so it
   reads as texture rather than as something competing with the headline. */
@media (max-width: 767.98px) {
    .kw-hero::after { opacity: .2; background-size: auto 80%; }
}

/* Section artwork, carried over from the v1 banner variants. */
.kw-hero-home    { --kw-hero-art: url(../images/banner-bg.png); }          /* was .banner-section    */
.kw-hero-tips    { --kw-hero-art: url(../images/tournaments-illus.webp); } /* was .all-tips          */
.kw-hero-vip     { --kw-hero-art: url(../images/affiliate-banner.webp); }  /* was .all-tips.premium  */
.kw-hero-reviews { --kw-hero-art: url(../images/reviews.svg); }            /* was .all-tips.reviews  */
.kw-hero-pay     { --kw-hero-art: url(../images/pay.svg); }                /* was .all-tips.pay      */
.kw-hero-about   { --kw-hero-art: url(../images/index-bg.png); }           /* was .about             */

/* ==========================================================================
   10. Segmented tabs (Free Tips / Free Slips etc.)
   ========================================================================== */

.kw-tabs {
    display: flex; gap: 6px;
    padding: 5px;
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-pill);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}
/* Full-bleed on a phone (thumb-friendly), sized to its content on desktop so it
   reads as a control rather than a banner. */
@media (min-width: 768px) { .kw-tabs { width: fit-content; } }
.kw-tabs::-webkit-scrollbar { display: none; }

/* Below 768px a four-tab strip (the VIP group) overflows, and the active tab
   can start off-screen — which reads as "nothing is selected". Wrap to a grid
   instead of scrolling so every tab, and the selection, is always visible.
   Two-tab strips still fit on one row, so they are unaffected. */
@media (max-width: 767.98px) {
    .kw-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        border-radius: var(--kw-r);
    }
    .kw-tabs a, .kw-tabs button { flex: 1 1 calc(50% - 3px); }
}
/* Buttons are included so a strip can drive Bootstrap tab panes as well as
   links. Bootstrap stamps `.active` on the current one, so both markers win. */
.kw-tabs a, .kw-tabs button {
    flex: 1 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 18px;
    border: none;
    background: transparent;
    border-radius: var(--kw-r-pill);
    font-size: .82rem; font-weight: 700;
    color: var(--kw-text-dim);
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s var(--kw-ease), color .18s var(--kw-ease);
}
.kw-tabs a:hover, .kw-tabs button:hover { color: var(--kw-gold); }
.kw-tabs a.is-active, .kw-tabs button.is-active,
.kw-tabs a.active, .kw-tabs button.active { background: var(--kw-gold); color: var(--kw-on-gold); }

/* Horizontal date chips */
.kw-chips {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kw-chips::-webkit-scrollbar { display: none; }
.kw-chips a, .kw-chips .kw-chip {
    flex: 0 0 auto;
    padding: 7px 15px;
    border-radius: var(--kw-r-pill);
    border: 1px solid var(--kw-line);
    background: var(--kw-surface);
    font-size: .78rem; font-weight: 600;
    color: var(--kw-text-dim);
    white-space: nowrap;
}
.kw-chips a:hover { border-color: var(--kw-gold-line); color: var(--kw-gold); }
.kw-chips a.is-active, .kw-chips .kw-chip.is-active { background: var(--kw-gold); border-color: var(--kw-gold); color: var(--kw-on-gold); }

/* ==========================================================================
   11. Tip card
   ========================================================================== */

.kw-tip {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    overflow: hidden;
    transition: border-color .2s var(--kw-ease);
}
.kw-tip:hover { border-color: var(--kw-gold-line); }

/* League strip */
.kw-tip-top {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--kw-surface-2);
    border-bottom: 1px solid var(--kw-line);
    font-size: .74rem; font-weight: 600;
    color: var(--kw-text-dim);
}
.kw-tip-top img { width: 16px; height: 16px; object-fit: contain; border-radius: 2px; flex: 0 0 auto; }
.kw-tip-top .kw-tip-league {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kw-tip-top .kw-tip-time {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--kw-gold);
}

/* Teams — grid keeps the "vs" dead centre at every width */
.kw-tip-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
}
.kw-tip-team { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.kw-tip-team img { width: 38px; height: 38px; object-fit: contain; }
.kw-tip-team span {
    font-size: .8rem; font-weight: 600; color: var(--kw-text);
    text-align: center; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kw-tip-vs {
    font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    color: var(--kw-text-faint);
    padding: 4px 9px;
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-pill);
}

/* Prediction / odds / result — 3 even columns, readable at 320px */
.kw-tip-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--kw-line);
    border-bottom: 1px solid var(--kw-line);
    background: rgba(0, 0, 0, .16);
}
.kw-tip-stat {
    padding: 10px 8px;
    text-align: center;
    min-width: 0;
}
.kw-tip-stat + .kw-tip-stat { border-left: 1px solid var(--kw-line); }
.kw-tip-stat .kw-stat-label {
    display: block;
    font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--kw-text-faint);
    margin-bottom: 4px;
}
.kw-tip-stat .kw-stat-value {
    display: block;
    font-size: .85rem; font-weight: 700; color: var(--kw-gold);
    overflow-wrap: anywhere;
}

.kw-tip-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
}
.kw-tip-foot .kw-tip-bookie { display: flex; align-items: center; }
.kw-tip-foot .kw-tip-bookie img { max-height: 24px; width: auto; object-fit: contain; }
.kw-tip-foot .kw-btn { margin-left: auto; }

/* ==========================================================================
   12. Slip card
   ========================================================================== */

.kw-slip {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .2s var(--kw-ease);
}
.kw-slip:hover { border-color: var(--kw-gold-line); }

.kw-slip-top {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--kw-line);
    background: var(--kw-surface-2);
}
.kw-slip-logo {
    flex: 0 0 auto;
    width: 46px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: var(--kw-r-sm);
    padding: 3px;
    overflow: hidden;
}
.kw-slip-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kw-slip-id { min-width: 0; }
.kw-slip-id strong { display: block; font-size: .88rem; color: #fff; line-height: 1.3; }
.kw-slip-stars { font-size: .68rem; color: var(--kw-gold); letter-spacing: 1px; }
.kw-slip-stars .far { color: var(--kw-text-faint); }

/* Odds pill sits top-right, always visible */
.kw-slip-odds {
    margin-left: auto; flex: 0 0 auto; text-align: right;
}
.kw-slip-odds .kw-stat-label {
    display: block; font-size: .6rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--kw-text-faint);
}
.kw-slip-odds strong { font-size: 1.05rem; font-weight: 800; color: var(--kw-gold); }

.kw-slip-body { padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

/* Copyable code row — the primary action on this card */
.kw-copy {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px;
    background: var(--kw-surface-3);
    border: 1px dashed var(--kw-gold-line);
    border-radius: var(--kw-r-sm);
}
.kw-copy .kw-copy-label {
    font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--kw-text-faint);
    flex: 0 0 auto;
}
.kw-copy .kw-copy-value {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .88rem; font-weight: 700; color: #fff;
    overflow-wrap: anywhere; min-width: 0; flex: 1;
}
.kw-copy .kw-icon-btn { flex: 0 0 auto; margin-left: auto; }

.kw-slip-foot { display: flex; gap: 8px; padding: 0 14px 14px; }
.kw-slip-foot .kw-btn { flex: 1; }

/* ==========================================================================
   13. News / article cards
   ========================================================================== */

.kw-news {
    display: flex; flex-direction: column;
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    overflow: hidden;
    height: 100%;
    transition: transform .2s var(--kw-ease), border-color .2s var(--kw-ease), box-shadow .2s var(--kw-ease);
}
.kw-news:hover { transform: translateY(-4px); border-color: var(--kw-gold-line); box-shadow: var(--kw-shadow); }

.kw-news-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kw-surface-2); flex: 0 0 auto; }
.kw-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--kw-ease); }
.kw-news:hover .kw-news-thumb img { transform: scale(1.05); }
.kw-news-thumb .kw-badge { position: absolute; top: 10px; left: 10px; }

/* Lead story — stacked on mobile, image beside the text from tablet up. */
.kw-news-lead { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .kw-news-lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .kw-news-lead .kw-news-thumb { aspect-ratio: auto; height: 100%; }
    .kw-news-lead .kw-news-body { padding: 22px; justify-content: center; }
}

.kw-news-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.kw-news-meta { display: flex; align-items: center; gap: 12px; font-size: .71rem; color: var(--kw-text-faint); }
.kw-news-meta i { margin-right: 4px; color: var(--kw-gold); opacity: .8; }
.kw-news-title { font-size: .92rem; font-weight: 700; line-height: 1.4; color: var(--kw-text); margin: 0; }
.kw-news-title a { color: inherit; }
.kw-news:hover .kw-news-title a { color: var(--kw-gold); }
.kw-news-excerpt { font-size: .8rem; line-height: 1.55; color: var(--kw-text-dim); margin: 0; }
.kw-news-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 6px;
    font-size: .78rem; font-weight: 700; color: var(--kw-gold);
}
.kw-news-more i { font-size: .68rem; transition: transform .2s var(--kw-ease); }
.kw-news:hover .kw-news-more i { transform: translateX(4px); }

/* ==========================================================================
   14. Article reading page
   ========================================================================== */

.kw-article { max-width: 760px; margin-inline: auto; }
.kw-article-hero {
    width: 100%; aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--kw-r);
    border: 1px solid var(--kw-line);
    margin-bottom: 20px;
    background: var(--kw-surface-2);
}
.kw-article-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    font-size: .78rem; color: var(--kw-text-faint);
    padding-bottom: 16px; margin-bottom: 20px;
    border-bottom: 1px solid var(--kw-line);
}
.kw-article-meta i { margin-right: 5px; color: var(--kw-gold); opacity: .85; }

.kw-prose { font-size: 1rem; line-height: 1.75; color: var(--kw-text-dim); }
.kw-prose > * + * { margin-top: 1.1em; }
.kw-prose h2 { font-size: 1.35rem; font-weight: 700; color: #fff; margin-top: 1.9em; }
.kw-prose h3 { font-size: 1.12rem; font-weight: 700; color: #fff; margin-top: 1.6em; }
.kw-prose p  { margin-bottom: 0; }
.kw-prose a  { color: var(--kw-gold); text-decoration: underline; text-underline-offset: 3px; }
.kw-prose img { border-radius: var(--kw-r); border: 1px solid var(--kw-line); height: auto; }
.kw-prose ul, .kw-prose ol { padding-left: 1.4em; }
.kw-prose li + li { margin-top: .5em; }
.kw-prose blockquote {
    padding: 12px 18px;
    border-left: 3px solid var(--kw-gold);
    background: var(--kw-gold-soft);
    border-radius: 0 var(--kw-r-sm) var(--kw-r-sm) 0;
    color: var(--kw-text);
    font-style: italic;
}
/* Wide content inside prose must scroll itself, never the page. */
.kw-prose table { display: block; overflow-x: auto; white-space: nowrap; }
.kw-prose pre { overflow-x: auto; background: var(--kw-surface-2); padding: 14px; border-radius: var(--kw-r-sm); }

.kw-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.kw-share span { font-size: .8rem; color: var(--kw-text-faint); margin-right: 4px; }
.kw-share a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--kw-surface-2); border: 1px solid var(--kw-line);
    color: var(--kw-text-dim);
    transition: color .18s var(--kw-ease), border-color .18s var(--kw-ease);
}
.kw-share a:hover { color: var(--kw-gold); border-color: var(--kw-gold-line); }

/* ==========================================================================
   15. States, forms, pagination
   ========================================================================== */

.kw-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--kw-text-dim);
    border: 1px dashed var(--kw-line);
    border-radius: var(--kw-r);
}
.kw-empty i { font-size: 2.2rem; color: var(--kw-gold); opacity: .45; margin-bottom: 14px; display: block; }
.kw-empty p { margin: 0 0 16px; }

.kw-field { display: flex; flex-direction: column; gap: 6px; }
.kw-field label { font-size: .76rem; font-weight: 700; color: var(--kw-text-dim); text-transform: uppercase; letter-spacing: .05em; }
.kw-input, .kw-select {
    width: 100%;
    padding: 10px 13px;
    min-height: 42px;
    background: var(--kw-surface-2);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-sm);
    color: var(--kw-text);
    font-size: .88rem;
    /* 16px minimum stops iOS Safari zooming the page on focus */
}
@media (max-width: 767.98px) { .kw-input, .kw-select { font-size: 16px; } }
.kw-input:focus, .kw-select:focus {
    outline: none; border-color: var(--kw-gold-line);
    box-shadow: 0 0 0 3px var(--kw-gold-soft);
}

.kw-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; }
.kw-pagination a, .kw-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: var(--kw-r-sm);
    border: 1px solid var(--kw-line);
    font-size: .82rem; font-weight: 600;
    color: var(--kw-text-dim);
}
.kw-pagination a:hover { border-color: var(--kw-gold-line); color: var(--kw-gold); }
.kw-pagination .is-active { background: var(--kw-gold); border-color: var(--kw-gold); color: var(--kw-on-gold); }
.kw-pagination .is-disabled { opacity: .35; pointer-events: none; }

/* Upsell strip */
.kw-cta {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px var(--kw-pad);
    margin-top: 28px;
    background: linear-gradient(135deg, rgba(255, 203, 18, .14), rgba(255, 203, 18, .03));
    border: 1px solid var(--kw-gold-line);
    border-radius: var(--kw-r);
}
.kw-cta h5 { font-size: .98rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
.kw-cta p  { font-size: .83rem; color: var(--kw-text-dim); margin: 0; }
.kw-cta .kw-btn { margin-left: auto; }
@media (max-width: 575.98px) {
    .kw-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .kw-cta .kw-btn { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   16. Utilities
   ========================================================================== */

.kw-only-mobile  { display: block; }
.kw-only-desktop { display: none; }
@media (min-width: 992px) {
    .kw-only-mobile  { display: none; }
    .kw-only-desktop { display: block; }
}

.kw-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.kw-skeleton {
    background: linear-gradient(90deg, var(--kw-surface-2) 25%, var(--kw-surface-3) 50%, var(--kw-surface-2) 75%);
    background-size: 200% 100%;
    animation: kw-shimmer 1.3s infinite;
    border-radius: var(--kw-r-sm);
}
@keyframes kw-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   17. Home page
   ========================================================================== */

/* Hero: the copy leads, the banker offer sits beside it from lg up and below
   it on a phone (where the offer is what converts, so it stays above fold). */
.kw-home-hero { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 992px) {
    .kw-home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
}
.kw-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 12px;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--kw-gold);
}
.kw-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 575.98px) { .kw-hero-actions .kw-btn { flex: 1 1 100%; } }

/* Proof strip under the hero copy — numbers, not adjectives. */
.kw-trust { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 26px; }
.kw-trust > div { min-width: 0; }
.kw-trust strong { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.2; color: var(--kw-gold); }
.kw-trust span { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kw-text-faint); }

/* Centred invitation band (Telegram / pick a plan) */
.kw-band {
    text-align: center;
    padding: 34px 20px;
    background: linear-gradient(135deg, rgba(255, 203, 18, .12), rgba(255, 203, 18, .02));
    border: 1px solid var(--kw-gold-line);
    border-radius: var(--kw-r-lg);
}
@media (min-width: 992px) { .kw-band { padding: 48px 40px; } }
.kw-band p { max-width: 62ch; margin: 10px auto 0; font-size: .92rem; color: var(--kw-text-dim); }
.kw-band-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
@media (max-width: 575.98px) { .kw-band-actions .kw-btn { flex: 1 1 100%; } }

/* Bookmaker card — same anatomy as the slip card, different payload. */
.kw-bookie {
    display: flex; flex-direction: column; gap: 12px;
    height: 100%;
    padding: var(--kw-pad);
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    transition: transform .2s var(--kw-ease), border-color .2s var(--kw-ease), box-shadow .2s var(--kw-ease);
}
.kw-bookie:hover { transform: translateY(-3px); border-color: var(--kw-gold-line); box-shadow: var(--kw-shadow); }
.kw-bookie-top { display: flex; align-items: center; gap: 12px; }
.kw-bookie-logo {
    flex: 0 0 auto;
    width: 78px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    padding: 4px;
    background: #fff;
    border-radius: var(--kw-r-sm);
    overflow: hidden;
}
/* The markup carries width/height attributes for CLS; clamp them back here. */
.kw-bookie-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.kw-bookie-id { min-width: 0; }
.kw-bookie-id strong { display: block; font-size: .92rem; line-height: 1.3; color: #fff; }
.kw-bookie-stars { font-size: .7rem; letter-spacing: 1px; color: var(--kw-gold); }
.kw-bookie-stars .far { color: var(--kw-text-faint); }
.kw-bookie > p { margin: 0; font-size: .83rem; line-height: 1.55; color: var(--kw-text-dim); overflow-wrap: anywhere; }
.kw-bookie-foot { display: flex; gap: 8px; margin-top: auto; }
.kw-bookie-foot .kw-btn { flex: 1; }

/* ==========================================================================
   18. Pricing & account
   ========================================================================== */

/* — Plan card —
   v1 tinted each tier with a metal colour (tan / silver / gold). The system has
   one accent, so tier is carried by emphasis instead: the featured plan gets
   the gold border and the solid button, the others stay quiet. */
.kw-plan {
    position: relative;
    display: flex; flex-direction: column; gap: 14px;
    height: 100%;
    padding: 22px var(--kw-pad);
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    transition: transform .2s var(--kw-ease), border-color .2s var(--kw-ease), box-shadow .2s var(--kw-ease);
}
.kw-plan:hover { transform: translateY(-3px); border-color: var(--kw-gold-line); box-shadow: var(--kw-shadow); }
.kw-plan.is-featured {
    border-color: var(--kw-gold);
    background: linear-gradient(180deg, var(--kw-gold-soft) 0%, var(--kw-surface) 42%);
}
/* The subscriber's own plan is stated, not sold. */
.kw-plan.is-current { border-color: var(--kw-gold-line); }

.kw-plan-flag {
    position: absolute; top: -1px; right: var(--kw-pad);
    padding: 3px 10px;
    border-radius: 0 0 var(--kw-r-sm) var(--kw-r-sm);
    background: var(--kw-gold); color: var(--kw-on-gold);
    font-size: .63rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

.kw-plan-name {
    font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0;
}
.kw-plan-term { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--kw-text-faint); }

.kw-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.kw-plan-price strong { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--kw-gold); }
.kw-plan-price .kw-plan-was { font-size: .9rem; color: var(--kw-text-faint); text-decoration: line-through; }

/* Feature list: a tick is included, a cross is not — the cross drops to grey so
   the two never read as equally available. */
.kw-plan .features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kw-plan .features li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: .84rem; line-height: 1.45; color: var(--kw-text-dim);
}
.kw-plan .features li i { flex: 0 0 auto; margin-top: 2px; font-size: .85rem; }
.kw-plan .features li .fa-check-circle { color: var(--kw-gold); }
.kw-plan .features li .fa-times-circle { color: var(--kw-text-faint); }
.kw-plan .features li:has(.fa-times-circle) { color: var(--kw-text-faint); }

.kw-plan-foot { margin-top: auto; padding-top: 4px; }
.kw-plan-foot .kw-btn { width: 100%; }
.kw-plan-active {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px;
    border: 1px dashed var(--kw-gold-line); border-radius: var(--kw-r-pill);
    font-size: .82rem; font-weight: 700; color: var(--kw-gold);
}

/* Payment-method strip under the plans */
.kw-paystrip {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center;
    padding: 20px var(--kw-pad);
    margin-top: 28px;
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
}
/* Third-party payment marks keep their own colours but are held back so they
   read as a trust signal, not as competing brands. */
.kw-paystrip img {
    height: 26px; width: auto; object-fit: contain;
    opacity: .6;
    filter: grayscale(1);
    transition: opacity .2s var(--kw-ease), filter .2s var(--kw-ease);
}
.kw-paystrip img:hover { opacity: 1; filter: none; }
/* Stand-in for a method whose logo asset is missing. */
.kw-pay-chip {
    padding: 6px 14px;
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-sm);
    font-size: .78rem; font-weight: 700;
    color: var(--kw-text-dim);
}

/* — Account —
   Identity block at the top of the dashboard. */
.kw-account-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: var(--kw-pad);
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
}
.kw-account-avatar {
    flex: 0 0 auto;
    width: 58px; height: 58px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--kw-gold-line);
    background: var(--kw-surface-2);
}
.kw-account-id { min-width: 0; }
.kw-account-id strong { display: block; font-size: 1.05rem; color: #fff; line-height: 1.3; }
.kw-account-id span { font-size: .8rem; color: var(--kw-text-dim); overflow-wrap: anywhere; }
.kw-account-head .kw-btn { margin-left: auto; }
@media (max-width: 575.98px) {
    .kw-account-head .kw-btn { margin-left: 0; width: 100%; }
}

/* Key/value rows — subscription status, profile fields. */
.kw-facts { display: flex; flex-direction: column; }
.kw-facts > div {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 0;
}
.kw-facts > div + div { border-top: 1px solid var(--kw-line); }
.kw-facts dt, .kw-facts .kw-fact-key {
    flex: 0 0 auto; min-width: 132px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--kw-text-faint);
    margin: 0;
}
.kw-facts dd, .kw-facts .kw-fact-val {
    margin: 0; min-width: 0;
    font-size: .88rem; color: var(--kw-text); overflow-wrap: anywhere;
}

/* — Fixture header (tabs/matchheader.php) —
   Same anatomy as the tip card, sized up to carry a page. */
.kw-match {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    overflow: hidden;
}
.kw-match-league {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 16px;
    background: var(--kw-surface-2);
    border-bottom: 1px solid var(--kw-line);
    font-size: .78rem; font-weight: 600; color: var(--kw-text-dim);
}
.kw-match-league img { width: 18px; height: 18px; object-fit: contain; border-radius: 2px; flex: 0 0 auto; }
.kw-match-league .kw-match-time { margin-left: auto; color: var(--kw-gold); white-space: nowrap; }

.kw-match-teams {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    padding: 22px 16px;
}
.kw-match-team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.kw-match-team img { width: 56px; height: 56px; object-fit: contain; }
@media (min-width: 768px) { .kw-match-team img { width: 72px; height: 72px; } }
.kw-match-team span {
    font-size: .95rem; font-weight: 700; color: #fff; text-align: center; line-height: 1.3;
}
.kw-match-vs {
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--kw-text-faint);
    padding: 5px 11px; border: 1px solid var(--kw-line); border-radius: var(--kw-r-pill);
}

.kw-match-tip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 13px 16px;
    border-top: 1px solid var(--kw-line);
    background: var(--kw-gold-soft);
}
.kw-match-tip-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--kw-text-faint);
}
.kw-match-tip > strong { font-size: 1rem; font-weight: 800; color: var(--kw-gold); }
@media (max-width: 575.98px) {
    .kw-match-tip { flex-direction: column; align-items: stretch; text-align: center; }
    .kw-match-tip .kw-spacer { margin-left: 0; }
}

/* — Head-to-head record — */
.kw-h2h { display: flex; flex-direction: column; gap: 16px; }
.kw-h2h-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kw-h2h-name { flex: 0 0 auto; min-width: 130px; font-size: .85rem; font-weight: 700; color: #fff; }
.kw-h2h-boxes { display: flex; gap: 5px; flex-wrap: wrap; }
/* W / D / L without a second hue: solid gold won, hollow drew, grey lost. */
.kw-h2h-box {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--kw-r-sm);
    font-size: .72rem; font-weight: 800;
}
.kw-h2h-box.win  { background: var(--kw-gold); color: var(--kw-on-gold); }
.kw-h2h-box.draw { background: transparent; color: var(--kw-gold); border: 1px solid var(--kw-gold-line); }
.kw-h2h-box.loss { background: rgba(255, 255, 255, .05); color: var(--kw-text-faint); border: 1px solid var(--kw-line); }

/* — Comparison bars —
   statbar() emits .progress / .progress-bar.home|away|equal, and mainkwsv2.css
   positions the two bars absolutely (home pinned left, away pinned right) so
   they meet in the middle. That technique is kept — turning the track into a
   flex row stacks both bars at the same offset and the labels collide. */
.kw-stats .progress {
    position: relative;
    display: block;
    height: 30px;
    margin-bottom: 16px;
    background: var(--kw-surface-2);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-pill);
    overflow: hidden;
}
.kw-stats .progress-bar {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-inline: 8px;
}
.kw-stats .progress-bar.home  { left: 0; right: auto; }
.kw-stats .progress-bar.away  { right: 0; left: auto; }
/* On a tie statbar() gives BOTH bars the same `.equal` class, so neither can be
   targeted by name — they end up stacked at the same offset with their labels
   on top of each other. Position them by source order instead. */
.kw-stats .progress-bar.equal:first-child { left: 0; right: auto; }
.kw-stats .progress-bar.equal:last-child  { right: 0; left: auto; }
/* The stronger side is filled, the weaker side stays hollow. */
.kw-stats .progress-bar.home  { background: var(--kw-gold); color: var(--kw-on-gold); }
.kw-stats .progress-bar.away  { background: var(--kw-surface-3); color: var(--kw-text-dim); }
.kw-stats .progress-bar.equal { background: var(--kw-gold-soft); color: var(--kw-gold); }
.kw-stats h3 {
    font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--kw-text-faint);
    margin: 0 0 8px;
}

/* — Auth card (reset password, set password) —
   A narrow centred panel on its own. These pages have no surrounding chrome to
   anchor to, so the card carries the whole layout. */
.kw-auth {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: 28px var(--kw-pad);
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r);
    box-shadow: var(--kw-shadow);
}
@media (min-width: 576px) { .kw-auth { padding: 32px 28px; } }
.kw-auth-logo { display: block; width: 160px; height: auto; margin: 0 auto 20px; }
.kw-auth h1 { font-size: 1.25rem; font-weight: 700; color: #fff; text-align: center; margin: 0 0 6px; }
.kw-auth > p { font-size: .85rem; color: var(--kw-text-dim); text-align: center; margin: 0 0 22px; }
.kw-auth form { display: flex; flex-direction: column; gap: 14px; }
.kw-auth-foot { text-align: center; margin-top: 18px; }
.kw-auth-foot a, .kw-auth-foot button {
    background: none; border: none; cursor: pointer;
    font-size: .82rem; font-weight: 600; color: var(--kw-text-dim);
}
.kw-auth-foot a:hover, .kw-auth-foot button:hover { color: var(--kw-gold); }

/* Inline "show password" toggle */
.kw-check {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: var(--kw-text-dim);
    cursor: pointer;
}
.kw-check input { flex: 0 0 auto; }

/* — App gate —
   Stands in for a feature that now lives only in the mobile app. Centred and
   given real height so it reads as the page's content, not as a banner above
   something else. */
.kw-appgate {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(255, 203, 18, .12), rgba(255, 203, 18, .02));
    border: 1px solid var(--kw-gold-line);
    border-radius: var(--kw-r-lg);
}
@media (min-width: 768px) { .kw-appgate { padding: 56px 40px; } }
.kw-appgate > i:first-child {
    display: block;
    font-size: 2.6rem;
    color: var(--kw-gold);
    margin-bottom: 18px;
}
.kw-appgate p {
    max-width: 56ch;
    margin: 12px auto 0;
    font-size: .92rem;
    color: var(--kw-text-dim);
}

/* — Checkout —
   Narrow column: a payment form has one job, so it should not run the full
   width of a desktop shell. */
.kw-checkout { width: 100%; max-width: 560px; margin-inline: auto; }
.kw-checkout .kw-tabs { width: 100%; }
.kw-checkout .kw-tabs button { flex: 1 1 0; }

.kw-checkout-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kw-checkout-list li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: .84rem; line-height: 1.45; color: var(--kw-text-dim);
}
.kw-checkout-list li i { flex: 0 0 auto; margin-top: 2px; color: var(--kw-gold); font-size: .85rem; }

/* — App landing page — */
.kw-feature { text-align: left; }
.kw-feature .kw-feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 14px;
    border-radius: var(--kw-r-sm);
    background: var(--kw-gold-soft);
    border: 1px solid var(--kw-gold-line);
    color: var(--kw-gold);
    font-size: 1.1rem;
}
.kw-feature h3 { margin-bottom: 8px; }
.kw-feature p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--kw-text-dim); }

/* Phone mockup — a frame around a small preview of the app UI. */
.kw-phone {
    width: 260px;
    margin-inline: auto;
    padding: 12px;
    background: var(--kw-surface-2);
    border: 2px solid var(--kw-line-strong);
    border-radius: 32px;
    box-shadow: var(--kw-shadow-lg);
}
.kw-phone-screen {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px;
    min-height: 380px;
    background: var(--kw-bg);
    border-radius: 22px;
}
.kw-phone-head { display: flex; align-items: center; justify-content: space-between; }
.kw-phone-head strong { font-size: .92rem; color: #fff; }
.kw-phone-bet {
    padding: 10px;
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    border-radius: var(--kw-r-sm);
}
.kw-phone-bet .kw-phone-teams { font-size: .78rem; font-weight: 700; color: var(--kw-text); }
.kw-phone-odds { display: flex; gap: 6px; margin-top: 7px; }
.kw-phone-odds span {
    flex: 1;
    padding: 4px 0;
    text-align: center;
    font-size: .72rem; font-weight: 700;
    border-radius: 5px;
    background: var(--kw-surface-2);
    color: var(--kw-text-dim);
}
.kw-phone-odds span.is-pick { background: var(--kw-gold); color: var(--kw-on-gold); }
.kw-phone-bet .kw-phone-note { margin-top: 7px; font-size: .68rem; color: var(--kw-text-faint); }
.kw-phone-total {
    margin-top: auto;
    padding: 12px;
    text-align: center;
    font-weight: 800; font-size: .9rem;
    background: var(--kw-gold); color: var(--kw-on-gold);
    border-radius: var(--kw-r-sm);
}

/* Numbered explainer card */
.kw-step { position: relative; }
.kw-step img { height: 46px; width: auto; object-fit: contain; margin-bottom: 14px; }
.kw-step .kw-step-no {
    position: absolute; top: var(--kw-pad); right: var(--kw-pad);
    font-size: 1.5rem; font-weight: 800;
    color: var(--kw-gold);
    opacity: .28;
    line-height: 1;
}
.kw-step h3 { margin-bottom: 8px; }
.kw-step p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--kw-text-dim); }

/* — Bookmaker review header — */
.kw-review-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kw-review-logo {
    flex: 0 0 auto;
    width: 120px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    background: #fff;
    border-radius: var(--kw-r-sm);
}
.kw-review-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.kw-review-head .kw-bookie-stars { font-size: .9rem; }
.kw-review-head .kw-copy { flex: 1 1 240px; }

/* Password-confirmation dialog on the account page. It is toggled by jQuery
   fadeIn/fadeOut rather than Bootstrap, so it is styled here directly. */
.modal-pwd {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    background: var(--kw-surface);
    border: 1px solid var(--kw-gold-line);
    border-radius: var(--kw-r);
    box-shadow: var(--kw-shadow-lg);
}
.modal-pwd .kw-row .kw-btn { flex: 1; }

/* ==========================================================================
   19. Legacy repaint — yellow & black only
   --------------------------------------------------------------------------
   mainkwsv2.css ships the original template's purple/indigo/pink/green
   palette. Rather than fork that 200KB file, we re-point its custom properties
   and override the handful of components that hardcode a hex, so every page
   that still uses legacy markup inherits the new theme.
   ========================================================================== */

:root {
    /* Legacy tokens, re-aimed at the yellow/black system */
    --body-color:      #0d0d0d;
    --body-color-on:   #ffcb12;
    --body-bg-light:   #1f1f1f;
    --bg-color:        #ffcb12;
    --para-color:      #f2f2f2;
    --para-alt-color:  #a3a3a3;
    --hover-color:     #ffcb12;
    --hover-alt-color: #ffcb12;
    --head-color:      #ffcb12;
    --input-bg:        #1f1f1f;
    --bs-primary:      #ffcb12;
}

/* — Legacy buttons — */
.cmn-btn {
    background: var(--kw-gold);
    border: 1px solid var(--kw-gold);
    border-radius: var(--kw-r-pill);
    font-weight: 700;
}
.cmn-btn:hover { background: var(--kw-gold-600); border-color: var(--kw-gold-600); color: var(--kw-on-gold); }
.cmn-btn.second { background: transparent;

    border-color: var(--kw-gold-line); }
.cmn-btn.second:hover { background: var(--kw-gold-soft); color: var(--kw-gold); border-color: var(--kw-gold); }
.cmn-btn.second.active, .cmn-btn.active {
    background: var(--kw-gold);
    /*color: var(--kw-on-gold);*/
    border-color: var(--kw-gold); }
.cmn-btn.second.active i, .cmn-btn.active i { color: var(--kw-on-gold) !important; }

/* — Legacy hero: drop the green wash, keep a black bed with a yellow glow — */
.banner-section .overlay,
.banner-section.inner-banner .overlay,
.banner-section-review .overlay {
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(255, 203, 18, .14) 0%, transparent 58%),
        linear-gradient(180deg, var(--kw-surface) 0%, var(--kw-bg) 100%) !important;
    background-color: var(--kw-bg) !important;
    border-bottom: 1px solid var(--kw-line);
}
.banner-section .overlay .banner-content { padding: 56px 0 40px; }
@media (min-width: 992px) { .banner-section .overlay .banner-content { padding: 80px 0 56px; } }

/* — Legacy surfaces — */
body, .user-dashboard-content, .user-dashboard-content .overlay { background-color: var(--kw-bg); }
.footer-section { background-color: var(--kw-bg); border-top: 1px solid var(--kw-line); }
.footer-section .newsletter {
    background-image: none;
    background-color: var(--kw-surface);
    border: 1px solid var(--kw-gold-line);
    border-radius: var(--kw-r-lg);
    padding: 28px 20px;
}
@media (min-width: 992px) { .footer-section .newsletter { padding: 44px 60px; } }

/* — Legacy cards / panels — */
.single-item, .tips-single, .single-sidebar, .sidebar .left-area,
.find-tipster, .single-side-area, .blog-card, .single-blog-card {
    background-color: var(--kw-surface) !important;
    border-color: var(--kw-line) !important;
}

/* — Bootstrap contextual colours collapse onto the two-tone scale — */
.text-success, .text-info, .text-primary, .text-warning { color: var(--kw-gold) !important; }
.text-danger, .text-muted, .text-secondary { color: var(--kw-text-dim) !important; }

.btn-success, .btn-primary, .btn-info, .btn-warning {
    background-color: var(--kw-gold) !important;
    border-color: var(--kw-gold) !important;
    color: var(--kw-on-gold) !important;
}
.btn-success:hover, .btn-primary:hover, .btn-info:hover, .btn-warning:hover {
    background-color: var(--kw-gold-600) !important;
    border-color: var(--kw-gold-600) !important;
    color: var(--kw-on-gold) !important;
}
.btn-outline-success, .btn-outline-primary, .btn-outline-info,
.btn-outline-warning, .btn-outline-light, .btn-outline-secondary, .btn-outline-danger {
    background-color: transparent !important;
    border-color: var(--kw-gold-line) !important;
    color: var(--kw-gold) !important;
}
.btn-outline-success:hover, .btn-outline-primary:hover, .btn-outline-info:hover,
.btn-outline-warning:hover, .btn-outline-light:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover {
    background-color: var(--kw-gold) !important;
    border-color: var(--kw-gold) !important;
    color: var(--kw-on-gold) !important;
}
.btn-danger { background-color: var(--kw-surface-3) !important; border-color: var(--kw-line-strong) !important; color: var(--kw-text) !important; }

.badge-warning, .badge-success, .badge-primary, .badge-info,
.bg-warning, .bg-success, .bg-primary, .bg-info {
    background-color: var(--kw-gold) !important;
    color: var(--kw-on-gold) !important;
}
.badge-danger, .bg-danger, .badge-secondary, .bg-secondary {
    background-color: var(--kw-surface-3) !important;
    color: var(--kw-text-dim) !important;
}
.bg-dark, .bg-off-dark, .bg-dark-menu { background-color: var(--kw-surface) !important; }

/* mainkwsv2.css styles bare `.home` and `.away` — a red/green fill plus an
   absolute position — intended only for the statbar() progress bars. Any other
   element that happens to use those words as a class inherits it; the World Cup
   fixture cards came out with red away-team rows because of it. Confine the
   legacy treatment to the bars it was written for. */
.home:not(.progress-bar), .away:not(.progress-bar) {
    position: static;
    left: auto;
    right: auto;
    background-color: transparent;
}

/* — Legacy tables — */
.table, .table-drgdark { color: var(--kw-text); border-color: var(--kw-line); }
.table thead th {
    background: var(--kw-surface-2);
    color: var(--kw-gold);
    border-color: var(--kw-line);
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.table td, .table th { border-color: var(--kw-line); }
.table a { color: var(--kw-gold); }
/* A table must never widen the page on a phone. */
.table-responsive, .table-drgdark { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* — Legacy pagination — */
.pagination .page-link {
    background: var(--kw-surface);
    border: 1px solid var(--kw-line);
    color: var(--kw-text-dim);
    border-radius: var(--kw-r-sm);
    margin: 0 3px;
}
.pagination .page-link:hover { border-color: var(--kw-gold-line); color: var(--kw-gold); background: var(--kw-surface-2); }
.pagination .page-item.active .page-link { background: var(--kw-gold); border-color: var(--kw-gold); color: var(--kw-on-gold); }
.pagination .page-item.disabled .page-link { opacity: .35; }

/* — Legacy form controls — */
.form-control, .form-select, select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"], input[type="tel"] {
    background-color: var(--kw-surface-2);
    border: 1px solid var(--kw-line);
    color: var(--kw-text);
}
.form-control:focus, .form-select:focus, select:focus, textarea:focus, input:focus {
    background-color: var(--kw-surface-2);
    border-color: var(--kw-gold-line);
    color: var(--kw-text);
    box-shadow: 0 0 0 3px var(--kw-gold-soft);
}
.form-control::placeholder { color: var(--kw-text-faint); }

/* select2 + nice-select, used on the filter panels */
.select2-container--default .select2-selection--single,
.select2-dropdown, .nice-select, .nice-select .list {
    background-color: var(--kw-surface-2) !important;
    border-color: var(--kw-line) !important;
    color: var(--kw-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.nice-select .option:hover, .nice-select .option.selected {
    background-color: var(--kw-gold) !important;
    color: var(--kw-on-gold) !important;
}

/* — Legacy modals — */
.modal-content { background-color: var(--kw-surface); border: 1px solid var(--kw-line); color: var(--kw-text); }
.modal-container { background: var(--kw-surface) !important; border: 1px solid var(--kw-gold-line); }
.btn-subscribe { background: var(--kw-gold) !important; color: var(--kw-on-gold) !important; }
.cta-popup { background: var(--kw-surface) !important; border: 1px solid var(--kw-gold-line); }
.cta-popup .btn-download { background: var(--kw-gold) !important; color: var(--kw-on-gold) !important; }
.mobile-app-notification { background: var(--kw-surface) !important; border-color: var(--kw-gold) !important; }

/* — Scroll-to-top — */
.scrollToTop { background: var(--kw-gold) !important; color: var(--kw-on-gold) !important; border-color: var(--kw-gold) !important; }
.scrollToTop i { color: var(--kw-on-gold) !important; }

/* — The legacy header/offcanvas are replaced by .kw-header; hide any remnant — */
.header-section, #sidebarMenu, #navbar-content { display: none !important; }

/* — toastr, so alerts match too — */
#toast-container > .toast-success, #toast-container > .toast-info { background-color: var(--kw-gold) !important; color: var(--kw-on-gold) !important; }
#toast-container > .toast-error, #toast-container > .toast-warning { background-color: var(--kw-surface-3) !important; color: var(--kw-text) !important; border: 1px solid var(--kw-gold-line); }

/* — Decorative section backgrounds from the original template carry the old
     purple/navy artwork. Drop the imagery and keep the two-tone surfaces. — */
.join-us,
.top-tipsters,
.faqs-section,
.become-tipster,
.affiliate-section {
    background-image: none !important;
    background-color: var(--kw-bg) !important;
}
.join-us .main-content,
.top-tipsters .main-content {
    background: var(--kw-surface) !important;
    border: 1px solid var(--kw-gold-line);
    border-radius: var(--kw-r-lg);
    padding: 32px 20px !important;
}
@media (min-width: 992px) {
    .join-us .main-content,
    .top-tipsters .main-content { padding: 56px 40px !important; }
}
.join-us .overlay.pt-120,
.user-dashboard-content .overlay.pt-120 { padding-top: 40px !important; }

/* The legacy hero illustrations sit on coloured plates; the repaint in §17
   already replaces the gradient, this clears the artwork underneath. */
.banner-section .overlay,
.banner-section.inner-banner .overlay,
.banner-section-review .overlay { background-image: none !important; }

/* Legacy `join-us` CTA buttons stack rather than overflow on a phone. */
.join-us .main-content .btn-area { flex-wrap: wrap; gap: 10px; justify-content: center; }
.join-us .main-content .btn-area .cmn-btn { margin: 0 !important; }

/* The footer's floating contact buttons sit at bottom:30px, which lands them on
   top of the mobile bottom nav. Lift them clear below the lg breakpoint. */
@media (max-width: 991.98px) {
    .floating-buttons,
    .toggle-contact-btn,
    #reopenSocialButtons1,
    #reopenSocialButtons2 {
        bottom: calc(var(--kw-bottomnav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .chat-popup { bottom: calc(var(--kw-bottomnav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
    /* The sticky app-install banner and the sticky header must not both pin. */
    .app-install-banner { position: relative; }
}

/* — "Powered by" credit —
   The Hashback mark is a third-party brand, so it keeps its own colours: no
   gold tint, no filter. Opacity alone gives it the right weight against the
   KeshoWins logo above it. */
.kw-powered {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--kw-line);
}
.kw-powered span {
    font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--kw-text-faint);
}
.kw-powered img {
    height: 26px; width: auto;
    opacity: .75;
    transition: opacity .18s var(--kw-ease);
}
.kw-powered a:hover img { opacity: 1; }

/* — Footer social links (template shipped them light-blue with a pink hover) — */
.footer-section .copyright .social-link a {
    border-color: var(--kw-line);
    background: var(--kw-surface-2);
}
.footer-section .copyright .social-link a i,
.footer-section .copyright .social-link a svg { color: var(--kw-gold); }
.footer-section .copyright .social-link a:hover {
    background: var(--kw-gold);
    border-color: var(--kw-gold);
}
.footer-section .copyright .social-link a:hover i,
.footer-section .copyright .social-link a:hover svg { color: var(--kw-on-gold); }

/* Footer links and headings */
.footer-section .menu-item .footer-link li a { color: var(--kw-text-dim); }
.footer-section .menu-item .footer-link li a:hover { color: var(--kw-gold); }
.footer-section h5, .footer-section h4, .footer-section .title { color: #fff; }