/**
 * Tips Frontend Styles - Clean Professional Design
 * Inspired by FST Tips, SkyBet, and modern betting sites
 */

/* =========================
   CSS VARIABLES (Theme Integration)
   ========================= */

:root {
    /* Plugin variables - reference theme --tg-* variables with fallback defaults */
    --fb-primary: var(--tg-primary, #1a7ee6);
    --fb-secondary: var(--tg-secondary, #0f172a);
    --fb-accent-green: var(--tg-accent-green, #10b981);
    --fb-accent-orange: var(--tg-accent-orange, #f97316);
    --fb-accent-red: var(--tg-accent-red, #ef4444);
    --fb-accent-yellow: var(--tg-accent-yellow, #eab308);
    --fb-bg-white: var(--tg-bg-white, #ffffff);
    --fb-bg-light: var(--tg-bg-light, #f8fafc);
    --fb-bg-gray: var(--tg-bg-gray, #f1f5f9);
    --fb-text-primary: var(--tg-text-primary, #0f172a);
    --fb-text-secondary: var(--tg-text-secondary, #475569);
    --fb-text-muted: var(--tg-text-muted, #94a3b8);
    --fb-border-color: var(--tg-border-color, #e2e8f0);
}

/* =========================
   RESET & CONTAINER
   ========================= */

.footbet-tips-container,
.footbet-predictions-container {
    display: grid;
    gap: 20px;
}

.footbet-style-card {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.footbet-style-list,
.footbet-style-compact {
    grid-template-columns: 1fr;
    max-width: 600px;
}

.footbet-no-results {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
}

/* =========================
   TIP CARD - FST TIPS STYLE
   ========================= */

.footbet-tip-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.footbet-tip-card .fb-tip-result-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 1;
}

.fb-tip-result-badge.fb-result-win {
    background: #dcfce7;
    color: #166534;
}

.fb-tip-result-badge.fb-result-loss {
    background: #fee2e2;
    color: #991b1b;
}

.fb-tip-result-badge.fb-result-void {
    background: #fef3c7;
    color: #92400e;
}

/* Card Header */
.footbet-tip-card .fb-tip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--fb-primary);
    color: #fff;
    font-size: 12px;
}

.footbet-tip-card .fb-tip-league {
    font-weight: 600;
}

.footbet-tip-card .fb-tip-date {
    opacity: 0.85;
    font-size: 11px;
}

/* Card Match */
.footbet-tip-card .fb-tip-match {
    padding: 16px;
}

.footbet-tip-card .fb-tip-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footbet-tip-card .fb-team-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.footbet-tip-card .fb-team-name {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

.footbet-tip-card .fb-vs {
    color: #9ca3af;
    font-size: 12px;
    margin: 0 4px;
}

/* Card Selection */
.footbet-tip-card .fb-tip-selection {
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    background: #f9fafb;
}

.footbet-tip-card .fb-selection-market {
    font-size: 10px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.footbet-tip-card .fb-selection-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--fb-secondary);
}

/* Card Footer - Clean layout like FST Tips */
.footbet-tip-card .fb-tip-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}

.footbet-tip-card .fb-tip-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Odds Badge - Border style like FST */
.footbet-tip-card .fb-tip-odds-badge {
    display: inline-block;
    padding: 6px 12px;
    border: 2px solid var(--fb-primary);
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    color: var(--fb-primary);
}

/* Reasoning Button - Like FST Tips */
.fb-tip-reasoning-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    color: #6b7280;
    font-size: 13px;
    transition: color 0.2s;
}

.fb-tip-reasoning-btn:hover {
    color: #374151;
}

.fb-tip-reasoning-btn .fb-reasoning-text {
    font-weight: 500;
}

.fb-tip-reasoning-btn .fb-reasoning-chevron {
    font-size: 12px;
    transition: transform 0.2s;
}

.footbet-tip-card.expanded .fb-tip-reasoning-btn .fb-reasoning-chevron {
    transform: rotate(180deg);
}

/* PLACE BET Button - Clean solid style */
.fb-tip-place-bet-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: filter 0.2s, transform 0.1s;
}

.fb-tip-place-bet-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff !important;
}

/* Reasoning Panel - HIDDEN by default */
.fb-tip-reasoning-panel {
    display: none;
    padding: 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.footbet-tip-card.expanded .fb-tip-reasoning-panel {
    display: block;
}

.fb-tip-reasoning-panel p {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
}

/* =========================
   TIP LIST ITEM - FST STYLE
   ========================= */

.footbet-tip-list-item {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.footbet-tip-list-item .fb-list-item-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    gap: 16px;
}

.footbet-tip-list-item .fb-list-item-info {
    flex: 1;
}

.footbet-tip-list-item .fb-list-item-title {
    font-weight: 700;
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 4px;
}

.footbet-tip-list-item .fb-list-item-match {
    font-size: 13px;
    color: #6b7280;
}

/* List Reasoning Button */
.fb-list-reasoning-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    color: #6b7280;
    font-size: 13px;
    white-space: nowrap;
}

.fb-list-reasoning-btn:hover {
    color: #374151;
}

.fb-list-reasoning-btn .fb-chevron {
    font-size: 11px;
    transition: transform 0.2s;
}

.footbet-tip-list-item.expanded .fb-list-reasoning-btn .fb-chevron {
    transform: rotate(180deg);
}

/* List Footer */
.footbet-tip-list-item .fb-list-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.footbet-tip-list-item .fb-list-odds-badge {
    display: inline-block;
    padding: 4px 10px;
    border: 2px solid var(--fb-primary);
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    color: var(--fb-primary);
}

.fb-list-place-bet-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: filter 0.2s;
}

.fb-list-place-bet-btn:hover {
    filter: brightness(1.1);
    color: #fff !important;
}

/* List Reasoning Panel - HIDDEN */
.fb-list-reasoning-panel {
    display: none;
    padding: 16px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.footbet-tip-list-item.expanded .fb-list-reasoning-panel {
    display: block;
}

.fb-list-reasoning-panel p {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
}

/* =========================
   TIP COMPACT - SKYBET STYLE
   ========================= */

.footbet-tip-compact {
    background: #f0f4f8;
    border-radius: 12px;
    overflow: hidden;
}

.footbet-tip-compact .fb-compact-header {
    background: var(--fb-primary);
    padding: 10px 16px;
}

.footbet-tip-compact .fb-compact-label {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}

.footbet-tip-compact .fb-compact-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

.footbet-tip-compact .fb-compact-content {
    flex: 1;
}

.footbet-tip-compact .fb-compact-tip {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 2px;
}

.footbet-tip-compact .fb-compact-match {
    font-size: 12px;
    color: #6b7280;
}

.fb-compact-bet-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: filter 0.2s;
}

.fb-compact-bet-btn:hover {
    filter: brightness(1.1);
    color: #fff !important;
}

/* Compact Reasoning */
.footbet-tip-compact .fb-compact-reasoning {
    border-top: 1px solid #e5e7eb;
}

.fb-compact-reasoning-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 13px;
}

.fb-compact-reasoning-btn:hover {
    color: #374151;
}

.fb-compact-reasoning-btn .fb-chevron {
    font-size: 11px;
    transition: transform 0.2s;
}

.footbet-tip-compact.expanded .fb-compact-reasoning-btn .fb-chevron {
    transform: rotate(180deg);
}

/* Compact Reasoning Panel - HIDDEN */
.fb-compact-reasoning-panel {
    display: none;
    padding: 0 16px 16px;
}

.footbet-tip-compact.expanded .fb-compact-reasoning-panel {
    display: block;
}

.fb-compact-reasoning-panel p {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
}

/* =========================
   TIP TABLE STYLE
   ========================= */

.footbet-tips-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.footbet-tips-table thead {
    background: var(--fb-primary);
    color: #fff;
}

.footbet-tips-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footbet-tips-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
}

.footbet-tips-table tr:last-child td {
    border-bottom: none;
}

.footbet-tips-table tbody tr:hover {
    background: #f9fafb;
}

.footbet-tips-table thead tr:hover {
    background: var(--fb-primary);
}

.footbet-tips-table .bet-cell {
    text-align: center;
}

.fb-table-bet-button {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    transition: filter 0.2s;
}

.fb-table-bet-button:hover {
    filter: brightness(1.1);
    color: #fff !important;
}

/* Table Reasoning Toggle */
.fb-table-reasoning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: #0d9488;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.fb-table-reasoning-toggle:hover {
    background: rgba(13, 148, 136, 0.1);
}

.fb-table-reasoning-toggle .fb-toggle-chevron {
    transition: transform 0.2s;
    font-size: 14px;
}

.fb-tip-data-row.expanded + .fb-tip-reasoning-row .fb-toggle-chevron,
.fb-table-reasoning-toggle.active .fb-toggle-chevron {
    transform: rotate(90deg);
}

/* Reasoning Row */
.fb-tip-reasoning-row {
    display: none;
    background: #f9fafb;
}

.fb-tip-reasoning-row.visible {
    display: table-row;
}

.fb-table-reasoning-content {
    padding: 12px 16px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    border-left: 3px solid #0d9488;
    margin: 8px 0;
    background: #fff;
    border-radius: 0 4px 4px 0;
}

/* =========================
   PICK OF THE DAY
   ========================= */

.footbet-pick-of-day {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 2px solid var(--fb-accent-green);
    grid-column: 1 / -1;
}

/* Header bar - green gradient */
.footbet-pick-of-day .fb-pick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fb-accent-green) 80%, black) 0%, var(--fb-accent-green) 100%);
    color: #fff;
}

