/* Mobile off-canvas menu redesign: team selector, consolidated KPI grid, full-width nav list, language checkmark */

/* 1. Header block: team selector + KPI grid */
.dt-mobile-menu__header {
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.dt-mobile-menu__team-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.dt-mobile-menu__team-avatar img,
.dt-mobile-menu__team-avatar svg {
  height: 40px;
  width: auto;
  display: block;
}

.dt-mobile-menu__team-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.dt-mobile-menu__team-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgb(255 255 255 / 55%);
}

.dt-mobile-menu__team-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-mobile-menu__team-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 16%);
  color: #00e5a4;
  flex-shrink: 0;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.dt-mobile-menu__team-chevron:hover,
.dt-mobile-menu__team-chevron:focus-visible {
  background: rgb(0 229 164 / 14%);
  border-color: rgb(0 229 164 / 40%);
  outline: none;
}

.dt-mobile-menu__kpis {
  margin-bottom: 0;
}

.dt-mobile-menu__kpis .dt-game-kpi {
  inline-size: auto;
  width: 100%;
}

/* 2. Nav: full-width vertical list i.p.v. 2x2 tegels */
.dt-mobile-menu__nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dt-mobile-menu__nav-list a,
.dt-mobile-menu__nav-list .dt-nav-btn {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  min-height: 0;
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: none;
}

.dt-mobile-menu__nav-list a i,
.dt-mobile-menu__nav-list .dt-nav-btn i {
  font-size: 18px;
}

.dt-mobile-menu__nav-list a:hover,
.dt-mobile-menu__nav-list a:focus,
.dt-mobile-menu__nav-list .dt-nav-btn:hover,
.dt-mobile-menu__nav-list .dt-nav-btn:focus {
  background: rgb(255 255 255 / 8%);
}

.dt-mobile-menu__nav-list a.is-active {
  background: rgb(0 229 164 / 10%);
  color: #00e5a4;
  border-color: rgb(0 229 164 / 22%);
  box-shadow: inset 3px 0 0 0 #00e5a4;
}

/* 3. Taalkeuze: actieve rij met vinkje rechts uitgelijnd */
.dt-mobile-list__item {
  justify-content: flex-start;
}

.dt-mobile-list__check {
  margin-left: auto;
}