/* J-SAM Categories addon — reuses --jsam-* and --jg-* tokens where present, with safe fallbacks */

/* ── Homepage: Browse Categories ─────────────────────────────────── */
.jsam-cat-browse-scroller {
    display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.jsam-cat-tile {
    position: relative; flex: 0 0 200px; min-height: 150px;
    background-color: var(--jsam-surface, #1a1e35); background-size: cover; background-position: center;
    border: 1px solid var(--jsam-border, #2a2f4e); border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
}
.jsam-cat-tile::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,13,23,.35), rgba(11,13,23,.9));
}
.jsam-cat-tile-link { position: relative; z-index: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; color: #fff; text-decoration: none; flex: 1; }
.jsam-cat-tile-icon { font-size: 26px; width: 26px; height: 26px; color: var(--jsam-gold, #f5c518); }
.jsam-cat-tile-name { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 16px; }
.jsam-cat-tile-subs { position: relative; z-index: 1; padding: 0 16px 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.jsam-cat-tile-subs a { font-size: 11px; color: rgba(255,255,255,.75); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.35); }
.jsam-cat-tile-subs a:hover { color: #fff; }

/* ── Homepage: Trending ──────────────────────────────────────────── */
.jsam-cat-trending-scroller { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.jsam-trend-card {
    flex: 0 0 220px; background: var(--jsam-surface, #1a1e35); border: 1px solid var(--jsam-border, #2a2f4e);
    border-radius: 14px; overflow: hidden;
}
.jsam-trend-img { height: 100px; background-size: cover; background-position: center; background-color: var(--jsam-surface-2, #21263f); }
.jsam-trend-img-placeholder { background: linear-gradient(135deg, var(--jsam-surface-2,#21263f), var(--jsam-surface-3,#2a2f4e)); }
.jsam-trend-img-link { display: block; }
.jsam-trend-body { padding: 12px 14px; }
.jsam-trend-cat { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--jsam-gold, #f5c518); margin-bottom: 4px; text-decoration: none; }
.jsam-trend-body h4 { margin: 0 0 8px; font-size: 14px; color: var(--jsam-text, #f0f2ff); font-family: 'Sora', sans-serif; }
.jsam-trend-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--jsam-text-muted, #6b7499); margin-bottom: 8px; }
.jsam-trend-nominees { border-top: 1px solid var(--jsam-border, #2a2f4e); padding-top: 8px; }
.jsam-trend-nominee-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 0; font-size: 12px; }
.jsam-trend-nominee-name { flex: 1; min-width: 70px; font-weight: 600; color: var(--jsam-text, #f0f2ff); }
.jsam-trend-nominee-odds { color: var(--jsam-gold, #f5c518); font-weight: 700; font-size: 11px; }
.jsam-trend-bet-form { display: flex; gap: 4px; }
.jsam-trend-bet-form .jsam-stake { width: 70px; padding: 4px 6px; font-size: 11px; border-radius: 6px; border: 1px solid var(--jsam-border, #2a2f4e); background: var(--jsam-surface-2, #1a1e35); color: var(--jsam-text, #f0f2ff); }
.jsam-trend-bet-form .jsam-bet-btn { padding: 4px 10px; font-size: 11px; border-radius: 6px; border: none; background: var(--jsam-green, #00c853); color: #06210f; font-weight: 800; cursor: pointer; }
.jsam-trend-more-link { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--jsam-text-2, #a8b3cf); text-decoration: none; }
.jsam-trend-more-link:hover { color: var(--jsam-gold, #f5c518); }

/* ── Homepage: Promotions ────────────────────────────────────────── */
.jsam-promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; }
.jsam-promo-card {
    display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px;
    text-decoration: none; color: #fff; min-height: 100px; justify-content: center;
}
.jsam-promo-card strong { font-family: 'Sora', sans-serif; font-size: 15px; }
.jsam-promo-card span:last-child { font-size: 12px; opacity: .85; }
.jsam-promo-tag { align-self: flex-start; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.jsam-promo-welcome  { background: linear-gradient(135deg, #6d28d9, #4a1d96); }
.jsam-promo-referral { background: linear-gradient(135deg, #f5c518, #c49a10); color: #14140c; }
.jsam-promo-referral span, .jsam-promo-referral .jsam-promo-tag { color: #14140c; }
.jsam-promo-daily    { background: linear-gradient(135deg, #00c853, #009e42); }
.jsam-promo-weekly   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

/* ── Category archive page ───────────────────────────────────────── */
.jsam-cat-archive { max-width: 1100px; margin: 0 auto; padding: 0 16px 60px; color: var(--jsam-text, #f0f2ff); font-family: 'Inter', sans-serif; }
.jsam-cat-hero {
    background-color: var(--jsam-surface, #13162a); background-size: cover; background-position: center;
    border-radius: 18px; margin-top: 20px; position: relative; overflow: hidden;
}
.jsam-cat-hero-overlay { background: linear-gradient(135deg, rgba(74,29,150,.55), rgba(11,13,23,.85)); padding: 40px 24px; }
.jsam-cat-crumbs { font-size: 12px; color: var(--jsam-text-2, #a8b3cf); margin-bottom: 10px; }
.jsam-cat-crumbs a { color: var(--jsam-text-2, #a8b3cf); text-decoration: none; }
.jsam-cat-hero h1 { font-family: 'Sora', sans-serif; font-size: 30px; margin: 0; display: flex; align-items: center; gap: 10px; }

.jsam-cat-subnav-wrap { overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; }
.jsam-cat-subnav { display: flex; gap: 8px; padding-bottom: 4px; }
.jsam-cat-chip {
    flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: var(--jsam-surface, #13162a);
    border: 1px solid var(--jsam-border, #2a2f4e); color: var(--jsam-text-2, #a8b3cf); text-decoration: none; font-size: 13px; font-weight: 600;
    white-space: nowrap;
}
.jsam-cat-chip.active, .jsam-cat-chip:hover { background: var(--jsam-purple-2, #6d28d9); color: #fff; border-color: transparent; }

.jsam-cat-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 16px; }
.jsam-cat-event-card { background: var(--jsam-surface, #13162a); border: 1px solid var(--jsam-border, #2a2f4e); border-radius: 16px; overflow: hidden; }
.jsam-cat-event-img { height: 140px; background-size: cover; background-position: center; }
.jsam-cat-event-body { padding: 16px; }
.jsam-cat-event-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.jsam-cat-event-top h3 { margin: 0; font-family: 'Sora', sans-serif; font-size: 16px; }
.jsam-cat-closed-tag { background: rgba(239,68,68,.15); color: var(--jsam-red, #ef4444); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.jsam-cat-participants { font-size: 12px; color: var(--jsam-text-muted, #6b7499); margin: 6px 0 12px; }
.jsam-cat-round-label { font-size: 11px; text-transform: uppercase; color: var(--jsam-text-muted, #6b7499); margin: 10px 0 4px; }
.jsam-cat-nominee-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--jsam-border, #2a2f4e); flex-wrap: wrap; }
.jsam-cat-nominee-row.is-closed { opacity: .55; }
.jsam-cat-nominee-name { flex: 1; font-size: 13px; font-weight: 600; min-width: 90px; }
.jsam-cat-nominee-odds { font-size: 12px; color: var(--jsam-gold, #f5c518); font-weight: 700; }
.jsam-cat-closed-tag-sm { font-size: 11px; color: var(--jsam-text-muted, #6b7499); }
.jsam-cat-empty { grid-column: 1/-1; text-align: center; padding: 50px 20px; color: var(--jsam-text-2, #a8b3cf); }
.jsam-cat-browse-all-btn { display: inline-block; margin-top: 14px; padding: 10px 20px; background: var(--jsam-purple-2, #6d28d9); color: #fff; border-radius: 10px; text-decoration: none; font-weight: 700; }

.jsam-cat-gaming-panel { grid-column: 1/-1; }
.jsam-cat-gaming-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; margin-top: 14px; }
.jsam-cat-gaming-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--jsam-surface, #13162a); border: 1px solid var(--jsam-border, #2a2f4e); border-radius: 14px; text-decoration: none; color: var(--jsam-text, #f0f2ff); }
.jsam-cat-gaming-card .dashicons { font-size: 28px; width: 28px; height: 28px; color: var(--jsam-gold, #f5c518); }
.jsam-cat-gaming-card span:last-child { font-size: 12px; color: var(--jsam-text-muted, #6b7499); }

/* ── Explore page ─────────────────────────────────────────────────── */
.jsam-explore-page, .jsam-promo-page-wrap { max-width: 1000px; margin: 30px auto 60px; padding: 0 16px; color: var(--jsam-text, #f0f2ff); font-family: 'Inter', sans-serif; }
.jsam-explore-title { font-family: 'Sora', sans-serif; font-size: 26px; margin-bottom: 4px; }
.jsam-explore-sub { color: var(--jsam-text-muted, #6b7499); margin-bottom: 24px; }
.jsam-explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.jsam-explore-card { background: var(--jsam-surface, #13162a); border: 1px solid var(--jsam-border, #2a2f4e); border-radius: 14px; padding: 16px; }
.jsam-explore-card-main { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--jsam-text, #f0f2ff); font-family: 'Sora', sans-serif; font-weight: 700; }
.jsam-explore-card-main .dashicons { color: var(--jsam-gold, #f5c518); font-size: 22px; }
.jsam-explore-subs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.jsam-explore-subs a { font-size: 12px; color: var(--jsam-text-2, #a8b3cf); text-decoration: none; border-bottom: 1px dotted var(--jsam-border-2, #353b60); }

/* ── Bottom nav (mobile) ──────────────────────────────────────────── */
.jsam-bottom-nav {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: var(--jsam-surface, #13162a); border-top: 1px solid var(--jsam-border, #2a2f4e);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
}
.jsam-bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--jsam-text-muted, #6b7499); text-decoration: none; flex: 1; padding: 4px 0; }
.jsam-bn-item .dashicons { font-size: 20px; width: 20px; height: 20px; }
.jsam-bn-label { font-size: 10px; font-weight: 600; }
.jsam-bn-item.active { color: var(--jsam-gold, #f5c518); }

@media (max-width: 782px) {
    .jsam-bottom-nav { display: flex; }
    body { padding-bottom: 58px; }
}

/* ── Live activity widget ────────────────────────────────────────── */
.jsam-live-activity {
    position: fixed; left: 14px; bottom: 14px; z-index: 9997;
    max-width: 280px; background: rgba(19,22,42,.94); border: 1px solid var(--jsam-border, #2a2f4e);
    border-radius: 10px; padding: 9px 12px; font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--jsam-text-2, #a8b3cf); display: none; align-items: center; gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.4); opacity: 0; transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}
.jsam-live-activity.jsam-la-show { display: flex; opacity: 1; transform: translateY(0); }
.jsam-live-activity .jsam-la-icon { font-size: 15px; }

@media (max-width: 782px) {
    .jsam-live-activity { bottom: 66px; left: 10px; max-width: 220px; font-size: 11px; }
}