/* WK Pool Pro v1.5.1 — premium mobiel component system */

.wkp{
  --wkp-navy:#071422;
  --wkp-navy-2:#0b1d31;
  --wkp-navy-3:#10263d;
  --wkp-orange:#ff7a00;
  --wkp-orange-2:#ff5f00;
  --wkp-cream:#fffaf2;
  --wkp-card:#ffffff;
  --wkp-ink:#071422;
  --wkp-muted:#64748b;
  --wkp-line:rgba(7,20,34,.10);
  --wkp-radius-xl:28px;
  --wkp-radius-lg:22px;
  --wkp-radius-md:16px;
  --wkp-shadow-card:0 16px 42px rgba(7,20,34,.13);
  --wkp-shadow-soft:0 10px 26px rgba(7,20,34,.09);
  --wkp-space:clamp(14px,3.5vw,26px);
  font-family:Inter,Roboto,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  color:var(--wkp-ink) !important;
  max-width:1120px;
  margin-inline:auto;
}

.wkp,
.wkp *{ box-sizing:border-box; }

.wkp a{ color:inherit; }

/* Basiscomponenten */
.wkp .wkp-hero,
.wkp .wkp-next,
.wkp .wkp-front-card,
.wkp .wkp-news-card,
.wkp .wkp-app-card,
.wkp .wkp-app-stat-card,
.wkp .wkp-details,
.wkp .wkp-podium-card,
.wkp .wkp-tavern-podium-card{
  border-radius:var(--wkp-radius-xl) !important;
  box-shadow:var(--wkp-shadow-card) !important;
}

.wkp .wkp-hero,
.wkp .wkp-next,
.wkp .wkp-app-card-hero,
.wkp .wkp-orange-banner,
.wkp .wkp-front-leader{
  background:
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.17), transparent 20%),
    radial-gradient(circle at 90% 85%, rgba(255,122,0,.30), transparent 28%),
    linear-gradient(135deg,var(--wkp-navy) 0%, var(--wkp-navy-3) 45%, var(--wkp-orange-2) 100%) !important;
}

.wkp .wkp-hero,
.wkp .wkp-hero *,
.wkp .wkp-next,
.wkp .wkp-next *,
.wkp .wkp-app-card-hero,
.wkp .wkp-app-card-hero *,
.wkp .wkp-orange-banner,
.wkp .wkp-orange-banner *,
.wkp .wkp-front-leader,
.wkp .wkp-front-leader *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background-clip:border-box !important;
  -webkit-background-clip:border-box !important;
  text-shadow:none !important;
}

.wkp .wkp-section-title,
.wkp .wkp-tavern-title,
.wkp .wkp-front-section-head h2{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,var(--wkp-navy),var(--wkp-orange-2)) !important;
  border-radius:999px !important;
  padding:10px 16px !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

.wkp .wkp-front-section,
.wkp .wkp-analysis-grid,
.wkp .wkp-analysis-columns,
.wkp .wkp-front-grid,
.wkp .wkp-news-grid,
.wkp .wkp-front-top5,
.wkp .wkp-tavern-podium,
.wkp .wkp-podium{
  gap:clamp(14px,2.5vw,22px) !important;
}

.wkp .wkp-front-card,
.wkp .wkp-news-card,
.wkp .wkp-podium-card,
.wkp .wkp-tavern-podium-card,
.wkp .wkp-details,
.wkp .wkp-table,
.wkp .wkp-app-card,
.wkp .wkp-app-stat-card{
  background:var(--wkp-card) !important;
  border:1px solid rgba(255,122,0,.18) !important;
  color:var(--wkp-ink) !important;
}

.wkp .wkp-front-card:not(.wkp-front-leader) span,
.wkp .wkp-news-card .wkp-kicker,
.wkp .wkp-app-stat-label{
  color:var(--wkp-orange-2) !important;
  -webkit-text-fill-color:var(--wkp-orange-2) !important;
}

