/* ============================================================
   VÉDJEGYEK szekció — CSS
   Beillesztés: public/index.html <style> blokk végére
   A meglévő CSS-változókat használja (var(--line-2), var(--text-4) stb.)
   ============================================================ */

.mrc-list{display:flex;flex-direction:column;}

.mrc-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line-2);
}
.mrc-row:last-child{border-bottom:none;}

.mrc-main{flex:1;min-width:0;}

.mrc-name{
  font-size:13px;font-weight:600;color:var(--text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.mrc-meta{
  font-size:11px;color:var(--text-4);margin-top:2px;
  font-variant-numeric:tabular-nums;
}

.mrc-side{
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;
}

.mrc-toggle{
  font-size:12px;color:var(--text-4);
  padding:8px 0 2px;cursor:pointer;
  border-top:1px solid var(--line-2);
  margin-top:2px;
  user-select:none;
}
.mrc-toggle:hover{color:var(--text-2);}

.mrc-note{
  font-size:10.5px;line-height:1.45;color:var(--text-4);
  margin-top:10px;padding-top:8px;
  border-top:1px solid var(--line-2);
}

/* mobilon a chipek a név alá kerülnek */
@media (max-width:640px){
  .mrc-row{flex-direction:column;align-items:flex-start;gap:5px;}
  .mrc-side{justify-content:flex-start;}
}