.footbet-pick-of-day .fb-pick-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footbet-pick-of-day .fb-pick-star {
    font-size: 20px;
    color: var(--fb-accent-yellow);
}

.footbet-pick-of-day .fb-pick-badge {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.footbet-pick-of-day .fb-pick-header-odds {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

/* Body - tip info row */
.footbet-pick-of-day .fb-pick-body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--fb-bg-white);
}

.footbet-pick-of-day .fb-pick-time-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    background: var(--fb-bg-gray);
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 56px;
}

.footbet-pick-of-day .fb-pick-time {
    font-size: 18px;
    font-weight: 700;
    color: var(--fb-text-primary);
    line-height: 1;
}

.footbet-pick-of-day .fb-pick-day {
    font-size: 11px;
    font-weight: 600;
    color: var(--fb-primary);
    margin-top: 2px;
}

.footbet-pick-of-day .fb-pick-info-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.footbet-pick-of-day .fb-pick-market {
    font-size: 11px;
    font-weight: 700;
    color: var(--fb-primary);
    letter-spacing: 0.5px;
}

.footbet-pick-of-day .fb-pick-tip-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--fb-text-primary);
    line-height: 1.3;
}

.footbet-pick-of-day .fb-pick-vs-text {
    font-weight: 400;
    font-size: 14px;
    color: var(--fb-text-secondary);
    display: block;
}