.wkp .wkp-front-card strong,
.wkp .wkp-news-card h3,
.wkp .wkp-podium-card strong,
.wkp .wkp-tavern-podium-card strong{
  color:var(--wkp-ink) !important;
  -webkit-text-fill-color:var(--wkp-ink) !important;
  letter-spacing:-.03em !important;
}

.wkp .wkp-front-card em,
.wkp .wkp-news-card p,
.wkp .wkp-hint,
.wkp .wkp-notice,
.wkp .wkp-success{
  color:var(--wkp-muted) !important;
  -webkit-text-fill-color:var(--wkp-muted) !important;
}

/* Form / invulpagina */
.wkp .wkp-details{
  overflow:hidden !important;
  margin:18px 0 !important;
  padding:0 !important;
}

.wkp .wkp-details > summary{
  list-style:none !important;
  cursor:pointer !important;
  padding:18px 20px !important;
  color:var(--wkp-ink) !important;
  -webkit-text-fill-color:var(--wkp-ink) !important;
  background:linear-gradient(180deg,#fff,#fff7ea) !important;
  border-bottom:1px solid rgba(255,122,0,.16) !important;
  font-weight:950 !important;
}

.wkp .wkp-details > summary::-webkit-details-marker{ display:none; }
.wkp .wkp-details > summary::after{
  content:'⌄';
  float:right;
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--wkp-navy);
  color:#fff;
  -webkit-text-fill-color:#fff;
}
.wkp .wkp-details[open] > summary::after{ content:'⌃'; }

.wkp .wkp-fields{
  padding:var(--wkp-space) !important;
}

.wkp input,
.wkp select,
.wkp textarea{
  border:1px solid rgba(7,20,34,.16) !important;
  border-radius:14px !important;
  padding:11px 12px !important;
  min-height:44px !important;
  background:#fff !important;
  color:var(--wkp-ink) !important;
  font:inherit !important;
  box-shadow:0 1px 0 rgba(7,20,34,.04) !important;
}

.wkp input:focus,
.wkp select:focus,
.wkp textarea:focus{
  outline:3px solid rgba(255,122,0,.22) !important;
  border-color:var(--wkp-orange) !important;
}

.wkp .wkp-button,
.wkp button.wkp-button,
.wkp .wkp-savebar .wkp-button{
  min-height:48px !important;
  border:0 !important;
  border-radius:999px !important;
  padding:13px 22px !important;
  background:linear-gradient(135deg,var(--wkp-orange),var(--wkp-orange-2)) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:950 !important;
  box-shadow:0 12px 24px rgba(255,95,0,.28) !important;
}

/* Tabellen als consistente component */
.wkp .wkp-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden !important;
  box-shadow:var(--wkp-shadow-soft) !important;
}

.wkp .wkp-table th{
  background:var(--wkp-navy) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:12px !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  padding:14px 12px !important;
}

.wkp .wkp-table td{
  padding:13px 12px !important;
  border-bottom:1px solid var(--wkp-line) !important;
  color:var(--wkp-ink) !important;
  -webkit-text-fill-color:var(--wkp-ink) !important;
  background:#fff !important;
}

.wkp .wkp-table tr:last-child td{ border-bottom:0 !important; }
.wkp .wkp-table td strong{ color:var(--wkp-orange-2) !important; -webkit-text-fill-color:var(--wkp-orange-2) !important; }

.wkp .wkp-tavern-cell,
.wkp .wkp-tavern-link{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
}

/* Analyse cards aanscherpen */
.wkp .wkp-app-card{
  overflow:hidden !important;
}
.wkp .wkp-app-list-row{
  border-bottom:1px solid var(--wkp-line) !important;
}
.wkp .wkp-app-rank,
.wkp .wkp-rank-no,
.wkp .wkp-badge,
.wkp .wkp-points-badge,
.wkp .wkp-state-badge{
  border-radius:999px !important;
}

