/* Affiliate landing layer on top of the original Chatki stylesheet */
:root {
    --aff-green: #00803e;
    --aff-green-dark: #016a34;
    --aff-accent: #00b425;
    --aff-bg: #eef1ef;
    --aff-surface: #ffffff;
    --aff-surface-2: #f5f7f6;
    --aff-text: #1c2420;
    --aff-muted: #5e6b64;
    --aff-border: #dde3df;
}
html[data-theme="dark"] {
    --aff-bg: #14181b;
    --aff-surface: #1d2226;
    --aff-surface-2: #252b30;
    --aff-text: #eef2f0;
    --aff-muted: #9aa6a0;
    --aff-border: #2e353a;
}

html, body { height: auto !important; overflow: auto !important; }
body, html[data-theme] body { background: var(--aff-bg) !important; color: var(--aff-text); font-family: Roboto, ui-sans-serif, system-ui, sans-serif; }
#root { overflow: visible !important; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header tweaks: the original relies on JS for these */
.header-2 { position: sticky; top: 0; z-index: 50; }
.logo-wrapper-m a { text-indent: -9999em; overflow: hidden; }
.main-navigation-authentication-login a { cursor: pointer; }
.main-navigation-authentication-create-account-button { display: inline-flex; align-items: center; }
.race-widget-buttons a { display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; margin-left: 10px; border-radius: 50%; background-color: var(--newheader-color3); }
.race-widget-buttons a:hover { background-color: var(--newheader-color1); }
.race-widget-buttons a img { height: 30px; width: auto; }
.main-navigation-routs-dropdown-wrapper:hover .main-navigation-routs-dropdown-wrapper-content { display: block; }
.app-button, .chat-button { cursor: pointer; }

/* sport icon font */
.sp-ic { font-family: Sport-icons; font-style: normal; font-weight: 400; line-height: 1; speak: none; }
.sp-ic:before { display: inline-block !important; }

/* ---------- layout ---------- */
.aff-page { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; max-width: 1440px; margin: 0 auto; padding: 16px; }

.aff-sidebar { background: var(--aff-surface); border: 1px solid var(--aff-border); border-radius: 8px; padding: 8px 0; align-self: start; position: sticky; top: 110px; max-height: calc(100vh - 126px); overflow-y: auto; }
.aff-sidebar-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--aff-muted); padding: 8px 16px; }
.sb-sport { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 14px; border-left: 3px solid transparent; transition: background .15s, border-color .15s; }
.sb-sport:hover { background: var(--aff-surface-2); border-left-color: var(--aff-accent); }
.sb-sport .sp-ic { width: 20px; text-align: center; font-size: 16px; color: var(--aff-green); }
html[data-theme="dark"] .sb-sport .sp-ic, html[data-theme="dark"] .sport-card .sp-ic { color: var(--aff-accent); }

.aff-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.aff-main section { min-width: 0; }

.aff-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 12px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #02ac54 0%, #00803e 45%, #014c25 100%); overflow: hidden; }
.aff-kicker { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.16); padding: 4px 10px; border-radius: 99px; }
.aff-hero h2 { font-size: 34px; line-height: 1.15; font-weight: 700; margin: 14px 0 10px; max-width: 18ch; }
.aff-hero p { font-size: 16px; line-height: 1.5; opacity: .9; max-width: 52ch; }
.aff-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.aff-hero-art { display: flex; gap: 12px; flex-shrink: 0; }
.aff-hero-art img { width: 120px; height: 120px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.aff-hero-art img:last-child { transform: translateY(24px); }

.aff-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 6px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; transition: filter .15s, background .15s; }
.aff-btn-primary { background: #fff200; color: #111 !important; }
.aff-btn-primary:hover { filter: brightness(.95); }
.aff-btn-ghost { border: 2px solid rgba(255,255,255,.7); color: #fff; }
.aff-btn-ghost:hover { background: rgba(255,255,255,.12); }

.aff-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.aff-section-head h3 { font-size: 18px; font-weight: 700; }
.aff-section-head a { font-size: 13px; font-weight: 700; color: var(--aff-green); }
html[data-theme="dark"] .aff-section-head a { color: var(--aff-accent); }

.aff-sports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.sport-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 8px; background: var(--aff-surface); border: 1px solid var(--aff-border); border-radius: 8px; font-size: 13px; font-weight: 500; text-align: center; transition: transform .15s, border-color .15s; }
.sport-card .sp-ic { font-size: 28px; color: var(--aff-green); }
.sport-card:hover { transform: translateY(-2px); border-color: var(--aff-accent); }

.aff-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.aff-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--aff-surface); border: 1px solid var(--aff-border); border-left: 4px solid var(--aff-accent); border-radius: 8px; transition: background .15s; }
.aff-tile strong { font-size: 16px; }
.aff-tile span { font-size: 13px; color: var(--aff-muted); }
.aff-tile:hover { background: var(--aff-surface-2); }

.aff-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 12px; background: var(--aff-green-dark); color: #fff; }
.aff-banner h3 { font-size: 20px; font-weight: 700; }
.aff-banner p { opacity: .85; margin-top: 4px; }

.aff-footer { font-size: 12px; line-height: 1.6; color: var(--aff-muted); border-top: 1px solid var(--aff-border); padding: 16px 0 8px; }
.aff-footer p + p { margin-top: 6px; }
.aff-footer a { text-decoration: underline; }

/* ---------- mobile header / drawer ---------- */
.m-header, .m-tabs, .m-drawer { display: none; }
.m-logo { display: block; width: 120px; height: 26px; background: url(/images/logo.svg) no-repeat left center / contain; }