.footbet-pick-of-day .fb-pick-league {
    font-size: 12px;
    color: var(--fb-text-muted);
}

.footbet-pick-of-day .fb-pick-odds-col {
    flex: 0 0 auto;
}

.footbet-pick-of-day .fb-pick-odds-badge {
    display: inline-block;
    background: var(--fb-accent-green);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 8px;
}

/* Reasoning toggle bar */
.footbet-pick-of-day .fb-pick-toggle-bar {
    border-top: 1px solid var(--fb-border-color);
    padding: 0 24px;
}

.footbet-pick-of-day .fb-pick-reasoning-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 0;
    color: var(--fb-text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.footbet-pick-of-day .fb-pick-reasoning-btn:hover {
    color: var(--fb-text-secondary);
}

.footbet-pick-of-day .fb-pick-chevron {
    font-size: 14px;
    transition: transform 0.2s;
}

.footbet-pick-of-day.expanded .fb-pick-chevron {
    transform: rotate(180deg);
}

/* Reasoning panel - hidden by default */
.footbet-pick-of-day .fb-pick-reasoning-panel {
    display: none;
    padding: 14px 24px;
    background: var(--fb-bg-light);
    border-top: 1px solid var(--fb-border-color);
}

.footbet-pick-of-day.expanded .fb-pick-reasoning-panel {
    display: block;
}

.footbet-pick-of-day .fb-pick-analysis-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--fb-text-muted);
    margin-bottom: 6px;
}

.footbet-pick-of-day .fb-pick-analysis-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fb-text-secondary);
}

/* Footer with CTA */
.footbet-pick-of-day .fb-pick-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--fb-bg-white);
    border-top: 1px solid var(--fb-border-color);
}

.fb-pick-cta-button {
    flex: 1;
    display: block;
    padding: 14px 24px;
    border-radius: 8px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fb-pick-cta-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff !important;
    text-decoration: none !important;
}

/* =========================
   FEATURED STYLE — Grouped tips block
   ========================= */

.fb-featured-block {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 2px solid var(--fb-primary);
}

.fb-featured-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fb-primary) 85%, black) 0%, var(--fb-primary) 100%);
    color: #fff;
}

.fb-featured-star {
    font-size: 20px;
    color: var(--fb-accent-yellow);
}

.fb-featured-title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.fb-featured-body {
    background: var(--fb-bg-white);
}