/* Mobiel: alles voelt als app-cards */
@media (max-width:768px){
  .wkp{
    max-width:none;
    width:100%;
    padding-inline:10px;
  }

  .wkp .wkp-hero,
  .wkp .wkp-next,
  .wkp .wkp-front-card,
  .wkp .wkp-news-card,
  .wkp .wkp-app-card,
  .wkp .wkp-app-stat-card,
  .wkp .wkp-details,
  .wkp .wkp-podium-card,
  .wkp .wkp-tavern-podium-card{
    border-radius:22px !important;
  }

  .wkp .wkp-front-grid,
  .wkp .wkp-news-grid,
  .wkp .wkp-front-top5,
  .wkp .wkp-podium,
  .wkp .wkp-tavern-podium{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .wkp .wkp-table,
  .wkp .wkp-table thead,
  .wkp .wkp-table tbody,
  .wkp .wkp-table tr,
  .wkp .wkp-table th,
  .wkp .wkp-table td{
    display:block !important;
    width:100% !important;
  }

  .wkp .wkp-table{
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  .wkp .wkp-table thead{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(1px,1px,1px,1px) !important;
  }

  .wkp .wkp-table tr{
    margin:0 0 14px !important;
    padding:14px !important;
    background:#fff !important;
    border:1px solid rgba(255,122,0,.18) !important;
    border-radius:22px !important;
    box-shadow:var(--wkp-shadow-soft) !important;
  }

  .wkp .wkp-table td{
    display:grid !important;
    grid-template-columns:minmax(95px,38%) 1fr !important;
    gap:12px !important;
    align-items:center !important;
    border:0 !important;
    padding:9px 2px !important;
    min-height:36px !important;
    background:transparent !important;
    text-align:right !important;
  }

  .wkp .wkp-table td::before{
    content:attr(data-label);
    text-align:left !important;
    color:var(--wkp-muted) !important;
    -webkit-text-fill-color:var(--wkp-muted) !important;
    font-size:12px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
  }

  .wkp .wkp-table td:first-child{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding-bottom:12px !important;
    margin-bottom:6px !important;
    border-bottom:1px solid var(--wkp-line) !important;
    color:var(--wkp-orange-2) !important;
    -webkit-text-fill-color:var(--wkp-orange-2) !important;
    font-size:22px !important;
    font-weight:950 !important;
  }

  .wkp .wkp-table td:first-child::before{
    content:'Positie';
    color:var(--wkp-ink) !important;
    -webkit-text-fill-color:var(--wkp-ink) !important;
    font-size:13px !important;
  }

  .wkp .wkp-tavern-cell,
  .wkp .wkp-tavern-link{
    justify-content:flex-end !important;
    text-align:right !important;
  }

  .wkp .wkp-match-table tr{
    padding:16px !important;
  }

  .wkp .wkp-match-table td:nth-child(2){
    display:block !important;
    text-align:left !important;
    font-size:18px !important;
    font-weight:950 !important;
    padding-top:4px !important;
  }
  .wkp .wkp-match-table td:nth-child(2)::before{
    display:block !important;
    margin-bottom:4px !important;
  }
  .wkp .wkp-match-table td:last-child{
    grid-template-columns:1fr !important;
    text-align:left !important;
  }
  .wkp .wkp-match-table td:last-child::before{
    margin-bottom:6px !important;
  }
  .wkp .wkp-match-table input[type="number"]{
    width:72px !important;
    text-align:center !important;
    font-size:18px !important;
    font-weight:900 !important;
  }

  .wkp .wkp-checkgrid{
    grid-template-columns:1fr !important;
    padding:14px !important;
  }

  .wkp .wkp-checkgrid label{
    border:1px solid rgba(7,20,34,.10) !important;
    border-radius:16px !important;
    padding:12px !important;
    background:#fff !important;
  }

  .wkp .wkp-savebar{
    position:sticky !important;
    bottom:10px !important;
    z-index:20 !important;
    padding:8px !important;
    border-radius:999px !important;
    background:rgba(255,250,242,.88) !important;
    backdrop-filter:blur(10px) !important;
  }

  .wkp .wkp-savebar .wkp-button{
    width:100% !important;
  }
}