/* ============================================================
   World Cup Over 2.5 AI — Frontend styles
   ============================================================ */
.wcop25-wrapper { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 1200px; margin: 2em auto; }
.wcop25-header { text-align: center; margin-bottom: 1.5em; }
.wcop25-title { font-size: 1.85em; margin: 0 0 0.25em; color: #1e3a8a; }
.wcop25-subtitle { color: #6b7280; font-size: 0.95em; margin: 0; }

.wcop25-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

.wcop25-card {
    background: linear-gradient(140deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.04);
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wcop25-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.wcop25-conf-high   { border-top: 4px solid #16a34a; }
.wcop25-conf-medium { border-top: 4px solid #f59e0b; }
.wcop25-conf-low    { border-top: 4px solid #94a3b8; }

.wcop25-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.wcop25-rank      { background: #1e3a8a; color: #fff; font-weight: 700; font-size: 0.85em; padding: 4px 10px; border-radius: 999px; }
.wcop25-confidence{ font-size: 1.6em; font-weight: 800; color: #16a34a; }
.wcop25-conf-medium .wcop25-confidence { color: #d97706; }
.wcop25-conf-low    .wcop25-confidence { color: #475569; }

.wcop25-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 14px; }
.wcop25-team { display: flex; flex-direction: column; align-items: center; flex: 1; font-weight: 600; font-size: 0.95em; text-align: center; color: #1f2937; }
.wcop25-team img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 6px; }
.wcop25-vs { color: #94a3b8; font-weight: 700; font-size: 0.9em; padding: 0 6px; }

.wcop25-meta { font-size: 0.9em; color: #475569; line-height: 1.55; margin-bottom: 12px; }
.wcop25-meta strong { color: #1f2937; }

.wcop25-components { background: #f1f5f9; border-radius: 8px; padding: 10px 12px; font-size: 0.85em; margin-bottom: 10px; }
.wcop25-components > strong { display: block; margin-bottom: 6px; color: #1e3a8a; }
.wcop25-components ul { list-style: none; margin: 0; padding: 0; }
.wcop25-components li { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px dashed #e2e8f0; }
.wcop25-components li:last-child { border-bottom: none; }
.wcop25-comp-label  { color: #334155; flex: 1; }
.wcop25-comp-prob   { color: #16a34a; font-weight: 700; padding: 0 8px; }
.wcop25-comp-weight { color: #94a3b8; font-size: 0.85em; }

.wcop25-explanation { font-size: 0.85em; color: #64748b; font-style: italic; margin: 0; line-height: 1.5; }

.wcop25-empty { text-align: center; padding: 30px 20px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; color: #475569; }
.wcop25-empty p { margin: 0 0 8px; }
.wcop25-error-details { margin-top: 10px; text-align: left; font-size: 0.85em; }
.wcop25-error-details ul { margin: 6px 0 0 18px; padding: 0; }

.wcop25-disclaimer { text-align: center; font-size: 0.8em; color: #94a3b8; margin-top: 18px; font-style: italic; }

/* Upcoming table */
.wcop25-upcoming-table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.95em; }
.wcop25-upcoming-table th, .wcop25-upcoming-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
.wcop25-upcoming-table thead { background: #1e3a8a; color: #fff; }
.wcop25-upcoming-table tbody tr:hover { background: #f8fafc; }

@media (max-width: 600px) {
    .wcop25-grid { grid-template-columns: 1fr; }
    .wcop25-team img { width: 36px; height: 36px; }
    .wcop25-confidence { font-size: 1.3em; }
}