.fb-featured-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--fb-border-color);
    position: relative;
}

.fb-featured-row:last-child {
    border-bottom: none;
}

.fb-featured-result-dot {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.fb-featured-result-dot.result-won { background: var(--fb-accent-green); }
.fb-featured-result-dot.result-lost { background: var(--fb-accent-red); }
.fb-featured-result-dot.result-void { background: var(--fb-accent-yellow); }

.fb-featured-time-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    background: var(--fb-bg-gray);
    border-radius: 8px;
    padding: 6px 12px;
    min-width: 50px;
}

.fb-featured-time {
    font-size: 16px;
    font-weight: 700;
    color: var(--fb-text-primary);
    line-height: 1;
}

.fb-featured-day {
    font-size: 10px;
    font-weight: 600;
    color: var(--fb-primary);
    margin-top: 2px;
}

.fb-featured-info-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.fb-featured-market {
    font-size: 10px;
    font-weight: 700;
    color: var(--fb-primary);
    letter-spacing: 0.5px;
}

.fb-featured-tip-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--fb-text-primary);
    line-height: 1.3;
}

.fb-featured-vs {
    font-weight: 400;
    font-size: 13px;
    color: var(--fb-text-secondary);
    display: block;
}

.fb-featured-league {
    font-size: 11px;
    color: var(--fb-text-muted);
}

.fb-featured-odds-col {
    flex: 0 0 auto;
}

.fb-featured-odds-badge {
    display: inline-block;
    background: var(--fb-accent-green);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: opacity 0.2s;
}

a.fb-featured-odds-badge:hover {
    opacity: 0.85;
    color: #fff !important;
    text-decoration: none !important;
}

/* Won/Lost row states */
.fb-featured-row.result-won {
    background: rgba(16, 185, 129, 0.04);
}

.fb-featured-row.result-lost {
    opacity: 0.6;
}

.footbet-pick-empty {
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: #6b7280;
}

/* =========================
   STATS BOX
   ========================= */

.footbet-stats-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.footbet-stats-box .fb-stats-header {
    background: var(--fb-primary);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footbet-stats-box .fb-stats-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.footbet-stats-box .fb-stats-category {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
}

.footbet-stats-box .fb-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #e5e7eb;
}

.footbet-stats-box .fb-stat-item {
    background: #fff;
    padding: 20px;
    text-align: center;
}

.footbet-stats-box .fb-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--fb-secondary);
}

.footbet-stats-box .fb-stat-label {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

.footbet-stats-box .fb-stat-win .fb-stat-value {
    color: #059669;
}

.footbet-stats-box .fb-stat-loss .fb-stat-value {
    color: #dc2626;
}

.footbet-stats-box .fb-stat-pending .fb-stat-value {
    color: #f59e0b;
}

.footbet-stats-box .fb-stats-metrics {
    display: flex;
    justify-content: space-around;
    padding: 16px 20px;
    background: #f9fafb;
}

.footbet-stats-box .fb-metric-item {
    text-align: center;
}

.footbet-stats-box .fb-metric-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
}

.footbet-stats-box .fb-metric-value {
    font-size: 16px;
    font-weight: 700;
}

.footbet-stats-box .fb-metric-value.positive {
    color: #059669;
}

.footbet-stats-box .fb-metric-value.negative {
    color: #dc2626;
}

/* =========================
   ACCUMULATOR
   ========================= */