@media (max-width: 1024px) {
    .header-2 { display: none !important; }
    .m-header { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 60; height: 56px; padding: 0 12px; background: var(--light-theme-primary-two, #00803e); color: #fff; }
    html[data-theme="dark"] .m-header, html[data-theme="dark"] .m-tabs { background: #1d2226; }
    .m-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px; background: none; border: 0; cursor: pointer; }
    .m-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
    .m-auth { margin-left: auto; display: flex; gap: 8px; }
    .m-login, .m-register { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
    .m-login { border: 1px solid rgba(255,255,255,.7); color: #fff; }
    .m-register { background: #fff200; color: #111 !important; }
    .m-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 8px; background: var(--light-theme-primary-four, #016a34); scrollbar-width: none; position: sticky; top: 56px; z-index: 59; }
    .m-tabs::-webkit-scrollbar { display: none; }
    .m-tabs a { flex-shrink: 0; padding: 11px 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); border-bottom: 3px solid transparent; }
    .m-tabs a.active { color: #fff; border-bottom-color: #fff200; }

    .m-drawer { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
    .m-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; }
    .m-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); background: var(--aff-surface); transform: translateX(-100%); transition: transform .25s; overflow-y: auto; padding: 12px 16px 24px; }
    .m-menu-open .m-drawer { pointer-events: auto; }
    .m-menu-open .m-drawer-backdrop { opacity: 1; }
    .m-menu-open .m-drawer-panel { transform: none; }
    .m-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 40px; }
    .m-drawer-head .m-logo { filter: none; background-color: var(--aff-green); border-radius: 4px; width: 130px; height: 32px; background-position: center; background-size: 80% auto; }
    .m-close { font-size: 28px; line-height: 1; background: none; border: 0; color: var(--aff-text); cursor: pointer; }
    .m-drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
    .m-drawer-auth a { justify-content: center; height: 40px; }
    .m-drawer-auth .m-login { border-color: var(--aff-green); color: var(--aff-green); }
    .m-drawer-links li a { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--aff-border); font-weight: 500; }
    .m-drawer-links em { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; background: var(--aff-accent); color: #fff; padding: 2px 6px; border-radius: 3px; }
    .m-drawer-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }
    .m-drawer-row .theme-switch-wrapper { margin: 0; }
    .m-drawer-row .new-social-icon { font-size: 13px; font-weight: 700; color: var(--aff-green); }
    .m-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .m-apps a { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--aff-border); border-radius: 6px; font-size: 13px; font-weight: 700; }
    .m-apps img { width: 28px; height: 28px; }
    .m-apps small { display: block; font-size: 10px; font-weight: 400; color: var(--aff-muted); }

    .aff-page { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .aff-sidebar { display: none; }
}

@media (max-width: 640px) {
    .aff-hero { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
    .aff-hero h2 { font-size: 26px; }
    .aff-hero-art { display: none; }
    .aff-hero-cta .aff-btn { flex: 1 1 100%; }
    .aff-sports-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aff-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* sport glyphs (Sport-icons font, scoped so the original rules don't interfere) */
.sp-ic.Football:before { content: "\e66f"; }
.sp-ic.Basketball:before { content: "\e609"; }
.sp-ic.Volleyball:before { content: "\e66a"; }
.sp-ic.Tennis:before { content: "\e663"; }
.sp-ic.IceHockey:before { content: "\e62c"; }
.sp-ic.RugbyUnion:before { content: "\e648"; }
.sp-ic.TableTennis:before { content: "\e65f"; }
.sp-ic.RugbyLeague:before { content: "\e647"; }
.sp-ic.AmericanFootball:before { content: "\e602"; }
.sp-ic.Handball:before { content: "\e626"; }
.sp-ic.Boxing:before { content: "\e60f"; }
.sp-ic.Futsal:before { content: "\e634"; }
.sp-ic.Snooker:before { content: "\e64f"; }
.sp-ic.WaterPolo:before { content: "\e66b"; }
.sp-ic.MMA:before { content: "\e665"; }
.sp-ic.AussieRules:before { content: "\e605"; }
.sp-ic.Darts:before { content: "\e617"; }
.sp-ic.Cricket:before { content: "\e613"; }
.sp-ic.Baseball:before { content: "\e608"; }
.sp-ic.Chess:before { content: "\e612"; }
.sp-ic.MobileLegends:before { content: "\e619"; }
.sp-ic.NASCAR:before { content: "\e638"; }
.sp-ic.Motorbikes:before { content: "\e636"; }
.sp-ic.Politics:before { content: "\e641"; }
.sp-ic:before { color: inherit !important; font-family: Sport-icons !important; }

/* group notice */
.group-notice { position: relative; z-index: 70; padding: 8px 16px; text-align: center; font-size: 13px; line-height: 1.4; background: #fff200; color: #111; }
.group-notice a { font-weight: 700; text-decoration: underline; }
@media (max-width: 1024px) { .group-notice { font-size: 12px; } }
.main-navigation-authentication a, .m-login, .m-register { white-space: nowrap; }
.main-navigation-routs > div { flex-shrink: 0; }
@media (max-width: 1600px) {
    .main-navigation-routs > div:nth-child(n+6) { display: none; }
    .race-widget-buttons { display: none !important; }
}
@media (max-width: 1280px) { .main-navigation-routs > div:nth-child(n+5) { display: none; } }
@media (max-width: 420px) {
    .m-auth { gap: 6px; }
    .m-login, .m-register { padding: 0 9px; font-size: 11px; }
    .m-logo { width: 96px; }
}