/* WK Pool Pro v1.5.0 — echte app cards */

/* App-card grid */
.wkp .wkp-analysis-columns {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.wkp .wkp-analysis-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  margin: 22px 0 !important;
}

/* Stat cards bovenaan */
.wkp .wkp-app-stat-card {
  background: #fffaf2 !important;
  border: 1px solid rgba(255,122,0,.22) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
  color: #071422 !important;
}

.wkp .wkp-app-stat-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#ff7a00,#ff5a00) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
}

.wkp .wkp-app-stat-label {
  display: block !important;
  color: #071422 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 12px !important;
  background: transparent !important;
}

.wkp .wkp-app-stat-card strong {
  display: block !important;
  color: #071422 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  background: transparent !important;
}

.wkp .wkp-app-stat-card small {
  color: #475569 !important;
  background: transparent !important;
}

/* Hoofd app card */
.wkp .wkp-app-card {
  background: #ffffff !important;
  border: 1px solid rgba(255,122,0,.22) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;
  padding: 0 !important;
  color: #071422 !important;
}

.wkp .wkp-app-card * {
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Hero in app card */
.wkp .wkp-app-card-hero {
  position: relative !important;
  min-height: 190px !important;
  padding: 32px 34px !important;
  background:
    radial-gradient(circle at 88% 72%, rgba(7,20,34,.42), transparent 18%),
    radial-gradient(circle at 86% 78%, rgba(255,255,255,.18), transparent 13%),
    linear-gradient(135deg,#ff6a00 0%, #f35d00 44%, #17202d 100%) !important;
  overflow: hidden !important;
}

.wkp .wkp-app-card-hero,
.wkp .wkp-app-card-hero * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

.wkp .wkp-app-card-hero h2 {
  position: relative !important;
  z-index: 2 !important;
  max-width: 85% !important;
  margin: 18px 0 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: .98 !important;
  letter-spacing: -0.05em !important;
  font-weight: 950 !important;
}

.wkp .wkp-app-kicker {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.wkp .wkp-app-ghost {
  position: absolute !important;
  right: 26px !important;
  bottom: 16px !important;
  font-size: 76px !important;
  opacity: .18 !important;
  filter: grayscale(1) brightness(.45) !important;
  z-index: 1 !important;
}

/* List */
.wkp .wkp-app-list {
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.wkp .wkp-app-list-row {
  display: grid !important;
  grid-template-columns: 34px 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 66px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(7,20,34,.10) !important;
  color: #071422 !important;
  background: transparent !important;
}

.wkp .wkp-app-list-row:last-child {
  border-bottom: 0 !important;
}

.wkp .wkp-app-rank {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #071422 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

.wkp .wkp-app-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  color: #071422 !important;
  -webkit-text-fill-color: #071422 !important;
  font-weight: 850 !important;
  font-size: 17px !important;
  background: transparent !important;
}

.wkp .wkp-app-main .wkp-team,
.wkp .wkp-app-main .wkp-team-nl,
.wkp .wkp-app-main span {
  color: #071422 !important;
  -webkit-text-fill-color: #071422 !important;
  background: transparent !important;
}

.wkp .wkp-app-main small,
.wkp .wkp-app-score small,
.wkp .wkp-app-intro {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.wkp .wkp-app-score {
  color: #ff5f00 !important;
  -webkit-text-fill-color: #ff5f00 !important;
  font-weight: 950 !important;
  font-size: 22px !important;
  text-align: right !important;
  background: transparent !important;
}

.wkp .wkp-app-score small {
  display: block !important;
  text-align: right !important;
  font-size: 11px !important;
}

.wkp .wkp-app-intro {
  margin: 20px 22px 0 !important;
}

/* Flags inside app lists */
.wkp .wkp-app-list .wkp-emoji-flag,
.wkp .wkp-app-list .wkp-flag {
  margin-right: 6px !important;
}

/* Fix old table cards still under analysis */
.wkp .wkp-analysis-card table {
  background: #fff !important;
  color: #071422 !important;
}

/* Mobiel */
@media (max-width: 768px) {
  .wkp .wkp-analysis-columns,
  .wkp .wkp-analysis-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .wkp .wkp-app-card-hero {
    min-height: 150px !important;
    padding: 24px !important;
  }

  .wkp .wkp-app-card-hero h2 {
    font-size: clamp(30px, 10vw, 44px) !important;
    max-width: 92% !important;
  }

  .wkp .wkp-app-list {
    padding: 16px !important;
  }

  .wkp .wkp-app-list-row {
    grid-template-columns: 30px 1fr auto !important;
    gap: 10px !important;
    min-height: 58px !important;
  }

  .wkp .wkp-app-main {
    font-size: 15px !important;
  }

  .wkp .wkp-app-score {
    font-size: 18px !important;
  }
}