/* De Werven WK Voetbal 2026 - kleurrijker en compacter */
.dwwk-wrap{max-width:1120px;margin:28px auto;font-family:inherit;color:#162033}
.dwwk-wrap,.dwwk-wrap *,.dwwk-wrap *::before,.dwwk-wrap *::after{box-sizing:border-box}
.dwwk-wrap h2,.dwwk-wrap h3,.dwwk-wrap h4{margin:0;color:#162033;letter-spacing:-.02em}
.dwwk-wrap h2{font-size:clamp(28px,3.5vw,42px);line-height:1.04;font-weight:850}
.dwwk-wrap h3{font-size:clamp(20px,2.2vw,28px);line-height:1.1;font-weight:830}
.dwwk-wrap h4{font-size:17px;line-height:1.22;font-weight:760}

.dwwk-dashboard{--dwwk-blue:#18408d;--dwwk-blue-dark:#102e65;--dwwk-cyan:#20c0dd;--dwwk-orange:#f59a23;--dwwk-pink:#ff4d93;--dwwk-green:#2fb673;--dwwk-ink:#162033;--dwwk-muted:#66748c;--dwwk-line:rgba(22,32,51,.10);--dwwk-soft:#f4f7fb;--dwwk-soft-2:#f8fbff;--dwwk-card:#fff;--dwwk-radius:18px}

.dwwk-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:196px;padding:26px 30px;margin-bottom:16px;border-radius:24px;border:1px solid rgba(24,64,141,.16);background:radial-gradient(circle at 92% 18%, rgba(32,192,221,.28), transparent 24%),radial-gradient(circle at 70% 0%, rgba(255,77,147,.12), transparent 20%),linear-gradient(135deg, #2453ab 0%, #18408d 48%, #123168 100%);box-shadow:0 16px 34px rgba(18,46,101,.16);color:#fff}
.dwwk-hero::before{content:"";position:absolute;right:-64px;bottom:-96px;width:250px;height:250px;border-radius:50%;border:30px solid rgba(255,255,255,.10)}
.dwwk-hero::after{content:"";position:absolute;left:0;top:0;width:8px;height:100%;background:linear-gradient(180deg,var(--dwwk-cyan),var(--dwwk-orange) 70%, var(--dwwk-pink))}
.dwwk-hero>*{position:relative;z-index:1}
.dwwk-hero-mark{display:inline-flex;width:max-content;margin:0 0 10px;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.dwwk-kicker{margin:0 0 8px;color:rgba(255,255,255,.86);font-size:13px;font-weight:850;letter-spacing:.10em;text-transform:uppercase}
.dwwk-hero h2{max-width:760px;color:#fff}
.dwwk-hero p:last-child{max-width:790px;margin:10px 0 0;color:rgba(255,255,255,.94);font-size:clamp(16px,1.9vw,21px);line-height:1.32}

.dwwk-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:10px 12px;border:1px solid rgba(24,64,141,.10);border-radius:18px;background:linear-gradient(180deg,#fbfdff,#f5f9ff);box-shadow:0 8px 20px rgba(22,32,51,.04)}
.dwwk-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 13px;border:1px solid rgba(24,64,141,.12);border-radius:999px;background:linear-gradient(180deg,#fff,#f7f9fd);color:var(--dwwk-blue);text-decoration:none!important;font-size:13px;font-weight:800;line-height:1.05;transition:all .18s ease;box-shadow:0 2px 7px rgba(22,32,51,.03)}
.dwwk-tabs a:nth-child(1){background:linear-gradient(180deg,#e8fbff,#dcf7fc);color:#0b6e84}
.dwwk-tabs a:nth-child(2){background:linear-gradient(180deg,#fff5e9,#ffeed8);color:#a45a00}
.dwwk-tabs a:nth-child(3){background:linear-gradient(180deg,#f2efff,#e9e4ff);color:#5c40b1}
.dwwk-tabs a:nth-child(4){background:linear-gradient(180deg,#fff0f6,#ffe4f0);color:#c53777}
.dwwk-tabs a:nth-child(5){background:linear-gradient(180deg,#eef8ef,#e4f5e7);color:#207448}
.dwwk-tabs a:hover,.dwwk-tabs a:focus{transform:translateY(-1px) scale(1.01);border-color:rgba(24,64,141,.20);box-shadow:0 8px 18px rgba(24,64,141,.10);filter:saturate(1.04)}

.dwwk-panel{margin:0 0 18px;padding:18px 18px 16px;border:1px solid var(--dwwk-line);border-radius:20px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 8px 22px rgba(22,32,51,.05)}
.dwwk-panel h3{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dwwk-panel h3::before{content:"";width:7px;height:26px;border-radius:999px;background:linear-gradient(180deg,var(--dwwk-cyan),var(--dwwk-blue));box-shadow:0 2px 7px rgba(32,192,221,.28);flex:0 0 auto}
.dwwk-date{margin:0 0 12px;padding:0 0 9px;border-bottom:1px solid var(--dwwk-line);color:#2d3d56;font-size:clamp(16px,1.8vw,20px);font-weight:740;letter-spacing:-.01em}

.dwwk-match-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;margin:0}
.dwwk-match-card{position:relative;overflow:hidden;padding:13px 14px 14px;border:1px solid rgba(22,32,51,.09);border-radius:16px;background:linear-gradient(180deg,#fff,#fcfdff);box-shadow:0 3px 12px rgba(22,32,51,.04);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.dwwk-match-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,32,51,.08);border-color:rgba(24,64,141,.15)}
.dwwk-match-card::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:linear-gradient(180deg,var(--dwwk-cyan),var(--dwwk-orange) 70%, var(--dwwk-pink))}
.dwwk-match-card::after{content:"";position:absolute;inset:auto auto 0 0;width:100%;height:3px;background:linear-gradient(90deg,rgba(32,192,221,.0),rgba(32,192,221,.28),rgba(245,154,35,.20),rgba(255,77,147,.0));opacity:.75}
.dwwk-match-meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 11px;padding-left:1px;font-size:11.5px;line-height:1.2;color:var(--dwwk-muted)}
.dwwk-match-meta span{display:inline-flex;align-items:center;max-width:100%;padding:5px 9px;border-radius:999px;background:#f2f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwwk-match-meta span:first-child{background:linear-gradient(180deg,rgba(24,64,141,.12),rgba(24,64,141,.08));color:var(--dwwk-blue);font-weight:850}
.dwwk-match-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.dwwk-side{display:flex;align-items:center;gap:9px;min-width:0;font-weight:840}
.dwwk-home{justify-content:flex-start;text-align:left}.dwwk-away{justify-content:flex-end;text-align:right}
.dwwk-side span{display:block;min-width:0;overflow:hidden;color:#10192a;font-size:clamp(16px,1.55vw,21px);line-height:1.12;text-overflow:ellipsis}
.dwwk-score{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:38px;padding:0 12px;border-radius:13px;background:linear-gradient(180deg,#f7fbff,#eef4fb);border:1px solid rgba(22,32,51,.06);color:#0f1729;font-size:clamp(19px,1.8vw,26px);font-weight:950;line-height:1;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.dwwk-logo{width:23px;height:23px;object-fit:contain;flex:0 0 auto}
.dwwk-empty{margin:4px 0 0;padding:13px 14px;border:1px solid rgba(24,64,141,.10);border-radius:14px;background:#f6f9fd;color:#536177}
.dwwk-note{margin:18px 0 0;padding:13px 15px;border:1px solid rgba(24,64,141,.12);border-left:5px solid var(--dwwk-cyan);border-radius:14px;background:linear-gradient(180deg,#f7fbff,#f3f9ff);color:#49576d;font-size:14px}
.dwwk-credit{margin-top:14px;color:#6b7588;font-size:12px}

.dwwk-standings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.dwwk-standing-card h4{margin-bottom:9px;color:var(--dwwk-blue);font-size:18px}
.dwwk-table-scroll{overflow-x:auto;border:1px solid rgba(22,32,51,.09);border-radius:15px;background:#fff;box-shadow:0 4px 14px rgba(22,32,51,.04)}
.dwwk-table{width:100%;min-width:620px;border-collapse:collapse}
.dwwk-table th,.dwwk-table td{padding:9px 10px;border-bottom:1px solid rgba(22,32,51,.07);text-align:center;font-size:13.5px}
.dwwk-table th{background:linear-gradient(180deg,#eef5ff,#f5f9ff);color:#314156;font-weight:850}
.dwwk-table tr:last-child td{border-bottom:0}
.dwwk-table tbody tr:hover{background:#fbfdff}
.dwwk-team{display:flex;align-items:center;gap:8px;text-align:left!important;font-weight:780}

.dwwk-team-grid,.dwwk-venue-grid{display:grid;gap:14px}
.dwwk-team-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dwwk-venue-grid{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.dwwk-team-card,.dwwk-venue-card{overflow:hidden;border:1px solid rgba(22,32,51,.10);border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(22,32,51,.045);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dwwk-team-card:hover,.dwwk-venue-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,32,51,.08);border-color:rgba(24,64,141,.14)}
.dwwk-team-card{padding:0;text-align:left}
.dwwk-team-photo,.dwwk-venue-photo{display:block;width:100%;background:#eaf0f7}
.dwwk-team-card .dwwk-team-photo{height:112px;margin:0;border-radius:0;object-fit:cover}
.dwwk-team-card h4{padding:11px 13px 13px;font-size:16px}
.dwwk-venue-photo{height:144px;object-fit:cover}
.dwwk-no-image{display:flex!important;align-items:center;justify-content:center;font-size:38px;color:#173f8a}
.dwwk-team-card .dwwk-no-image{height:112px;margin:0;border-radius:0}
.dwwk-venue-body{padding:13px 14px 14px}
.dwwk-venue-body h4{margin:0 0 6px;color:#173f8a;font-size:17px;line-height:1.16}
.dwwk-venue-body p{margin:0;color:#657188;font-size:13.5px;line-height:1.32}

.dwwk-schema .dwwk-date,.dwwk-knockout h3,.dwwk-standings h3{margin-top:18px}

@media (max-width:980px){.dwwk-match-list{grid-template-columns:1fr}}
@media (max-width:760px){.dwwk-tabs{padding:10px}.dwwk-tabs a{padding:8px 11px;font-size:12.5px}.dwwk-panel{padding:16px}.dwwk-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.dwwk-wrap{margin:20px 0}.dwwk-hero{min-height:0;padding:22px 18px;border-radius:20px}.dwwk-tabs{gap:7px;margin-bottom:16px}.dwwk-panel{padding:15px;border-radius:18px}.dwwk-panel h3{margin-bottom:12px}.dwwk-panel h3::before{height:24px}.dwwk-date{font-size:17px}.dwwk-match-list{grid-template-columns:1fr}.dwwk-match-card{padding:13px}.dwwk-match-teams{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:9px}.dwwk-side span{font-size:17px;white-space:normal}.dwwk-score{min-width:42px;height:36px;padding:0 10px;font-size:19px}.dwwk-match-meta span{white-space:normal}.dwwk-table th,.dwwk-table td{padding:8px 9px}.dwwk-team-card .dwwk-team-photo,.dwwk-team-card .dwwk-no-image{height:96px}.dwwk-venue-photo{height:132px}}
@media (max-width:520px){.dwwk-tabs{padding:9px}.dwwk-tabs a{flex:0 0 auto}.dwwk-match-teams{grid-template-columns:1fr;gap:8px}.dwwk-score{justify-self:start}.dwwk-away{justify-content:flex-start;text-align:left}.dwwk-team-grid,.dwwk-venue-grid{grid-template-columns:1fr}}


/* v0.2.3 - statuskleuren en popup */
.dwwk-status-scheduled .dwwk-match-meta span:first-child{
  background:linear-gradient(180deg,rgba(24,64,141,.14),rgba(24,64,141,.08));
  color:#18408d;
}
.dwwk-status-live{
  border-color:rgba(220,38,38,.22);
  box-shadow:0 6px 22px rgba(220,38,38,.08);
}
.dwwk-status-live::before{
  background:linear-gradient(180deg,#ef4444,#f59a23);
}
.dwwk-status-live .dwwk-match-meta span:first-child{
  background:linear-gradient(180deg,#fee2e2,#fecaca);
  color:#b91c1c;
}
.dwwk-status-break .dwwk-match-meta span:first-child{
  background:linear-gradient(180deg,#fff7ed,#fed7aa);
  color:#9a3412;
}
.dwwk-status-finished::before{
  background:linear-gradient(180deg,#2fb673,#20c0dd);
}
.dwwk-status-finished .dwwk-match-meta span:first-child{
  background:linear-gradient(180deg,#dcfce7,#bbf7d0);
  color:#166534;
}
.dwwk-status-alert::before{
  background:linear-gradient(180deg,#ff4d93,#ef4444);
}
.dwwk-status-alert .dwwk-match-meta span:first-child{
  background:linear-gradient(180deg,#ffe4f0,#fecdd3);
  color:#be123c;
}

.dwwk-photo-button,
.dwwk-title-button,
.dwwk-team-inline{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:inherit;
}
.dwwk-photo-button{
  display:block;
  width:100%;
  overflow:hidden;
}
.dwwk-title-button{
  color:inherit;
  font-weight:inherit;
}
.dwwk-title-button:hover,
.dwwk-team-inline:hover span{
  color:#18408d;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.dwwk-team-inline{
  min-width:0;
  display:block;
}
.dwwk-team-inline span{
  display:block;
}

.dwwk-photo-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.dwwk-photo-modal.is-open{
  display:flex;
}
.dwwk-photo-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,17,32,.74);
  backdrop-filter:blur(6px);
}
.dwwk-photo-modal__dialog{
  position:relative;
  z-index:1;
  width:min(920px,94vw);
  max-height:92vh;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.dwwk-photo-modal__image{
  display:block;
  width:100%;
  max-height:74vh;
  object-fit:cover;
  background:#eaf0f7;
}
.dwwk-photo-modal__caption{
  padding:14px 18px;
  font-size:20px;
  font-weight:850;
  color:#162033;
  background:linear-gradient(180deg,#fff,#f7f9fd);
}
.dwwk-photo-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#162033;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.dwwk-photo-modal__close:hover{
  background:#fff;
  transform:scale(1.03);
}
body.dwwk-modal-open{
  overflow:hidden;
}

@media(max-width:680px){
  .dwwk-photo-modal{padding:14px}
  .dwwk-photo-modal__dialog{border-radius:18px}
  .dwwk-photo-modal__caption{font-size:17px;padding:12px 14px}
  .dwwk-photo-modal__close{width:38px;height:38px;font-size:25px}
}


/* v0.2.4 - klikbare meta-info */
.dwwk-match-meta a,
.dwwk-match-meta button{
  appearance:none;
  border:0;
  font:inherit;
  text-decoration:none!important;
  cursor:pointer;
}

.dwwk-match-meta .dwwk-meta-chip,
.dwwk-match-meta .dwwk-meta-time{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:5px 9px;
  border-radius:999px;
  background:#f2f5f9;
  color:var(--dwwk-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dwwk-match-meta .dwwk-meta-time{
  background:linear-gradient(180deg,rgba(24,64,141,.12),rgba(24,64,141,.08));
  color:var(--dwwk-blue);
  font-weight:850;
}

.dwwk-match-meta .dwwk-meta-group{
  color:#5c40b1;
  background:linear-gradient(180deg,#f2efff,#e9e4ff);
}

.dwwk-match-meta .dwwk-meta-venue{
  color:#a45a00;
  background:linear-gradient(180deg,#fff5e9,#ffeed8);
}

.dwwk-match-meta a:hover,
.dwwk-match-meta button:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
  box-shadow:0 5px 12px rgba(22,32,51,.08);
}

.dwwk-match-meta button.dwwk-meta-venue::after{
  content:" ↗";
  font-weight:800;
  opacity:.7;
}