/* v1.css - trafficdata widget styles (accordion per road + refresh button with blinking label) */

/* Base */
.traffic-widget{
  width:100%;
  margin:22px 0;
  font-family:inherit;
  line-height:1.35;
}
.traffic-widget *{ box-sizing:border-box; }

.tdw{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.14);
}

/* Header */
.tdw__head{
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.04);
}

.tdw__headTop{
  display:flex;
  align-items:center;
  gap:12px;
}

.tdw__title{
  font-weight:900;
  font-size:20px;
  letter-spacing:.2px;
  flex:1;
  min-width:0;
}

/* hide updated-line while refreshing */
.tdw__head.is-refreshing .tdw__meta{
  display:none;
}

/* Total + meta */
.tdw__total{
  font-size:14px;
  font-weight:700;
  opacity:.85;
  margin:2px 0 0;
}
.tdw__meta{
  margin-top:6px;
  font-size:13px;
  opacity:.75;
}

/* Refresh button (text only) */
.tdw__refreshBtn{
  appearance:none;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  color:inherit;
  line-height:1;

  /* ✅ voorkomt rare “pressed” highlight op iOS */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tdw__refreshBtn:hover{
  background:rgba(0,0,0,.03);
}
.tdw__refreshBtn:active{
  transform:translateY(1px);
}

/* ✅ disabled niet “permanent grijs”: we gebruiken is-loading voor feedback */
.tdw__refreshBtn:disabled{
  opacity:1;
  cursor:default;
  transform:none;
}

/* ✅ loading state: knop krijgt subtiele achtergrond (blijft 3s staan) */
.tdw__refreshBtn.is-loading{
  background:rgba(0,0,0,.06);
}

/* knop na refresh altijd weer wit maken */
.tdw__refreshBtn:not(.is-loading){
  background:#fff;
}

/* ✅ tijdens loading geen hover/active gedrag */
.tdw__refreshBtn.is-loading:hover{
  background:rgba(0,0,0,.06);
}
.tdw__refreshBtn.is-loading:active{
  transform:none;
}

/* Label */
.tdw__refreshLabel{
  font-size:13px;
  font-weight:700;
  text-transform:lowercase;
  opacity:.95;
}

/* ✅ Knipper animatie: grijs -> zwart -> grijs -> zwart */
@keyframes tdwBlinkText{
  0%   { color: rgba(0,0,0,.35); }
  25%  { color: rgba(0,0,0,1); }
  50%  { color: rgba(0,0,0,.35); }
  75%  { color: rgba(0,0,0,1); }
  100% { color: rgba(0,0,0,.35); }
}

.tdw__refreshLabel.is-blinking{
  animation: tdwBlinkText 1.0s ease-in-out infinite;
}

/* Body */
.tdw__body{ padding:14px; }

.tdw__none{
  font-size:15px;
  padding:10px 0 6px;
  opacity:.8;
}

/* Road groups (accordion) */
.tdw__roads{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tdw__roadgroup{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:rgba(0,0,0,.02);
  overflow:hidden;
}

/* Summary row */
.tdw__summary{
  list-style:none;
  cursor:pointer;
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.tdw__summary::-webkit-details-marker{ display:none; }

.tdw__summaryLeft{ min-width:72px; }
.tdw__road{
  font-weight:950;
  font-size:22px;
  line-height:1;
}

.tdw__summaryMid{
  flex:1;
  font-size:14px;
  opacity:.85;
  text-align:center;
}

.tdw__summaryRight{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  opacity:.9;
}
.tdw__action{
  font-weight:600;
  text-transform:lowercase;
}
.tdw__chev{
  width:10px;
  height:10px;
  border-right:2px solid rgba(0,0,0,.55);
  border-bottom:2px solid rgba(0,0,0,.55);
  transform:rotate(45deg);
  margin-top:-2px;
}

.tdw__roadgroup[open] .tdw__chev{
  transform:rotate(-135deg);
  margin-top:2px;
}

/* Incidents */
.tdw__incidents{
  padding:12px 12px 14px;
  border-top:1px solid rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#fff;
}

.tdw__incident{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:12px;
  background:rgba(30,120,255,.06);
}

.tdw__route{
  font-size:15px;
  font-weight:650;
  margin-bottom:10px;
  word-break:break-word;
}

.tdw__metrics{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.tdw__pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  background:rgba(0,0,0,.06);
}

/* Mobile tweaks */
@media (max-width: 420px){
  .tdw__road{ font-size:20px; }
  .tdw__summary{ padding:12px; }
  .tdw__summaryMid{ font-size:13px; }
  .tdw__route{ font-size:14px; }

  /* label blijft zichtbaar op mobiel */
  .tdw__refreshBtn{ padding:8px 10px; }
  .tdw__refreshLabel{ font-size:13px; }
}