.footbet-accumulator {
    background: var(--fb-bg-white, #ffffff);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid var(--fb-border-color, #e2e8f0);
}

/* Header */
.footbet-accumulator .fb-acc-header {
    background: linear-gradient(135deg, var(--fb-primary, #1a7ee6) 0%, color-mix(in srgb, var(--fb-primary, #1a7ee6) 70%, #60a5fa) 100%);
    color: #fff;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footbet-accumulator .fb-acc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footbet-accumulator .fb-acc-icon {
    font-size: 20px;
    line-height: 1;
}

.footbet-accumulator .fb-acc-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.footbet-accumulator .fb-acc-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* Body */
.footbet-accumulator .fb-acc-body {
    padding: 0;
}

/* Tip block (row + optional reasoning) */
.footbet-accumulator .fb-acc-tip-block {
    border-bottom: 1px solid var(--fb-border-color, #e2e8f0);
}

.footbet-accumulator .fb-acc-tip-block:last-child {
    border-bottom: none;
}

/* Tip row */
.footbet-accumulator .fb-acc-row {
    display: flex;
    align-items: center;
    padding: 16px 22px;
    gap: 18px;
}

/* Time column - rounded box */
.footbet-accumulator .fb-acc-time-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    flex-shrink: 0;
    background: var(--fb-bg-gray, #f1f5f9);
    border-radius: 8px;
    padding: 8px 12px;
}

.footbet-accumulator .fb-acc-time {
    font-size: 15px;
    font-weight: 700;
    color: var(--fb-text-primary, #0f172a);
    line-height: 1;
}

.footbet-accumulator .fb-acc-day {
    font-size: 11px;
    color: var(--fb-text-muted, #94a3b8);
    margin-top: 3px;
}

/* Info column */
.footbet-accumulator .fb-acc-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.footbet-accumulator .fb-acc-market {
    font-size: 11px;
    font-weight: 700;
    color: var(--fb-primary, #1a7ee6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footbet-accumulator .fb-acc-tip-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--fb-text-primary, #0f172a);
    line-height: 1.3;
}

.footbet-accumulator .fb-acc-vs {
    font-weight: 400;
    color: var(--fb-text-secondary, #475569);
    font-size: 13px;
}

.footbet-accumulator .fb-acc-league {
    font-size: 11px;
    color: var(--fb-text-muted, #94a3b8);
}

/* Odds badge - pill */
.footbet-accumulator .fb-acc-odds-col {
    flex-shrink: 0;
}

.footbet-accumulator .fb-acc-odds-badge {
    display: inline-block;
    background: var(--fb-accent-green, #10b981);
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    min-width: 52px;
    text-align: center;
}

/* Reasoning / Analysis per tip */
.footbet-accumulator .fb-acc-reasoning {
    padding: 12px 22px 16px;
    background: var(--fb-bg-light, #f8fafc);
    border-top: 1px solid var(--fb-border-color, #e2e8f0);
}

.footbet-accumulator .fb-acc-reasoning-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--fb-primary, #1a7ee6);
    margin-bottom: 6px;
}

.footbet-accumulator .fb-acc-reasoning-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fb-text-secondary, #475569);
}

/* Footer */
.footbet-accumulator .fb-acc-footer {
    background: var(--fb-bg-gray, #f1f5f9);
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--fb-border-color, #e2e8f0);
}

.footbet-accumulator .fb-acc-footer-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.footbet-accumulator .fb-acc-total,
.footbet-accumulator .fb-acc-return {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.footbet-accumulator .fb-acc-total-label,
.footbet-accumulator .fb-acc-return-label {
    font-size: 12px;
    color: var(--fb-text-secondary, #475569);
    font-weight: 500;
    white-space: nowrap;
}

.footbet-accumulator .fb-acc-total-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--fb-primary, #1a7ee6);
}

.footbet-accumulator .fb-acc-return-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--fb-primary, #1a7ee6);
}

/* CTA Button */
.footbet-accumulator .fb-acc-cta-button {
    display: inline-block;
    background: var(--fb-accent-green, #10b981);
    color: #fff !important;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.footbet-accumulator .fb-acc-cta-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff !important;
    text-decoration: none !important;
}

/* =========================
   MULTIPLE ACCUMULATORS GRID
   ========================= */

.footbet-accumulators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.footbet-accumulators-grid .footbet-accumulator {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .footbet-accumulators-grid {
        grid-template-columns: 1fr;
    }

    .footbet-accumulator .fb-acc-row {
        padding: 14px 16px;
        gap: 12px;
    }

    .footbet-accumulator .fb-acc-header {
        padding: 14px 16px;
    }

    .footbet-accumulator .fb-acc-reasoning {
        padding: 10px 16px 14px;
    }

    .footbet-accumulator .fb-acc-footer {
        padding: 14px 16px;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .footbet-accumulator .fb-acc-footer-stats {
        justify-content: space-between;
    }

    .footbet-accumulator .fb-acc-cta-button {
        text-align: center;
        padding: 12px 24px;
    }

    .footbet-accumulator .fb-acc-time-col {
        min-width: 48px;
        padding: 6px 10px;
    }
}

/* =========================
   PREDICTION CARD
   ========================= */

.footbet-prediction-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
}

.footbet-prediction-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.footbet-prediction-card .fb-prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 12px;
}

.footbet-prediction-card .fb-prediction-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    flex-wrap: wrap;
}

.footbet-prediction-card .fb-team-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.footbet-prediction-card .fb-team-name {
    font-weight: 600;
    font-size: 14px;
}

.footbet-prediction-card .fb-vs {
    color: #9ca3af;
    font-size: 12px;
}

.footbet-prediction-card .fb-prediction-footer {
    padding: 12px 16px;
    background: #f9fafb;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

.footbet-prediction-card .fb-prediction-link {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.footbet-prediction-card .fb-prediction-link:hover {
    text-decoration: underline;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {
    .footbet-style-card {
        grid-template-columns: 1fr;
    }

    .footbet-stats-box .fb-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footbet-stats-box .fb-stats-metrics {
        flex-direction: column;
        gap: 12px;
    }

    .footbet-tip-card .fb-tip-footer {
        flex-direction: column;
        gap: 12px;
    }

    .footbet-tip-card .fb-tip-footer-left {
        width: 100%;
        justify-content: space-between;
    }

    .fb-tip-place-bet-btn {
        width: 100%;
        text-align: center;
    }

    .footbet-tip-list-item .fb-list-item-main {
        flex-direction: column;
        gap: 12px;
    }

    .footbet-tip-compact .fb-compact-body {
        flex-direction: column;
        text-align: center;
    }

    .fb-compact-bet-btn {
        width: 100%;
    }

    .footbet-pick-of-day .fb-pick-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .footbet-pick-of-day .fb-pick-time-col {
        flex-direction: row;
        gap: 8px;
    }

    .footbet-pick-of-day .fb-pick-odds-col {
        align-self: flex-start;
    }

    .fb-pick-cta-button {
        width: 100%;
    }

    .fb-featured-row {
        gap: 10px;
        padding: 12px 16px;
    }

    .fb-featured-tip-text {
        font-size: 14px;
    }

    .fb-featured-odds-badge {
        font-size: 14px;
        padding: 5px 10px;
    }

    .footbet-accumulator .fb-accumulator-footer {
        flex-direction: column;
        gap: 12px;
    }
}

/* =========================
   AFFILIATES LIST SHORTCODE
   ========================= */

.fb-affiliates-list {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.fb-affiliates-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--fb-primary);
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}

.fb-affiliates-header .fb-trophy-icon {
    font-size: 24px;
}

.fb-affiliates-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.fb-affiliate-item {
    display: grid;
    grid-template-columns: auto 150px 1fr auto;
    grid-template-rows: auto auto;
    gap: 16px;
    align-items: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
}

.fb-affiliate-item:first-of-type {
    border-top: 1px solid #e5e7eb;
}

.fb-affiliate-item:last-child {
    border-radius: 0 0 12px 12px;
}

.fb-affiliate-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fb-primary);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
}

.fb-affiliate-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fb-affiliate-logo img {
    max-width: 120px;
    max-height: 50px;
    object-fit: contain;
}

.fb-affiliate-name-placeholder {
    font-weight: 700;
    font-size: 18px;
    color: #1f2937;
}

.fb-affiliate-rating {
    color: var(--fb-accent-yellow);
    font-size: 14px;
}

.fb-affiliate-rating .fb-rating-value {
    color: #6b7280;
    font-size: 12px;
    margin-left: 4px;
}

.fb-affiliate-info {
    text-align: center;
}

.fb-affiliate-offer {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.fb-affiliate-subtitle {
    font-size: 14px;
    color: #6b7280;
}

.fb-affiliate-cta {
    display: flex;
    align-items: center;
}

.fb-affiliate-button {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: filter 0.2s, transform 0.1s;
    white-space: nowrap;
}

.fb-affiliate-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff !important;
}

.fb-affiliate-review-link {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    text-align: center;
    transition: color 0.15s;
}

.fb-affiliate-review-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.fb-affiliate-terms {
    grid-column: 1 / -1;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}

.fb-affiliates-empty {
    text-align: center;
    padding: 40px;
    color: #6b7280;
    font-style: italic;
}

/* Responsive for affiliates */
@media (max-width: 768px) {
    .fb-affiliate-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto auto;
        text-align: center;
    }

    .fb-affiliate-number {
        grid-row: 1;
        grid-column: 1;
    }

    .fb-affiliate-logo {
        grid-row: 1;
        grid-column: 2;
    }

    .fb-affiliate-info {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .fb-affiliate-cta {
        grid-row: 3;
        grid-column: 1 / -1;
        justify-content: center;
    }

    .fb-affiliate-button {
        width: 100%;
        text-align: center;
    }

    .fb-affiliate-terms {
        grid-row: 4;
    }
}