/* ═══════════════════════════════════════════════════════════
   WK 2026 Poule – Stylesheet
   Thema: Oranje/groen voetbal, clean & modern
   ═══════════════════════════════════════════════════════════ */

/* ── Elementor Global Color/Typography bridge ──────────────
   Elementor slaat global colors op als --e-global-color-*
   en typography als --e-global-typography-*-font-family.
   Wij lezen die uit en vallen terug op eigen defaults als
   Elementor niet actief is of de variabele niet bestaat.
   Je kunt alles overschrijven via:
     Elementor → Site Settings → Global Colors / Typography
   ─────────────────────────────────────────────────────── */
:root {
  /* Primaire kleur  → Elementor "Accent" of eigen oranje */
  --wk-orange:  var(--e-global-color-accent,   #FF6600);
  --wk-orange2: var(--e-global-color-accent,   #FF8533);

  /* Secundaire kleur → Elementor "Secondary" of eigen groen */
  --wk-green:   var(--e-global-color-secondary, #00843D);
  --wk-green2:  var(--e-global-color-secondary, #00A84F);

  /* Tekst → Elementor "Text" of eigen donkerblauw */
  --wk-text:    var(--e-global-color-text,      #222244);

  /* Header achtergrond → Elementor "Primary" of eigen donker */
  --wk-dark:    var(--e-global-color-primary,   #1A1A2E);
  --wk-mid:     var(--e-global-color-primary,   #2D2D44);

  /* Typografie → Elementor "Primary" font of system-ui */
  --wk-font:    var(--e-global-typography-primary-font-family,
                var(--e-global-typography-text-font-family,
                'Segoe UI', system-ui, sans-serif));

  /* Vaste waarden (ook te overschrijven via Elementor Custom CSS) */
  --wk-gold:    #FFD700;
  --wk-light:   #F4F6F8;
  --wk-white:   #FFFFFF;
  --wk-muted:   #6B7280;
  --wk-border:  #E2E8F0;
  --wk-radius:  12px;
  --wk-shadow:  0 4px 20px rgba(0,0,0,.12);
}

/* ── Base ─────────────────────────────────────────────────── */
.wk2026-card {
  background: var(--wk-white);
  border-radius: var(--wk-radius);
  box-shadow: var(--wk-shadow);
  overflow: hidden;
  margin: 24px 0;
  font-family: var(--wk-font);
}

/* Alle plugin-elementen erven het Elementor-lettertype */
.wk2026-card *, .wk2026-schema * {
  font-family: var(--wk-font);
}

.wk2026-card-header {
  background: linear-gradient(135deg, var(--wk-dark) 0%, var(--wk-mid) 100%);
  color: var(--wk-white);
  padding: 32px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wk2026-card-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L55 20 L55 40 L30 55 L5 40 L5 20 Z' fill='none' stroke='rgba(255,255,255,.05)' stroke-width='1'/%3E%3C/svg%3E") repeat;
}

.wk2026-trophy { font-size: 3em; display: block; margin-bottom: 8px; }

.wk2026-card-header h2 {
  margin: 0 0 8px;
  font-size: 1.8em;
  font-weight: 800;
  letter-spacing: -0.5px;
  position: relative;
}

.wk2026-card-header p {
  margin: 0;
  opacity: .85;
  font-size: 1.05em;
  position: relative;
}

.wk2026-card-body { padding: 32px 40px; }

/* ── Info bar ─────────────────────────────────────────────── */
.wk2026-info-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.wk2026-info-item {
  flex: 1 1 auto;
  background: var(--wk-light);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .95em;
  color: var(--wk-text);
  text-align: center;
  font-weight: 600;
}

/* ── Puntensysteem ────────────────────────────────────────── */
.wk2026-puntensysteem {
  background: linear-gradient(135deg, #fff7ed, #fef9ee);
  border: 2px solid #fed7aa;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.wk2026-puntensysteem h3 { margin: 0 0 12px; color: var(--wk-orange); font-size: 1em; }

.wk2026-punten-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wk2026-punt-item {
  flex: 1 1 auto;
  background: white;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  border: 1px solid #fed7aa;
}
.wk2026-punt-item strong { display: block; color: var(--wk-orange); font-size: 1.1em; }
.wk2026-punt-item span   { font-size: .82em; color: var(--wk-muted); }

/* ── Form ─────────────────────────────────────────────────── */
.wk2026-form { display: flex; flex-direction: column; gap: 16px; }

.wk2026-form-group { display: flex; flex-direction: column; gap: 6px; }

.wk2026-form-group label {
  font-weight: 700;
  font-size: .92em;
  color: var(--wk-text);
  letter-spacing: .3px;
}

.wk2026-form-group input {
  padding: 12px 16px;
  border: 2px solid var(--wk-border);
  border-radius: 8px;
  font-size: 1em;
  transition: border-color .2s;
  outline: none;
}
.wk2026-form-group input:focus { border-color: var(--wk-orange); }

/* ── Buttons ─────────────────────────────────────────────── */
.wk2026-btn {
  background: linear-gradient(135deg, var(--wk-orange), var(--wk-orange2));
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 1.05em;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 15px rgba(255,102,0,.35);
  margin-top: 8px;
}
.wk2026-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,102,0,.45); }
.wk2026-btn:active { transform: translateY(0); }

.wk2026-btn-large { width: 100%; padding: 16px; font-size: 1.1em; }

/* ── Messages ────────────────────────────────────────────── */
.wk2026-msg {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  font-weight: 600;
}
.wk2026-msg.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.wk2026-msg.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Schema (wedstrijdoverzicht) ─────────────────────────── */
.wk2026-schema { font-family: var(--wk-font); }

.wk2026-schema-header {
  text-align: center;
  padding: 32px 20px 16px;
  background: linear-gradient(135deg, var(--wk-dark), var(--wk-mid));
  color: white;
  border-radius: var(--wk-radius) var(--wk-radius) 0 0;
}
.wk2026-schema-header h2 { margin: 0 0 6px; font-size: 1.8em; font-weight: 800; }
.wk2026-schema-header p  { margin: 0; opacity: .8; }

/* Tabs */
.wk2026-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 20px;
  background: var(--wk-dark);
  border-bottom: 2px solid var(--wk-orange);
}

.wk2026-tab {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: .87em;
  font-weight: 600;
  transition: all .2s;
}
.wk2026-tab.active,
.wk2026-tab:hover { background: var(--wk-orange); color: white; }

.wk2026-groep-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 20px;
  background: #16213E;
}
.wk2026-groep-tab {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: .82em;
  font-weight: 600;
  transition: all .15s;
}
.wk2026-groep-tab.active,
.wk2026-groep-tab:hover { background: var(--wk-green); color: white; }

/* Match grid */
.wk2026-matches-container { padding: 24px; background: var(--wk-light); }

.wk2026-fase-title {
  font-size: 1.1em;
  font-weight: 800;
  color: var(--wk-dark);
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--wk-orange);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk2026-fase-title:first-child { margin-top: 0; }

.wk2026-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.wk2026-match {
  background: white;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border-left: 4px solid var(--wk-green);
  transition: transform .15s, box-shadow .15s;
}
.wk2026-match:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.wk2026-match.gespeeld { border-left-color: var(--wk-muted); opacity: .85; }

.wk2026-match-date {
  font-size: .78em;
  color: var(--wk-muted);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.wk2026-match-teams {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.team-thuis { flex: 1; font-weight: 700; font-size: .95em; }
.team-uit   { flex: 1; font-weight: 700; font-size: .95em; text-align: right; }

.wk2026-vs {
  background: var(--wk-light);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .85em;
  white-space: nowrap;
}
.wk2026-score { font-size: 1.05em; color: var(--wk-orange); }

.wk2026-match-meta {
  font-size: .75em;
  color: var(--wk-muted);
}

/* ── Voorspellingen ──────────────────────────────────────── */
.wk2026-voorspellingen .wk2026-card-body { padding: 24px; }

.wk2026-pred-fase {
  margin-bottom: 24px;
}
.wk2026-pred-fase h3 {
  font-size: 1em;
  font-weight: 800;
  color: var(--wk-dark);
  padding: 8px 14px;
  background: var(--wk-light);
  border-radius: 6px;
  border-left: 4px solid var(--wk-orange);
  margin: 0 0 8px;
}

.wk2026-pred-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wk-border);
}
.wk2026-pred-row:last-child { border-bottom: none; }
.wk2026-pred-row.locked { opacity: .6; }

.wk2026-pred-match {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wk2026-pred-match small { font-size: .75em; color: var(--wk-muted); }

.wk2026-pred-scores {
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-input {
  width: 52px;
  padding: 6px 8px;
  border: 2px solid var(--wk-border);
  border-radius: 6px;
  text-align: center;
  font-size: .95em;
  font-weight: 700;
  outline: none;
  transition: border-color .2s;
}
.score-input:focus { border-color: var(--wk-orange); }

.wk2026-dash { font-weight: 700; color: var(--wk-muted); }
.wk2026-result { font-weight: 800; color: var(--wk-dark); padding: 0 6px; }

.wk2026-pred-result {
  font-size: .8em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}
.wk2026-pred-result.exact  { background: #d1fae5; color: #065f46; }
.wk2026-pred-result.goed   { background: #dbeafe; color: #1e40af; }
.wk2026-pred-result.fout   { background: #fee2e2; color: #991b1b; }

.wk2026-submit-area { margin-top: 28px; text-align: center; }

/* ── Klassement ──────────────────────────────────────────── */
.wk2026-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95em;
}
.wk2026-table th {
  background: var(--wk-dark);
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-size: .85em;
  letter-spacing: .5px;
}
.wk2026-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wk-border);
}
.wk2026-table tr:last-child td { border-bottom: none; }
.wk2026-table .rank { font-size: 1.2em; }

.rank-gold   td { background: linear-gradient(90deg, #fffbeb, white); }
.rank-silver td { background: linear-gradient(90deg, #f8fafc, white); }
.rank-bronze td { background: linear-gradient(90deg, #fff7ed, white); }

.wk2026-empty { color: var(--wk-muted); text-align: center; padding: 24px; font-style: italic; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .wk2026-card-body { padding: 20px; }
  .wk2026-card-header { padding: 24px 20px; }
  .wk2026-match-grid { grid-template-columns: 1fr; }
  .wk2026-info-bar { flex-direction: column; }
  .wk2026-pred-row { flex-direction: column; align-items: flex-start; }
  .wk2026-punten-grid { flex-direction: column; }
}